diff options
17 files changed, 142 insertions, 175 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 3ecfc8ba3..e6e95e86c 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -83,6 +83,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & const isOpen = property.includes(':open'); const boxBackground = property.includes(':box'); const { + DocumentView: docView, fieldKey: fieldKeyProp, styleProvider, pointerEvents, @@ -91,18 +92,18 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & containerViewPath, childFilters, hideCaptions, - // eslint-disable-next-line camelcase - layout_showTitle, + showTitle, childFiltersByRanges, renderDepth, docViewPath, - DocumentView: docView, LayoutTemplateString, disableBrushing, NativeDimScaling, PanelWidth, PanelHeight, + isSelected, } = props || {}; // extract props that are not shared between fieldView and documentView props. + const componentView = docView?.()?.ComponentView; const fieldKey = fieldKeyProp ? fieldKeyProp + '_' : isCaption ? 'caption_' : ''; const isInk = () => layoutDoc?._layout_isSvg && !LayoutTemplateString; const lockedPosition = () => doc && BoolCast(doc._lockedPosition); @@ -149,7 +150,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & return undefined; case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return isAnnotated ? Colors.LIGHT_BLUE : 'dimgrey'; - case StyleProp.Opacity: return docView?.().ComponentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null)); + case StyleProp.Opacity: return componentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null)); case StyleProp.FontColor: return StrCast(doc?.[fieldKey + 'fontColor'], StrCast(Doc.UserDoc().fontColor, color())); case StyleProp.FontSize: return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(Doc.UserDoc().fontSize)); case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(Doc.UserDoc().fontFamily)); @@ -160,13 +161,13 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case StyleProp.ShowTitle: return ( (doc && - !docView?.().ComponentView?.isUnstyledView?.() && + !componentView?.isUnstyledView?.() && !LayoutTemplateString && !doc.presentation_targetDoc && - layout_showTitle?.() !== '' && + showTitle?.() !== '' && StrCast( doc._layout_showTitle, - layout_showTitle?.() || + showTitle?.() || (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any) ? doc.author === ClientUtils.CurrentUserEmail() ? StrCast(Doc.UserDoc().layout_showTitle) @@ -291,7 +292,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & } } case StyleProp.PointerEvents: - if (docView?.().ComponentView?.dontRegisterView?.()) return 'all'; + if (componentView?.dontRegisterView?.()) return 'all'; if (StrCast(doc?.pointerEvents)) return StrCast(doc!.pointerEvents); // honor pointerEvents field (set by lock button usually) if it's not a keyValue view of the Doc if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; if (pointerEvents?.() === 'none') return 'none'; @@ -307,7 +308,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & </div> ); const paint = () => !doc?.onPaint ? null : ( - <div className={`styleProvider-paint${docView?.().IsSelected ? "-selected":""}`} onClick={e => togglePaintView(e, doc, props)}> + <div className={`styleProvider-paint${isSelected?.() ? "-selected":""}`} onClick={e => togglePaintView(e, doc, props)}> <FontAwesomeIcon icon='pen' size="lg" /> </div> ); diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 7617f2a52..27c85533f 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -78,7 +78,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { // suppressSetHeight={true} NativeWidth={returnZero} NativeHeight={returnZero} - layout_fitWidth={undefined} + fitWidth={undefined} onDoubleClickScript={this.onChildDoubleClick} renderDepth={this._props.renderDepth + 1} LayoutTemplate={this._props.childLayoutTemplate} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 9d3657995..45b64d3e6 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -74,7 +74,7 @@ export class CollectionCarouselView extends CollectionSubView() { {...this._props} NativeWidth={returnZero} NativeHeight={returnZero} - layout_fitWidth={undefined} + fitWidth={undefined} setContentViewBox={undefined} onDoubleClickScript={this.onContentDoubleClick} onClickScript={this.onContentClick} diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 3f9eed1d6..53211be77 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -269,7 +269,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { PanelHeight={height} styleProvider={this.styleProvider} containerViewPath={this.childContainerViewPath} - layout_fitWidth={this._props.childLayoutFitWidth} + fitWidth={this._props.childLayoutFitWidth} isContentActive={emptyFunction} onKey={this.onKeyDown} // TODO: change this from a prop to a parameter passed into a function @@ -282,7 +282,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { dontCenter={this._props.childIgnoreNativeSize ? 'xy' : undefined} dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} rootSelected={this.rootSelected} - layout_showTitle={this._props.childlayout_showTitle} + showTitle={this._props.childlayout_showTitle} dragAction={StrCast(this.layoutDoc.childDragAction) as dropActionType} onClickScript={this.onChildClickHandler} onDoubleClickScript={this.onChildDoubleClickHandler} @@ -528,7 +528,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { }); refList = () => this._refList; - backgroundColor = () => this._props.DocumentView?.().backgroundColor(); + backgroundColor = () => this.DocumentView?.()?.backgroundColor(); // sectionNoteTaking returns a CollectionNoteTakingViewColumn (which is an individual column) sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => ( diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index f9b123bb6..1604920f6 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -855,7 +855,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch isDocumentActive={this._props.isDocumentActive} PanelWidth={width} PanelHeight={height} - layout_fitWidth={returnTrue} + fitWidth={returnTrue} ScreenToLocalTransform={screenXf} pinToPres={emptyFunction} focus={focusFunc} @@ -882,7 +882,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch return ( <div style={{ pointerEvents: this.noEvents ? 'none' : undefined }}> {inner.view} - {!inner.anchor.view || !inner.anchor.view.IsSelected ? null : ( + {!inner.anchor.view?.IsSelected ? null : ( <> <div key="left" className="collectionStackedTimeline-left-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, true)} /> <div key="right" className="collectionStackedTimeline-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, false)} /> diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 3f12a281e..07aa0f4f0 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -336,7 +336,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection pointerEvents={this.DocumentView?.()._props.onClickScript?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView) styleProvider={this.styleProvider} containerViewPath={this.childContainerViewPath} - layout_fitWidth={this.childFitWidth} + fitWidth={this.childFitWidth} isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive} onKey={this.onKeyDown} DataTransition={trans} @@ -348,7 +348,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as any)} dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to. rootSelected={this.rootSelected} - layout_showTitle={this._props.childlayout_showTitle} + showTitle={this._props.childlayout_showTitle} dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType} onClickScript={this.onChildClickHandler} onDoubleClickScript={this.onChildDoubleClickHandler} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 6ea6bbfbd..3a187171a 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -1015,7 +1015,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { } })} Document={this.Document} - layout_fitWidth={returnTrue} + fitWidth={returnTrue} scriptContext={this} hideDecorations hideClickBehaviors @@ -1122,7 +1122,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { this._dref = r; })} Document={this.Document} - layout_fitWidth={this.fitWidthFilter} + fitWidth={this.fitWidthFilter} PanelWidth={this.embeddedPanelWidth} PanelHeight={this.embeddedPanelHeight} LayoutTemplateString={asText ? FormattedTextBox.LayoutString('text') : undefined} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 21a069bd8..74de6524b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -183,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor); } @computed get fitWidth() { - return this._props.layout_fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth; + return this._props.fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth; } @computed get nativeDimScaling() { if (this._firstRender || (this._props.isAnnotationOverlay && !this._props.annotationLayerHostsContent)) return 1; @@ -1055,7 +1055,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection pinToPres={this._props.pinToPres} whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} - layout_showTitle={this._props.childlayout_showTitle} + showTitle={this._props.childlayout_showTitle} dontRegisterView={this._props.dontRegisterView} pointerEvents={this.childPointerEventsFunc} /> diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 27e1eabcf..4df647728 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-restricted-syntax */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Popup, PopupTrigger, Type } from 'browndash-components'; -import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; +import { ObservableMap, action, computed, makeObservable, observable, observe, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; @@ -10,9 +10,8 @@ import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } fro import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; -import { listSpec } from '../../../../fields/Schema'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; import { DocUtils } from '../../../documents/DocUtils'; import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; @@ -84,8 +83,8 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _selectedCol: number = 0; @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 + @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 @observable _draggedColIndex = 0; @observable _colBeingDragged = false; @@ -121,11 +120,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get columnKeys() { - return Cast(this.layoutDoc.schema_columnKeys, listSpec('string'), defaultColumnKeys); - } - - @computed get rowKeys() { - return Cast(this.layoutDoc.schema_rowKeys, listSpec('string'), []); + return StrListCast(this.layoutDoc.schema_columnKeys, defaultColumnKeys); } @computed get storedColumnWidths() { @@ -135,7 +130,7 @@ export class CollectionSchemaView extends CollectionSubView() { ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - //If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately + // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)); } @@ -143,8 +138,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get rowHeights() { - const heights = this.childDocs.map(() => this.rowHeightFunc()); - return heights; + return this.childDocs.map(() => this.rowHeightFunc()); } @computed get displayColumnWidths() { @@ -209,9 +203,7 @@ export class CollectionSchemaView extends CollectionSubView() { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { - const shift: boolean = e.shiftKey; - const ctrl: boolean = e.ctrlKey; - this.selectCell(newDoc, this._selectedCol, shift, ctrl); + this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey); this.scrollToDoc(newDoc, {}); } } @@ -230,9 +222,7 @@ export class CollectionSchemaView extends CollectionSubView() { DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { - const shift: boolean = e.shiftKey; - const ctrl: boolean = e.ctrlKey; - this.selectCell(newDoc, this._selectedCol, shift, ctrl); + this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey); this.scrollToDoc(newDoc, {}); } } @@ -284,7 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); } - const currKeys = [...this.columnKeys]; + const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it. currKeys[index] = newKey; this.layoutDoc.schema_columnKeys = new List<string>(currKeys); }; @@ -368,7 +358,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch moveColumn = (fromIndex: number, toIndex: number) => { if (this._selectedCol === fromIndex) this._selectedCol = toIndex; - else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent + else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; // keeps selected cell consistent const currKeys = this.columnKeys.slice(); currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]); @@ -393,9 +383,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; findColDropIndex = (mouseX: number) => { - let leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] - console.log(leftOffset) - console.log(CollectionSchemaView._rowMenuWidth) + const leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0]; + console.log(leftOffset); + console.log(CollectionSchemaView._rowMenuWidth); let index: number | undefined; this.displayColumnWidths.reduce((total, curr, i) => { if (total <= mouseX && total + curr >= mouseX) { @@ -403,7 +393,7 @@ export class CollectionSchemaView extends CollectionSubView() { else index = i + 1; } return total + curr; - }, leftOffset + CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!) + }, leftOffset + CollectionSchemaView._rowMenuWidth); // probably prone to issues; find better implementation (!!!) return index; }; @@ -415,11 +405,11 @@ export class CollectionSchemaView extends CollectionSubView() { */ @action setRelCursorIndex = (mouseY: number) => { - this._mouseCoordinates.y = mouseY; //updates this.rowDropIndex computed value to overwrite the old cached value + this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value - let rowHeight = CollectionSchemaView._rowHeight; - let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu - let yOffset = this._lowestSelectedIndex * rowHeight; + const rowHeight = CollectionSchemaView._rowHeight; + const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu + const yOffset = this._lowestSelectedIndex * rowHeight; const heights = this._selectedDocs.map(() => this.rowHeightFunc()); let index: number = 0; @@ -433,9 +423,8 @@ export class CollectionSchemaView extends CollectionSubView() { this._relCursorIndex = index; }; - //Uses current mouse position to calculate the indexes of actively dragged docs findRowDropIndex = (mouseY: number) => { - let rowHeight = CollectionSchemaView._rowHeight; + const rowHeight = CollectionSchemaView._rowHeight; let index: number = 0; this.rowHeights.reduce((total, curr, i) => { if (total <= mouseY && total + curr >= mouseY) { @@ -445,39 +434,31 @@ export class CollectionSchemaView extends CollectionSubView() { return total + curr; }, rowHeight); - //fix index if selected rows are dragged out of bounds + // fix index if selected rows are dragged out of bounds let adjIndex = index - this._relCursorIndex; - let maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight; + const maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight; if (mouseY > maxY) adjIndex = this.childDocs.length - 1; else if (adjIndex <= 0) adjIndex = 0; return adjIndex; }; - @action - highlightDraggedColumn = (index: number) => { + highlightDraggedColumn = (index: number) => this._colEles.forEach((colRef, i) => { - let edgeStyle = ''; - if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`; - - //border styles of menu cell - colRef.style.borderLeft = edgeStyle; - 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])) { - 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) { - this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle; - } - } - } + const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; + const cellEles = [ + colRef, + ...this.childDocs // + .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) + .map(doc => this._rowEles.get(doc).children[1].children[i]), + ]; + cellEles[0].style.borderTop = edgeStyle; + cellEles.forEach(ele => { + ele.style.borderLeft = edgeStyle; + ele.style.borderRight = edgeStyle; + }); + cellEles.slice(-1)[0].style.borderBottom = edgeStyle; }); - }; @action addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref); @@ -521,7 +502,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells && this._selectedCells.push(doc); - let index = this.rowIndex(doc); + const index = this.rowIndex(doc); if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); @@ -536,13 +517,13 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; - //let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc)); + // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc)); }; @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(d => this.rowIndex(d))); }; @action @@ -556,8 +537,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get rowDropIndex() { const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; - const index = this.findRowDropIndex(mouseY); - return index; + return this.findRowDropIndex(mouseY); } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { @@ -566,7 +546,7 @@ export class CollectionSchemaView extends CollectionSubView() { e.stopPropagation(); this._colEles.forEach((colRef, i) => { - //style for menu cell + // style for menu cell colRef.style.borderLeft = ''; colRef.style.borderRight = ''; colRef.style.borderTop = ''; @@ -584,7 +564,7 @@ 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)); + const map = draggedDocs?.map(doc => this.rowIndex(doc)); console.log(map); this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]); this.clearSelection(); @@ -592,16 +572,13 @@ export class CollectionSchemaView extends CollectionSubView() { DocumentView.addViewRenderedCb(doc, dv => dv.select(true)); console.log(doc.x); }); - this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc))); + this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? [])); return true; } return false; }; - onExternalDrop = async (e: React.DragEvent): Promise<void> => { - super.onExternalDrop(e, {}, undoBatch(action(docs => docs.map((doc: Doc) => this.addDocument(doc))))); - }; - + onExternalDrop = (e: React.DragEvent) => super.onExternalDrop(e, {}, docs => docs.map(doc => this.addDocument(doc))); onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction); @action @@ -697,9 +674,9 @@ export class CollectionSchemaView extends CollectionSubView() { case 'Enter': this._menuKeys.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuKeys[0]) - : action(() => { + : runInAction(() => { this._makeNewField = true; - })(); + }); break; case 'Escape': this.closeColumnMenu(); @@ -719,9 +696,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - const selectedDocs: Doc[] = new Array(); + const selectedDocs: Doc[] = []; this.childDocs.forEach(doc => { - let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); + const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); if (docIsSelected) { selectedDocs.push(doc); } @@ -736,7 +713,7 @@ 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); + const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); if (docIsSelected) { Doc.SetField(doc, key, value); } @@ -746,16 +723,16 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get activeMenuKeys() { - let activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key)); - return activeKeys + const activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key)); + return activeKeys; } - + childDocsInclude = (key: string) => { this.childDocs.forEach(doc => { - //TODO: if childdoc fieldkeys contain the key, return true - }) - return false - } + // TODO: if childdoc fieldkeys contain the key, return true + }); + return false; + }; @action openColumnMenu = (index: number, newCol: boolean) => { @@ -954,7 +931,10 @@ export class CollectionSchemaView extends CollectionSubView() { return ( <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}> <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> - <button className="schema-column-menu-toggle" onClick={() => null}></button> + { + // eslint-disable-next-line jsx-a11y/control-has-associated-label + <button type="button" className="schema-column-menu-toggle" /> + } {this._makeNewField ? this.newFieldMenu : this.keysDropdown} </div> ); @@ -981,17 +961,11 @@ export class CollectionSchemaView extends CollectionSubView() { } return ( <div key={key} className="schema-filter-option"> - <input + <input // type="checkbox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()} - onChange={action((e: any) => { - if (e.target.checked) { - Doc.setDocFilter(this.Document, columnKey, key, 'check'); - } else { - Doc.setDocFilter(this.Document, columnKey, key, 'remove'); - } - })} + onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')} checked={bool} /> <span style={{ paddingLeft: 4 }}>{key}</span> @@ -1024,9 +998,9 @@ export class CollectionSchemaView extends CollectionSubView() { this._mouseCoordinates = { x: e.clientX, y: e.clientY }; } 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; + const newIndex = this.findColDropIndex(e.clientX); + if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); + this._draggedColIndex = newIndex || this._draggedColIndex; this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } }; @@ -1063,7 +1037,7 @@ export class CollectionSchemaView extends CollectionSubView() { render() { return ( <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 ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} /> <div className="schema-table" style={{ width: `calc(100% - ${this.previewWidth}px)` }} @@ -1174,31 +1148,6 @@ export class CollectionSchemaView extends CollectionSubView() { } } -interface CollectionSchemaViewDocsProps { - schema: CollectionSchemaView; - setRef: (ref: HTMLDivElement | null) => void; - childDocs: () => { docs: Doc[] }; - rowHeight: () => number; -} - -@observer -class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> { - render() { - return ( - <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}> - {this.props.childDocs().docs.map((doc: Doc, index: number) => ( - <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}> - { - // eslint-disable-next-line no-use-before-define - <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} /> - } - </div> - ))} - </div> - ); - } -} - interface CollectionSchemaViewDocProps { schema: CollectionSchemaView; index: number; @@ -1252,8 +1201,29 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV hideTitle hideDocumentButtonBar hideLinkAnchors - layout_fitWidth={returnTrue} + fitWidth={returnTrue} /> ); } } +interface CollectionSchemaViewDocsProps { + schema: CollectionSchemaView; + setRef: (ref: HTMLDivElement | null) => void; + childDocs: () => { docs: Doc[] }; + rowHeight: () => number; +} + +@observer +class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> { + render() { + return ( + <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}> + {this.props.childDocs().docs.map((doc: Doc, index: number) => ( + <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}> + <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} /> + </div> + ))} + </div> + ); + } +} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 059aa912e..760089ffb 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -41,7 +41,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { } @computed get schemaDoc() { - return this.DocumentView?.().containerViewPath?.().lastElement()?.Document; + return this.schemaView.Document; } @computed get rowIndex() { @@ -104,12 +104,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { e, returnFalse, emptyFunction, - undoable(e => { - e.stopPropagation(); + undoable(clickEv => { + clickEv.stopPropagation(); Doc.toggleLockedPosition(this.Document); - }, 'Delete Row') //(??) should this be something else? + }, 'toggle document lock') ) - }></IconButton> + } + /> <IconButton tooltip="open preview" icon={<FaExternalLinkAlt />} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 48c86ac27..b017eb62b 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -82,7 +82,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro doc = DocCast(doc.proto); } const parenCount = Math.max(0, protoCount - 1); - const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; //color of text in cells + const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells const textDecoration = color !== 'black' && parenCount ? 'underline' : ''; const fieldProps: FieldViewProps = { childFilters: returnEmptyFilter, @@ -116,8 +116,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; - return isSelected; + return this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } @computed get defaultCellContent() { @@ -333,7 +332,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?.[0] === this._props.Document && selected[1] === this._props.col; + // return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } // if the text box blurs and none of its contents are focused(), then the edit finishes diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3191e04db..dc597e5ff 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -122,14 +122,14 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document animateScaleTime = () => this._animateScaleTime ?? 100; style = (doc: Doc, sprop: StyleProp | string) => this._props.styleProvider?.(doc, this._props, sprop); - @computed get layout_showTitle() { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore + @computed get showTitle() { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore @computed get opacity() { return this.style(this.layoutDoc, StyleProp.Opacity); } // prettier-ignore @computed get boxShadow() { return this.style(this.layoutDoc, StyleProp.BoxShadow); } // prettier-ignore @computed get borderRounding() { return this.style(this.layoutDoc, StyleProp.BorderRounding); } // prettier-ignore @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations); } // prettier-ignore @computed get backgroundBoxColor() { return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':box'); } // prettier-ignore @computed get headerMargin() { return this.style(this.layoutDoc, StyleProp.HeaderMargin) ?? 0; } // prettier-ignore - @computed get layout_showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0; } // prettier-ignore + @computed get showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0; } // prettier-ignore @computed get titleHeight() { return this.style(this.layoutDoc, StyleProp.TitleHeight) ?? 0; } // prettier-ignore @computed get docContents() { return this.style(this.Document, StyleProp.DocContents); } // prettier-ignore @computed get highlighting() { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore @@ -762,7 +762,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document selectFunc={action((field: string | number) => { if (this.layoutDoc.layout_showTitle) { this.layoutDoc._layout_showTitle = field; - } else if (!this._props.layout_showTitle) { + } else if (!this._props.showTitle) { Doc.UserDoc().layout_showTitle = field; } this._changingTitleField = false; @@ -776,8 +776,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document * setting layout_showTitle using the format: field1[:hover] * */ @computed get titleView() { - const showTitle = this.layout_showTitle?.split(':')[0]; - const showTitleHover = this.layout_showTitle?.includes(':hover'); + const showTitle = this.showTitle?.split(':')[0]; + const showTitleHover = this.showTitle?.includes(':hover'); const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.Document; const background = StrCast( @@ -835,7 +835,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if (input?.startsWith('$')) { if (this.layoutDoc.layout_showTitle) { this.layoutDoc._layout_showTitle = input?.substring(1) ? input.substring(1) : undefined; - } else if (!this._props.layout_showTitle) { + } else if (!this._props.showTitle) { Doc.UserDoc().layout_showTitle = input?.substring(1) ? input.substring(1) : 'title'; } } else if (showTitle && !showTitle.includes(';') && !showTitle.includes('Date') && showTitle !== 'author') { @@ -850,7 +850,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document } @computed get captionView() { - return !this.layout_showCaption ? null : ( + return !this.showCaption ? null : ( <div className="documentView-captionWrapper" style={{ @@ -862,7 +862,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document {...this._props} yPadding={10} xPadding={10} - fieldKey={this.layout_showCaption} + fieldKey={this.showCaption} styleProvider={this.captionStyleProvider} dontRegisterView rootSelected={this.rootSelected} @@ -877,7 +877,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document renderDoc = (style: object) => { TraceMobx(); - const showTitle = this.layout_showTitle?.split(':')[0]; + const showTitle = this.showTitle?.split(':')[0]; return !DocCast(this.Document) || GetEffectiveAcl(this.dataDoc) === AclPrivate ? null : this.docContents ?? ( @@ -895,7 +895,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined, transition: !this._animateScalingTo ? this._props.DataTransition?.() : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`, }}> - {this._props.hideTitle || (!showTitle && !this.layout_showCaption) ? ( + {this._props.hideTitle || (!showTitle && !this.showCaption) ? ( this.viewBoxContents ) : ( <div className="documentView-styleWrapper"> @@ -1124,7 +1124,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } @computed get layout_fitWidth() { - return this._props.layout_fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth; + return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth; } @computed get anchorViewDoc() { return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined; @@ -1319,8 +1319,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale; isSelected = () => this.IsSelected; select = (extendSelection: boolean, focusSelection?: boolean) => { - // if (this.IsSelected && DocumentView.Selected().length > 1) DocumentView.DeselectView(this); - // else { DocumentView.SelectView(this, extendSelection); if (focusSelection) { DocumentView.showDocument(this.Document, { @@ -1329,7 +1327,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { zoomTime: 500, }); } - //} }; backgroundColor = () => this._docViewInternal?.backgroundBoxColor; DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition); @@ -1415,7 +1412,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { NativeDimScaling={this.NativeDimScaling} isSelected={this.isSelected} select={this.select} - layout_fitWidth={this.layout_fitWidthFunc} + fitWidth={this.layout_fitWidthFunc} ScreenToLocalTransform={this.screenToContentsTransform} focus={this._props.focus || emptyFunction} ref={action((r: DocumentViewInternal | null) => { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 8a37000f7..66b134889 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -61,9 +61,9 @@ export interface FieldViewSharedProps { onPointerUpScript?: () => ScriptField; // eslint-disable-next-line no-use-before-define onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined; - layout_fitWidth?: (doc: Doc) => boolean | undefined; + fitWidth?: (doc: Doc) => boolean | undefined; searchFilterDocs: () => Doc[]; - layout_showTitle?: () => string; + showTitle?: () => string; whenChildContentsActiveChanged: (isActive: boolean) => void; rootSelected?: () => boolean; // whether the root of a template has been selected addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 3d10408d6..e4b3a1b9b 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -24,7 +24,7 @@ import { undoBatch } from '../../util/UndoManager'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; import { OverlayView } from '../OverlayView'; import { AnchorMenu } from '../pdf/AnchorMenu'; @@ -291,7 +291,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const ext = extname(url.href); return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext); }; - getScrollHeight = () => (this._props.layout_fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined); + getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined); @computed get nativeSize() { TraceMobx(); @@ -472,7 +472,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { height: this._props.PanelWidth() ? undefined : `100%`, pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined, borderRadius, - overflow: this.layoutDoc.layout_fitWidth || this._props.layout_fitWidth?.(this.Document) ? 'auto' : undefined, + overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : undefined, }}> <CollectionFreeFormView ref={this._ffref} diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 508008569..8f29600f6 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -291,7 +291,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps isDocumentActive={returnFalse} isContentActive={returnFalse} addDocument={returnFalse} - layout_showTitle={returnEmptyString} + showTitle={returnEmptyString} removeDocument={returnFalse} addDocTab={returnFalse} pinToPres={returnFalse} diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 1dc194c42..7a89b143b 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -328,8 +328,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; - const docView = this.DocumentView?.(); - if (this._initialScrollTarget && docView) { + if (this._initialScrollTarget) { this.focus(this._initialScrollTarget, { instant: true }); this._initialScrollTarget = undefined; } @@ -559,7 +558,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { removeDocument={this.removeDocument} /> ) : ( - <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => DocumentView.SelectView(this.DocumentView?.()!, false), true)}> + <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this._props.select(false), true)}> <ComponentTag // eslint-disable-next-line react/jsx-props-no-spreading {...this._props} diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index afd73cfe8..3b1815f8a 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -23,7 +23,7 @@ import { CollectionFreeFormView } from '../collections/collectionFreeForm/Collec import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { VideoThumbnails } from '../global/globalEnums'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; import { AnchorMenu } from '../pdf/AnchorMenu'; @@ -48,7 +48,7 @@ import './VideoBox.scss'; */ @observer -export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { +export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(VideoBox, fieldKey); } |