diff options
3 files changed, 73 insertions, 73 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 1d0ab459d..4d7e8c39f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -7,22 +7,6 @@ .schema-table { background-color: $white; - .schema-header-row, - .schema-row { - display: flex; - flex-direction: row; - max-height: 70px; - overflow: auto; - - .schema-column-header, - .schema-table-cell, - .row-menu { - border: 1px solid $medium-gray; - padding: 5px; - overflow: hidden; - } - } - .schema-header-row { justify-content: flex-end; @@ -63,44 +47,60 @@ } } - .schema-row { - justify-content: flex-end; - - .row-menu { - display: flex; - flex-direction: row; - justify-content: center; - min-width: 50px; - } - - .row-cells { - display: flex; - flex-direction: row; - justify-content: flex-end; - } - } - .schema-header-menu { display: flex; flex-direction: row; } + } +} - .row-button, - .schema-header-button { - width: 20px; - height: 20px; - border-radius: 100%; - background-color: $dark-gray; - color: white; - margin: 3px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; +.schema-header-row, +.schema-row { + display: flex; + flex-direction: row; + max-height: 70px; + overflow: auto; + + .schema-column-header, + .schema-table-cell, + .row-menu { + border: 1px solid $medium-gray; + padding: 5px; + overflow: hidden; + } +} - svg { - width: 12px; - } - } +.schema-row { + justify-content: flex-end; + + .row-menu { + display: flex; + flex-direction: row; + justify-content: center; + min-width: 50px; + } + + .row-cells { + display: flex; + flex-direction: row; + justify-content: flex-end; + } +} + +.schema-row-button, +.schema-header-button { + width: 20px; + height: 20px; + border-radius: 100%; + background-color: $dark-gray; + color: white; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 12px; } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 69a49598d..84a69d4b9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require('react'); -import { action, computed, observable, ObservableSet } from 'mobx'; +import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; @@ -41,7 +41,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _minColWidth: number = 120; @observable _rowMenuWidth: number = 100; - @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>(); + @observable _selectedDocs: ObservableMap = new ObservableMap<SchemaRowBox, HTMLDivElement>(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; @@ -149,7 +149,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { + selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { @@ -157,19 +157,19 @@ export class CollectionSchemaView extends CollectionSubView() { 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); + if (!this._selectedDocs.has(currDoc)) this._selectedDocs.set(currDoc, ref); } this._lastSelectedRow = endRow; } else if (ctrl) { if (!this._selectedDocs.has(doc)) { - this._selectedDocs.add(doc); + this._selectedDocs.set(doc, ref); this._lastSelectedRow = index; } else { this._selectedDocs.delete(doc); } } else { this._selectedDocs.clear(); - this._selectedDocs.add(doc); + this._selectedDocs.set(doc, ref); this._lastSelectedRow = index; } @@ -219,25 +219,25 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - startDrag = (e: React.PointerEvent, doc: Doc) => { + startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { if (!this._selectedDocs.has(doc)) { this._selectedDocs.clear(); - this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._selectedDocs.set(doc, ref); + this._lastSelectedRow = index; SelectionManager.SelectSchemaViewDoc(doc); } this._isDragging = true; 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 + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); - dragDiv.style.position = 'absolute'; - dragDiv.style.top = e.clientY + 'px'; - dragDiv.style.left = e.clientX - 50 + 'px'; - dragItem.push(dragDiv); + const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()); + // const dragDiv = document.createElement('div'); + // dragDiv.className = 'presItem-multiDrag'; + // 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'; + // dragItem.push(dragDiv); DragManager.StartDocumentDrag( dragItem.map(ele => ele), diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 661056553..66cc3a47a 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -17,9 +17,9 @@ export interface SchemaRowBoxProps extends FieldViewProps { columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; - selectedRows: ObservableSet<Doc>; - selectRow: (e: any, doc: Doc, index: number) => void; - startDrag: (e: any, doc: Doc) => boolean; + selectedRows: ObservableMap<Doc, HTMLDivElement>; + selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void; + startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean; dragging: boolean; dropIndex: (index: number) => void; } @@ -42,9 +42,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { setupMoveUpEvents( this, e, - e => this.props.startDrag(e, this.props.Document), + e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex), emptyFunction, - e => this.props.selectRow(e, this.props.Document, this.props.rowIndex) + e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex) ); }; @@ -96,7 +96,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { ref={(row: HTMLDivElement | null) => (this._ref = row)}> <div className="row-menu" style={{ width: this.props.rowMenuWidth }}> <div - className="row-button" + className="schema-row-button" onPointerDown={undoBatch(e => { e.stopPropagation(); this.props.removeDocument?.(this.props.Document); @@ -104,7 +104,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { <FontAwesomeIcon icon="times" /> </div> <div - className="row-button" + className="schema-row-button" onPointerDown={e => { e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right'); |