From 5c4b22b50e4693419daac777669b258b155f6ea9 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 11 Aug 2022 13:08:56 -0400 Subject: bad dragging code in progress --- .../collectionSchema/CollectionSchemaView.tsx | 75 ++++++++++++++++++++-- .../collections/collectionSchema/SchemaRowBox.tsx | 53 ++++++++++++++- 2 files changed, 119 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 20d809232..9ca1644e3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -9,6 +9,10 @@ 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, @@ -25,7 +29,8 @@ export class CollectionSchemaView extends CollectionSubView() { private _lastSelectedRow: number | undefined; @observable _rowMenuWidth: number = 60; - @observable _selectedDocs: ObservableSet = new ObservableSet(); + @observable _selectedDocs: ObservableSet = new ObservableSet(); + @observable _isDragging: boolean = false; @computed get columnKeys() { return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys); @@ -48,15 +53,18 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (doc: Doc, ctrl?: boolean, shift?: boolean) => { + selectRow = (e: React.PointerEvent, doc: Doc) => { + const ctrl = e.ctrlKey || e.metaKey; + const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { - const currSelectedRow = this.childDocs.indexOf(doc); - const startRow = Math.min(this._lastSelectedRow, currSelectedRow); - const endRow = Math.max(this._lastSelectedRow, currSelectedRow); + const currRowIndex = this.childDocs.indexOf(doc); + const startRow = Math.min(this._lastSelectedRow, currRowIndex); + const endRow = Math.max(this._lastSelectedRow, currRowIndex); for (let i = startRow; i <= endRow; i++) { - const currDoc = this.childDocs[i]; + const currDoc: Doc = this.childDocs[i]; if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc); } + this._lastSelectedRow = endRow; } else if (ctrl) { if (!this._selectedDocs.has(doc)) { this._selectedDocs.add(doc); @@ -71,6 +79,58 @@ export class CollectionSchemaView extends CollectionSubView() { } }; + @action + sortedSelectedDocs = (): Doc[] => { + 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)); + return true; + } + return false; + }; + + @action + startDrag = (e: React.PointerEvent, doc: Doc) => { + if (this._selectedDocs.size === 0) this._selectedDocs.add(doc); + this._isDragging = true; + const dragData = new DragManager.DocumentDragData(this.sortedSelectedDocs(), 'move'); + dragData.moveDocument = this.moveDocument; + const dragItem: HTMLElement[] = []; + const dragDiv = document.createElement('div'); + dragDiv.className = 'presItem-multiDrag'; + dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' rows'; + dragDiv.style.position = 'absolute'; + dragDiv.style.top = e.clientY + 'px'; + dragDiv.style.left = e.clientX - 50 + 'px'; + dragItem.push(dragDiv); + + DragManager.StartDocumentDrag( + dragItem.map(ele => ele), + dragData, + e.clientX, + e.clientY, + undefined + ); + this._isDragging = false; + return true; + }; + + @action + endDrag = (e: React.PointerEvent) => { + // this._isDragging = false; + }; + render() { return (
@@ -92,6 +152,9 @@ export class CollectionSchemaView extends CollectionSubView() { rowMenuWidth={this._rowMenuWidth} selectedRows={this._selectedDocs} selectRow={this.selectRow} + startDrag={this.startDrag} + endDrag={this.endDrag} + dragging={this._isDragging} /> ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 33f4e0bfc..0065a0938 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -9,28 +9,75 @@ import { Colors } from '../../global/globalEnums'; import { FieldViewProps } from '../../nodes/FieldView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; +import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; +import { DragManager } from '../../../util/DragManager'; export interface SchemaRowBoxProps extends FieldViewProps { columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; selectedRows: ObservableSet; - selectRow: (doc: Doc, cmd?: boolean, shift?: boolean) => void; + selectRow: (e: any, doc: Doc) => void; + startDrag: (e: any, doc: Doc) => boolean; + endDrag: (e: any) => void + dragging: boolean; } @observer export class SchemaRowBox extends ViewBoxBaseComponent() { + private _ref: HTMLDivElement | null = null; + isSelected = () => this.props.selectedRows.has(this.props.Document); + bounds = () => this._ref?.getBoundingClientRect(); @action onRowPointerDown = (e: React.PointerEvent) => { e.stopPropagation(); - this.props.selectRow(this.props.Document, e.ctrlKey || e.metaKey, e.shiftKey); + + setupMoveUpEvents( + this, e, + (e) => this.props.startDrag(e, this.props.Document), + emptyFunction, + (e) => this.props.selectRow(e, this.props.Document) + ) } + onPointerEnter = (e: any) => { + document.removeEventListener('pointermove', this.onPointerMove); + document.addEventListener('pointermove', this.onPointerMove); + }; + + onPointerMove = (e: any) => { + let dragIsRow: boolean = true; + DragManager.docsBeingDragged.forEach(doc => { + dragIsRow = this.props.selectedRows.has(doc); + }) + if (this._ref && dragIsRow) { + const rect = this._ref.getBoundingClientRect(); + const y = e.clientY - rect.top; //y position within the element. + const height = this._ref.clientHeight; + const halfLine = height / 2; + if (y <= halfLine) { + this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; + this._ref.style.borderBottom = '0px'; + } else if (y > halfLine) { + this._ref.style.borderTop = '0px'; + this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; + } + } + }; + + onPointerLeave = (e: any) => { + if (this._ref) { + this._ref.style.borderTop = '0px'; + this._ref.style.borderBottom = '0px'; + } + document.removeEventListener('pointermove', this.onPointerMove); + }; + render() { return ( -
+
(this._ref = row)}>
{e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}> -- cgit v1.2.3-70-g09d2