changed to previews

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>;