diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaCells.tsx | 54 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 66 |
2 files changed, 79 insertions, 41 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 30278db32..4231a3941 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -56,6 +56,7 @@ export interface CellProps { setPreviewDoc: (doc: Doc) => void; setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean; getField: (row: number, col?: number) => void; + showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void; } @observer @@ -398,16 +399,18 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } @action - showPreview = (bool: boolean) => { - console.log("show preview"); - this._preview = bool; - } - - getPreviewTransform = (): Transform => { - return this.prop.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + showPreview = (bool: boolean, e: any) => { + if (this._isEditing) { + this._preview = false; + } else { + if (bool) { + this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX, e.screenY); + } else { + this.props.showDoc(undefined); + } + } } - render() { const dragRef: React.RefObject<HTMLDivElement> = React.createRef(); @@ -418,38 +421,9 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return ( <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown} - onPointerEnter={() => { this.showPreview(true); }} - onPointerLeave={() => { this.showPreview(false); }}> - - {this._preview ? <div onClick={this.onOpenClick} style={{ - display: 'block', position: 'absolute', - top: '0', bottom: '0', left: '0', right: '0', zIndex: "auto" - }} - ref="overlay"><ContentFittingDocumentView - Document={this._doc} - DataDoc={this.prop.DataDoc} - NativeHeight={returnZero} - NativeWidth={returnZero} - fitToBox={true} - FreezeDimensions={true} - focus={emptyFunction} - LibraryPath={this.prop.LibraryPath} - renderDepth={this.props.renderDepth} - rootSelected={() => false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.prop.active} - whenActiveChanged={this.prop.whenActiveChanged} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> - </ContentFittingDocumentView></div> : null} + onPointerEnter={(e) => { this.showPreview(true, e); }} + onPointerLeave={(e) => { this.showPreview(false, e); }} + > <div className="collectionSchemaView-cellContents-document" style={{ padding: "5.9px" }} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 81dfc9c62..334897028 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -27,8 +27,9 @@ import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; -import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; +import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; +import ReactDOM from "react-dom"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -228,6 +229,14 @@ export interface SchemaTableProps { setPreviewDoc: (document: Doc) => void; } + + + + + + + + @observer export class SchemaTable extends React.Component<SchemaTableProps> { private DIVIDER_WIDTH = 4; @@ -237,6 +246,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; @observable _openCollections: Array<string> = []; + @observable _showDoc: Doc | undefined; + @observable _showDataDoc: any = ""; + @observable _showDocPos: number[] = []; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -349,6 +362,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { setPreviewDoc: this.props.setPreviewDoc, setComputed: this.setComputed, getField: this.getField, + showDoc: this.showDoc, }; const colType = this.getColumnType(col); @@ -756,8 +770,58 @@ export class SchemaTable extends React.Component<SchemaTableProps> { return false; } + + showDoc(doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) { + this._showDoc = doc; + if (dataDoc && screenX && screenY) { + this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); + } + } + + @action + onOpenClick = () => { + if (this._showDoc) { + this.props.addDocTab(this._showDoc, "onRight"); + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } + render() { + + const preview = ""; + return <div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + {this._showDoc ? <div onClick={() => { this.onOpenClick(); }} style={{ + position: "absolute", transform: `translate(${this._showDocPos[0]}, ${this._showDocPos[1]})` + }} + ref="overlay"><ContentFittingDocumentView + Document={this._showDoc} + DataDoc={this._showDataDoc} + NativeHeight={returnZero} + NativeWidth={returnZero} + fitToBox={true} + FreezeDimensions={true} + focus={emptyFunction} + LibraryPath={emptyPath} + renderDepth={this.props.renderDepth} + rootSelected={() => false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + </ContentFittingDocumentView></div> : null} {this.reactTable} <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div> </div>; |