diff options
4 files changed, 62 insertions, 70 deletions
diff --git a/package-lock.json b/package-lock.json index cf8e8ce29..f372d011c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31609,7 +31609,8 @@ "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true }, "node_modules/textarea-caret": { "version": "3.1.0", diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 841222c96..2eda5062b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -3,13 +3,13 @@ import { Popup, PopupTrigger, Type } from 'browndash-components'; import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { StopEvent, emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; -import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; import { DocUtils, Docs, DocumentOptions, FInfo } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager, dropActionType } from '../../../util/DragManager'; @@ -28,8 +28,6 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; -import { TbEmphasis } from 'react-icons/tb'; -import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'; const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export enum ColumnType { @@ -90,7 +88,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; @observable _selectedCol: number = 0; - @observable _selectedCells: Array<Doc> = []; + @observable _selectedCells: Array<Doc> = []; @observable _mouseCoordinates = { x: 0, y: 0 }; @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position @observable _relCursorIndex = -1; //cursor index relative to the current selected cells @@ -106,7 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() { // get all selected documents then filter out any whose parent is not this schema document const selected = SelectionManager.Docs.filter(doc => this.childDocs.includes(doc)); // SelectionManager... filter(doc => this.childDocs.includes(doc)) - //DocCast(doc.embedContainer)[DocData] === this.dataDoc + //DocCast(doc.embedContainer)[DocData] === this.dataDoc //SelectionManager.Docs.forEach(doc => console.log("index: " + this.rowIndex(doc) + " equal: " + Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document))); if (!selected.length) { for (const sel of SelectionManager.Docs) { @@ -155,7 +153,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get rowHeights() { - const heights = this.childDocs.map(() => (this.rowHeightFunc())) + const heights = this.childDocs.map(() => this.rowHeightFunc()); return heights; } @@ -233,8 +231,8 @@ export class CollectionSchemaView extends CollectionSubView() { const curDoc = this.sortedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { const newDoc = this.sortedDocs.docs[firstIndex - 1]; - if (this._selectedDocs.includes(newDoc)){ - SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)) + if (this._selectedDocs.includes(newDoc)) { + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { const shift: boolean = e.shiftKey; @@ -273,9 +271,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - changeSelectedCellColumn = () => { - - } + changeSelectedCellColumn = () => {}; @undoBatch setColumnSort = (field: string | undefined, desc: boolean = false) => { @@ -400,7 +396,7 @@ export class CollectionSchemaView extends CollectionSubView() { // document.removeEventListener('pointermove', this.highlightDropColumn); // document.removeEventListener('pointerup', stopHighlight); // }; - // document.addEventListener('pointerup', stopHighlight); + // document.addEventListener('pointerup', stopHighlight); return true; }; @@ -431,7 +427,7 @@ export class CollectionSchemaView extends CollectionSubView() { let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu let yOffset = this._lowestSelectedIndex * rowHeight; - const heights = this._selectedDocs.map(() => (this.rowHeightFunc())) + const heights = this._selectedDocs.map(() => this.rowHeightFunc()); let index: number = 0; heights.reduce((total, curr, i) => { if (total <= adjInitMouseY && total + curr >= adjInitMouseY) { @@ -441,7 +437,7 @@ export class CollectionSchemaView extends CollectionSubView() { return total + curr; }, yOffset); this._relCursorIndex = index; - } + }; //Uses current mouse position to calculate the indexes of actively dragged docs findRowDropIndex = (mouseY: number) => { @@ -475,13 +471,13 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderRight = edgeStyle; colRef.style.borderTop = edgeStyle; - for (let doc = 0; doc < this.childDocs.length; ++doc){ - if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])){ + for (let doc = 0; doc < this.childDocs.length; ++doc) { + if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) { continue; } else { this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle; this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle; - if (doc === this.childDocs.length - 1){ + if (doc === this.childDocs.length - 1) { this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle; } } @@ -520,9 +516,9 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; - if (!this._selectedDocs.includes(currDoc)){ - this.selectCell(currDoc, this._selectedCol, false, true) - } + if (!this._selectedDocs.includes(currDoc)) { + this.selectCell(currDoc, this._selectedCol, false, true); + } } }; @@ -537,12 +533,11 @@ export class CollectionSchemaView extends CollectionSubView() { const lastSelected = Array.from(this._selectedDocs).lastElement(); if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected); else if (ctrlKey) { - if (lastSelected && this._selectedDocs.includes(doc)){ - SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)) + if (lastSelected && this._selectedDocs.includes(doc)) { + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)); this.deselectCell(doc); } else this.addDocToSelection(doc, true, index); - } - else this.addDocToSelection(doc, false, index); + } else this.addDocToSelection(doc, false, index); this._selectedCol = col; if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; @@ -553,22 +548,22 @@ export class CollectionSchemaView extends CollectionSubView() { @action deselectCell = (doc: Doc) => { this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); - if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))) + if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))); }; @action deselectAllCells = () => { this._selectedCells = []; this._lowestSelectedIndex = -1; - } + }; sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); @computed - get rowDropIndex(){ + get rowDropIndex() { const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; const index = this.findRowDropIndex(mouseY); - return index + return index; } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { @@ -583,7 +578,7 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderTop = ''; this.childDocs.forEach(doc => { - if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)){ + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) { this._rowEles.get(doc).children[1].children[i].style.borderLeft = ''; this._rowEles.get(doc).children[1].children[i].style.borderRight = ''; this._rowEles.get(doc).children[1].children[i].style.borderBottom = ''; @@ -595,8 +590,8 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - let map = draggedDocs?.map(doc => this.rowIndex(doc)) - console.log(map) + let map = draggedDocs?.map(doc => this.rowIndex(doc)); + console.log(map); this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]); this.clearSelection(); draggedDocs.forEach(doc => { @@ -690,15 +685,14 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - const selectedDocs: Doc[] = new Array; + const selectedDocs: Doc[] = new Array(); this.childDocs.forEach(doc => { let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); - if (docIsSelected){ + if (docIsSelected) { selectedDocs.push(doc); - } } - ); - if (selectedDocs.length === 1){ + }); + if (selectedDocs.length === 1) { this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); } else { selectedDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); @@ -709,11 +703,10 @@ export class CollectionSchemaView extends CollectionSubView() { setSelectedColumnValues = (key: string, value: string) => { this.childDocs.forEach(doc => { let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); - if (docIsSelected){ - KeyValueBox.SetField(doc, key, value) - } + if (docIsSelected) { + KeyValueBox.SetField(doc, key, value); } - ); + }); return true; }; @@ -973,24 +966,25 @@ export class CollectionSchemaView extends CollectionSubView() { @action onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => { - if (DragManager.docsBeingDragged.length){ + if (DragManager.docsBeingDragged.length) { this._mouseCoordinates = { x: e.clientX, y: e.clientY }; } - if (this._colBeingDragged){ + if (this._colBeingDragged) { let newIndex = this.findColDropIndex(e.clientX); if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex; - this.highlightDraggedColumn(newIndex ?? this._draggedColIndex) + this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } - } + }; @computed get sortedDocs() { const field = StrCast(this.layoutDoc.sortField); - const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort + const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort const staticDocs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d)); const docs = !field ? staticDocs - : [...staticDocs].sort((docA, docB) => { // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b + : [...staticDocs].sort((docA, docB) => { + // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b const aStr = Field.toString(docA[field] as Field); const bStr = Field.toString(docB[field] as Field); var out = 0; @@ -1000,7 +994,7 @@ export class CollectionSchemaView extends CollectionSubView() { return out; }); - docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged) + docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged); return { docs }; } @@ -1013,10 +1007,7 @@ export class CollectionSchemaView extends CollectionSubView() { _oldWheel: any; render() { return ( - <div className="collectionSchemaView" - ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} - onDrop={this.onExternalDrop.bind(this)} - onPointerMove={(e) => this.onPointerMove(e)}> + <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}> <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div> <div className="schema-table" @@ -1155,6 +1146,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV if (property === StyleProp.Opacity) return 1; return DefaultStyleProvider(doc, props, property); }; + isRowContentActive = () => this._props.schema.isContentActive() || this._props.schema._props.isSelected() || this._props.schema._props.isAnyChildContentActive(); render() { return ( <DocumentView @@ -1180,7 +1172,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV ScreenToLocalTransform={this.screenToLocalXf} dragWhenActive={true} isDocumentActive={this._props.schema._props.childDocumentsActive?.() ? this._props.schema._props.isDocumentActive : this._props.schema.isContentActive} - isContentActive={emptyFunction} + isContentActive={this.isRowContentActive} whenChildContentsActiveChanged={this._props.schema._props.whenChildContentsActiveChanged} hideDecorations={true} hideTitle={true} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 7e40ef766..f5618db96 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -5,11 +5,9 @@ import { computedFn } from 'mobx-utils'; import * as React from 'react'; import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg'; import { FaExternalLinkAlt } from 'react-icons/fa'; -import { StopEvent, emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils'; +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'; @@ -66,7 +64,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { return ( <div className="schema-row" - onPointerDown={(e) => this.setCursorIndex(e.clientY)} + onPointerDown={e => this.setCursorIndex(e.clientY)} style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} ref={(row: HTMLDivElement | null) => { row && this.schemaView?.addRowRef?.(this.Document, row); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 6bbc4dfa6..f6f3a24a9 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; -import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils'; +import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -17,6 +17,7 @@ import { FInfo, FInfoFieldType } from '../../../documents/Documents'; import { DocFocusOrOpen } from '../../../util/DocumentManager'; import { dropActionType } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch, undoable } from '../../../util/UndoManager'; import { EditableView } from '../../EditableView'; @@ -29,7 +30,6 @@ import { KeyValueBox } from '../../nodes/KeyValueBox'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { ColumnType, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; -import { SnappingManager } from '../../../util/SnappingManager'; export interface SchemaTableCellProps { Document: Doc; @@ -110,7 +110,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro @computed get selected() { const selectedDocs: Doc[] | undefined = this._props.selectedCells(); - let isSelected = this._props.isRowActive() && (selectedDocs?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + let isSelected = this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; return isSelected; } @@ -178,7 +178,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } } - render() { return ( <div @@ -187,11 +186,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro onPointerDown={action(e => { const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; - if (this.selected && ctrl) { - this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); - e.stopPropagation(); - } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl)} - )} + if (this._props.isRowActive?.() !== false) { + if (this.selected && ctrl) { + this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + e.stopPropagation(); + } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + } + })} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} </div> @@ -324,7 +325,7 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps @computed get selected() { const selected = this._props.selectedCells(); - return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } selectedFunc = () => this.selected; @@ -347,7 +348,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp @computed get selected() { const selected = this._props.selectedCells(); - return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); @@ -392,7 +393,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC @computed get selected() { const selected = this._props.selectedCells(); - return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); |