diff options
Diffstat (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx')
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 82 |
1 files changed, 20 insertions, 62 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 39fea2d2e..f5618db96 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -8,8 +8,6 @@ import { FaExternalLinkAlt } from 'react-icons/fa'; import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; import { BoolCast } from '../../../../fields/Types'; -import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoable } from '../../../util/UndoManager'; import { ViewBoxBaseComponent } from '../../DocComponent'; @@ -53,63 +51,21 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { this._props.setContentViewBox?.(this); } - select = (ctrlKey: boolean, shiftKey: boolean) => { - if (!this.schemaView) return; - const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); - if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected); - else { - this._props.select?.(ctrlKey); - } - }; - - onPointerEnter = (e: any) => { - if (SnappingManager.IsDragging && this._props.isContentActive()) { - document.removeEventListener('pointermove', this.onPointerMove); - document.addEventListener('pointermove', this.onPointerMove); - } - }; - - onPointerMove = (e: any) => { - const dragIsRow = DragManager.docsBeingDragged.some(doc => doc.embedContainer === this.schemaDoc); // this.schemaView?._selectedDocs.has(doc) ?? false; - - 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'; - this.schemaView?.setDropIndex(this.rowIndex); - } else if (y > halfLine) { - this._ref.style.borderTop = '0px'; - this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; - this.schemaView?.setDropIndex(this.rowIndex + 1); - } - } - }; - - onPointerLeave = (e: any) => { - if (this._ref) { - this._ref.style.borderTop = '0px'; - this._ref.style.borderBottom = '0px'; - } - document.removeEventListener('pointermove', this.onPointerMove); - }; - + setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); + selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); - selectCell = (doc: Doc, col: number) => this.schemaView?.selectCell(doc, col); - deselectCell = () => this.schemaView?.deselectCell(); - selectedCell = () => this.schemaView?._selectedCell; + selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); + deselectCell = () => this.schemaView?.deselectAllCells(); + selectedCells = () => this.schemaView?._selectedDocs; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; + setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); render() { return ( <div className="schema-row" + onPointerDown={e => this.setCursorIndex(e.clientY)} style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} - onPointerEnter={this.onPointerEnter} - onPointerLeave={this.onPointerLeave} ref={(row: HTMLDivElement | null) => { row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; @@ -121,8 +77,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { pointerEvents: !this._props.isContentActive() ? 'none' : undefined, }}> <IconButton - tooltip="whether document interactions are enabled" - icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />} + tooltip="close" + icon={<CgClose size={'16px'} />} size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -132,13 +88,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { emptyFunction, undoable(e => { e.stopPropagation(); - Doc.toggleLockedPosition(this.Document); + this._props.removeDocument?.(this.Document); }, 'Delete Row') ) - }></IconButton> + } + /> <IconButton - tooltip="close" - icon={<CgClose size={'16px'} />} + tooltip="whether document interactions are enabled" + icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />} size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -148,11 +105,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { emptyFunction, undoable(e => { e.stopPropagation(); - this._props.removeDocument?.(this.Document); - }, 'Delete Row') + Doc.toggleLockedPosition(this.Document); + }, 'Delete Row') //(??) should this be something else? ) - } - /> + }></IconButton> <IconButton tooltip="open preview" icon={<FaExternalLinkAlt />} @@ -185,8 +141,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { getFinfo={this.getFinfo} selectCell={this.selectCell} deselectCell={this.deselectCell} - selectedCell={this.selectedCell} + selectedCells={this.selectedCells} + selectedCol={this.selectedCol} setColumnValues={this.setColumnValues} + setSelectedColumnValues={this.setSelectedColumnValues} oneLine={BoolCast(this.schemaDoc?._singleLine)} menuTarget={this.schemaView.MenuTarget} transform={() => { |