diff options
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 75 | ||||
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 53 |
2 files changed, 119 insertions, 9 deletions
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<Doc>(); + @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>(); + @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 ( <div className="collectionSchemaView"> @@ -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} /> ))} </div> 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<Doc>; - 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<SchemaRowBoxProps>() { + 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 ( - <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE } : {}} onPointerDown={this.onRowPointerDown}> + <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE, opacity: this.props.dragging ? 0.5 : 1} : {}} onPointerDown={this.onRowPointerDown} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} ref={(row: HTMLDivElement | null) => (this._ref = row)}> <div className="row-menu" style={{width: this.props.rowMenuWidth}}> <div className="row-button" onPointerDown={undoBatch((e) => {e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}> <FontAwesomeIcon icon="times" /> |