From 65d9b92bcadbecb6e7dd55930f96f228c6a2f4f7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 17:12:28 -0400
Subject: simpliified presentations to be a PresBox with PresElementBoxes.

---
 .../views/presentationview/PresElementBox.tsx      | 329 +++++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 src/client/views/presentationview/PresElementBox.tsx

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
new file mode 100644
index 000000000..fe2aea27b
--- /dev/null
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -0,0 +1,329 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
+import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Doc } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types";
+import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils";
+import { DocumentType } from "../../documents/DocumentTypes";
+import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
+import { DocumentView } from "../nodes/DocumentView";
+import React = require("react");
+import "./PresElementBox.scss";
+import { FieldViewProps, FieldView } from '../nodes/FieldView';
+
+
+library.add(faArrowUp);
+library.add(fileSolid);
+library.add(faLocationArrow);
+library.add(fileRegular as any);
+library.add(faSearch);
+library.add(faArrowDown);
+
+interface PresElementProps {
+    presentationDoc: Doc;
+    index: number;
+    gotoDocument(index: number, fromDoc: number): Promise<void>;
+}
+
+/**
+ * This class models the view a document added to presentation will have in the presentation.
+ * It involves some functionality for its buttons and options.
+ */
+@observer
+export class PresElementBox extends React.Component<PresElementProps & FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
+    private header?: HTMLDivElement | undefined;
+    private listdropDisposer?: DragManager.DragDropDisposer;
+    private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    @computed get currentIndex() { return NumCast(this.props.presentationDoc.selectedDoc); }
+    @computed get showButton() { return BoolCast(this.props.Document.showButton); }
+    @computed get navButton() { return BoolCast(this.props.Document.navButton); }
+    @computed get hideTillShownButton() { return BoolCast(this.props.Document.hideTillShownButton); }
+    @computed get fadeButton() { return BoolCast(this.props.Document.fadeButton); }
+    @computed get hideAfterButton() { return BoolCast(this.props.Document.hideAfterButton); }
+    @computed get groupButton() { return BoolCast(this.props.Document.groupButton); }
+    @computed get embedInline() { return BoolCast(this.props.Document.embedOpen); }
+
+    set embedInline(value: boolean) { this.props.Document.embedOpen = value; }
+    set showButton(val: boolean) { this.props.Document.showButton = val; }
+    set navButton(val: boolean) { this.props.Document.navButton = val; }
+    set hideTillShownButton(val: boolean) { this.props.Document.hideTillShownButton = val; }
+    set fadeButton(val: boolean) { this.props.Document.fadeButton = val; }
+    set hideAfterButton(val: boolean) { this.props.Document.hideAfterButton = val; }
+    set groupButton(val: boolean) { this.props.Document.groupButton = val; }
+
+    //Lifecycle function that makes sure that button BackUp is received when mounted.
+    componentDidMount() {
+        if (this.presElRef.current) {
+            this.header = this.presElRef.current;
+            this.createListDropTarget(this.presElRef.current);
+        }
+    }
+
+    componentWillUnmount() {
+        this.listdropDisposer && this.listdropDisposer();
+    }
+    /**
+     * The function that is called on click to turn Hiding document till press option on/off.
+     * It also sets the beginning and end opacitys.
+     */
+    @action
+    onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.hideTillShownButton = !this.hideTillShownButton;
+        if (!this.hideTillShownButton) {
+            if (this.props.index >= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index > this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn Hiding document after presented option on/off.
+     * It also makes sure that the option swithches from fade-after to this one, since both
+     * can't coexist.
+     */
+    @action
+    onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.hideAfterButton = !this.hideAfterButton;
+        if (!this.hideAfterButton) {
+            if (this.props.index <= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            if (this.fadeButton) this.fadeButton = false;
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index < this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn fading document after presented option on/off.
+     * It also makes sure that the option swithches from hide-after to this one, since both
+     * can't coexist.
+     */
+    @action
+    onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.fadeButton = !this.fadeButton;
+        if (!this.fadeButton) {
+            if (this.props.index <= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            this.hideAfterButton = false;
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index < this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0.5;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn navigation option of docs on/off.
+     */
+    @action
+    onNavigateDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.navButton = !this.navButton;
+        if (this.navButton) {
+            this.showButton = false;
+            if (this.currentIndex === this.props.index) {
+                this.props.gotoDocument(this.props.index, this.props.index);
+            }
+        }
+    }
+
+    /**
+    * The function that is called on click to turn zoom option of docs on/off.
+    */
+    @action
+    onZoomDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+
+        this.showButton = !this.showButton;
+        if (!this.showButton) {
+            this.props.Document.viewScale = 1;
+        } else {
+            this.navButton = false;
+            if (this.currentIndex === this.props.index) {
+                this.props.gotoDocument(this.props.index, this.props.index);
+            }
+        }
+    }
+
+    /**
+     * Creating a drop target for drag and drop when called.
+     */
+    protected createListDropTarget = (ele: HTMLDivElement) => {
+        this.listdropDisposer && this.listdropDisposer();
+        ele && (this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }));
+    }
+
+    /**
+     * Returns a local transformed coordinate array for given coordinates.
+     */
+    ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
+
+    /**
+     * This method is called when a element is dropped on a already esstablished target.
+     * It makes sure to do appropirate action depending on if the item is dropped before
+     * or after the target.
+     */
+    listDrop = async (e: Event, de: DragManager.DropEvent) => {
+        let x = this.ScreenToLocalListTransform(de.x, de.y);
+        let rect = this.header!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        let before = x[1] < bounds[1];
+        if (de.data instanceof DragManager.DocumentDragData) {
+            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", doc, this.props.Document, before);
+            e.stopPropagation();
+            //where does treeViewId come from
+            let movedDocs = (de.data.options === this.props.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            //console.log("How is this causing an issue");
+            document.removeEventListener("pointermove", this.onDragMove, true);
+            return (de.data.dropAction || de.data.userDropAction) ?
+                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before) || added, false)
+                : (de.data.moveDocument) ?
+                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.Document, addDoc) || added, false)
+                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before), false);
+        }
+        document.removeEventListener("pointermove", this.onDragMove, true);
+
+        return false;
+    }
+
+    //This is used to add dragging as an event.
+    onPointerEnter = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
+            this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? "presElementBox-selected" : "");
+
+            document.addEventListener("pointermove", this.onDragMove, true);
+        }
+    }
+
+    //This is used to remove the dragging when dropped.
+    onPointerLeave = (e: React.PointerEvent): void => {
+        this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? " presElementBox-selected" : "");
+
+        document.removeEventListener("pointermove", this.onDragMove, true);
+    }
+
+    /**
+     * This method is passed in to be used when dragging a document.
+     * It makes it possible to show dropping lines on drop targets.
+     */
+    onDragMove = (e: PointerEvent): void => {
+        Doc.UnBrushDoc(this.props.Document);
+        let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
+        let rect = this.header!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        this.header!.className = "presElementBox-item presElementBox-item-" + (x[1] < bounds[1] ? "above" : "below");
+        e.stopPropagation();
+    }
+
+    /**
+     * This method is passed in to on down event of presElement, so that drag and
+     * drop can be completed with DragManager functionality.
+     */
+    @action
+    move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
+        return this.props.Document !== target && (this.props.removeDocument ? this.props.removeDocument(doc) : false) && addDoc(doc);
+    }
+
+    /**
+     * The function that is responsible for rendering the a preview or not for this
+     * presentation element.
+     */
+    renderEmbeddedInline = () => {
+        if (!this.embedInline || !(this.props.Document.target instanceof Doc)) {
+            return (null);
+        }
+
+        let propDocWidth = NumCast(this.props.Document.nativeWidth);
+        let propDocHeight = NumCast(this.props.Document.nativeHeight);
+        let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175);
+        return (
+            <div className="presElementBox-embedded" style={{
+                height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
+                width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
+            }}>
+                <DocumentView
+                    fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1}
+                    Document={this.props.Document.target as Doc}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    ruleProvider={undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                    addDocTab={returnFalse}
+                    pinToPres={returnFalse}
+                    renderDepth={1}
+                    PanelWidth={() => 350}
+                    PanelHeight={() => 90}
+                    focus={emptyFunction}
+                    backgroundColor={returnEmptyString}
+                    parentActive={returnFalse}
+                    whenActiveChanged={returnFalse}
+                    bringToFront={emptyFunction}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                    ContentScaling={scale}
+                />
+                <div className="presElementBox-embeddedMask" />
+            </div>
+        );
+    }
+
+    render() {
+        let p = this.props;
+
+        let className = "presElementBox-item" + (this.currentIndex === p.index ? " presElementBox-selected" : "");
+        let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
+        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.props.presentationDoc[Id], true);
+        return (
+            <div className={className} key={p.Document[Id] + p.index}
+                ref={this.presElRef}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
+                onPointerDown={onItemDown}
+                style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
+                onClick={e => p.gotoDocument(p.index, this.currentIndex)}>
+                <strong className="presElementBox-name">
+                    {`${p.index + 1}. ${p.Document.title}`}
+                </strong>
+                <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
+                <br />
+                <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.groupButton = !this.groupButton)}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.embedInline = !this.embedInline)}><FontAwesomeIcon icon={"arrow-down"} /></button>
+
+                <br />
+                {this.renderEmbeddedInline()}
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 3a2ac5286e556be726440547309937945f650393 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 17:42:00 -0400
Subject: minor presentation fixes

---
 src/client/views/nodes/PresBox.tsx                 | 25 ++++-----
 .../views/presentationview/PresElementBox.tsx      | 60 +++++++++++-----------
 2 files changed, 44 insertions(+), 41 deletions(-)

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 526416e57..d3a24eb7a 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -37,7 +37,7 @@ export class PresBox extends React.Component<FieldViewProps> {
         //asking to get document at current index
         let docAtCurrentNext = await this.getDocAtIndex(current + 1);
         if (docAtCurrentNext !== undefined) {
-            let presDocs = DocListCast(this.props.Document.data);
+            let presDocs = DocListCast(this.props.Document[this.props.fieldKey]);
             let nextSelected = current + 1;
 
             for (; nextSelected < presDocs.length - 1; nextSelected++) {
@@ -210,7 +210,7 @@ export class PresBox extends React.Component<FieldViewProps> {
 
     @undoBatch
     public removeDocument = (doc: Doc) => {
-        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)));
         if (value) {
             let indexOfDoc = value.indexOf(doc);
             if (indexOfDoc !== - 1) {
@@ -296,14 +296,14 @@ export class PresBox extends React.Component<FieldViewProps> {
     toggleMinimize = undoBatch(action((e: React.PointerEvent) => {
         if (this.props.Document.minimizedView) {
             this.props.Document.minimizedView = false;
-            Doc.RemoveDocFromList((CurrentUserUtils.UserDocument.overlays as Doc), "data", this.props.Document);
+            Doc.RemoveDocFromList((CurrentUserUtils.UserDocument.overlays as Doc), this.props.fieldKey, this.props.Document);
             CollectionDockingView.AddRightSplit(this.props.Document, this.props.DataDoc);
         } else {
             this.props.Document.minimizedView = true;
             this.props.Document.x = e.clientX + 25;
             this.props.Document.y = e.clientY - 25;
             this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close");
-            Doc.AddDocToList((CurrentUserUtils.UserDocument.overlays as Doc), "data", this.props.Document);
+            Doc.AddDocToList((CurrentUserUtils.UserDocument.overlays as Doc), this.props.fieldKey, this.props.Document);
         }
     }));
 
@@ -325,6 +325,11 @@ export class PresBox extends React.Component<FieldViewProps> {
         });
     }
 
+    selectElement = (doc: Doc) => {
+        let index = DocListCast(this.props.Document[this.props.fieldKey]).indexOf(doc);
+        index !== -1 && this.gotoDocument(index, NumCast(this.props.Document.selectedDoc));
+    }
+
     render() {
         this.initializeScaleViews(this.childDocs);
         return (
@@ -339,15 +344,11 @@ export class PresBox extends React.Component<FieldViewProps> {
                 </div>
                 {this.props.Document.minimizedView ? (null) :
                     <div className="presBox-listCont" >
-                        {this.childDocs.map((doc, index) =>
-                            <PresElementBox
-                                {... this.props}
-                                key={doc[Id]}
-                                index={index}
-                                presentationDoc={this.props.Document}
-                                Document={doc}
-                                gotoDocument={this.gotoDocument}
+                        {this.childDocs.map(doc =>
+                            <PresElementBox key={doc[Id]}  {... this.props} Document={doc}
                                 removeDocument={this.removeDocument}
+                                focus={this.selectElement}
+                                presBox={this}
                             />
                         )}
                     </div>}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index fe2aea27b..1b4c841e7 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -4,7 +4,7 @@ import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocation
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types";
 import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils";
@@ -16,6 +16,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import React = require("react");
 import "./PresElementBox.scss";
 import { FieldViewProps, FieldView } from '../nodes/FieldView';
+import { PresBox } from '../nodes/PresBox';
 
 
 library.add(faArrowUp);
@@ -26,9 +27,7 @@ library.add(faSearch);
 library.add(faArrowDown);
 
 interface PresElementProps {
-    presentationDoc: Doc;
-    index: number;
-    gotoDocument(index: number, fromDoc: number): Promise<void>;
+    presBox: PresBox;
 }
 
 /**
@@ -43,7 +42,10 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
     private listdropDisposer?: DragManager.DragDropDisposer;
     private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    @computed get currentIndex() { return NumCast(this.props.presentationDoc.selectedDoc); }
+    @computed get myIndex() { return DocListCast(this.props.presBox.props.Document[this.props.presBox.props.fieldKey]).indexOf(this.props.Document) }
+    @computed get presentationDoc() { return this.props.presBox.props.Document; }
+    @computed get presentationFieldKey() { return this.props.presBox.props.fieldKey; }
+    @computed get currentIndex() { return NumCast(this.presentationDoc.selectedDoc); }
     @computed get showButton() { return BoolCast(this.props.Document.showButton); }
     @computed get navButton() { return BoolCast(this.props.Document.navButton); }
     @computed get hideTillShownButton() { return BoolCast(this.props.Document.hideTillShownButton); }
@@ -80,12 +82,12 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         e.stopPropagation();
         this.hideTillShownButton = !this.hideTillShownButton;
         if (!this.hideTillShownButton) {
-            if (this.props.index >= this.currentIndex) {
+            if (this.myIndex >= this.currentIndex) {
                 (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
-            if (this.props.presentationDoc.presStatus) {
-                if (this.props.index > this.currentIndex) {
+            if (this.presentationDoc.presStatus) {
+                if (this.myIndex > this.currentIndex) {
                     (this.props.Document.target as Doc).opacity = 0;
                 }
             }
@@ -102,13 +104,13 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         e.stopPropagation();
         this.hideAfterButton = !this.hideAfterButton;
         if (!this.hideAfterButton) {
-            if (this.props.index <= this.currentIndex) {
+            if (this.myIndex <= this.currentIndex) {
                 (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
             if (this.fadeButton) this.fadeButton = false;
-            if (this.props.presentationDoc.presStatus) {
-                if (this.props.index < this.currentIndex) {
+            if (this.presentationDoc.presStatus) {
+                if (this.myIndex < this.currentIndex) {
                     (this.props.Document.target as Doc).opacity = 0;
                 }
             }
@@ -125,13 +127,13 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         e.stopPropagation();
         this.fadeButton = !this.fadeButton;
         if (!this.fadeButton) {
-            if (this.props.index <= this.currentIndex) {
+            if (this.myIndex <= this.currentIndex) {
                 (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
             this.hideAfterButton = false;
-            if (this.props.presentationDoc.presStatus) {
-                if (this.props.index < this.currentIndex) {
+            if (this.presentationDoc.presStatus) {
+                if (this.myIndex < this.currentIndex) {
                     (this.props.Document.target as Doc).opacity = 0.5;
                 }
             }
@@ -147,8 +149,8 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         this.navButton = !this.navButton;
         if (this.navButton) {
             this.showButton = false;
-            if (this.currentIndex === this.props.index) {
-                this.props.gotoDocument(this.props.index, this.props.index);
+            if (this.currentIndex === this.myIndex) {
+                this.props.focus(this.props.Document);
             }
         }
     }
@@ -165,8 +167,8 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
             this.props.Document.viewScale = 1;
         } else {
             this.navButton = false;
-            if (this.currentIndex === this.props.index) {
-                this.props.gotoDocument(this.props.index, this.props.index);
+            if (this.currentIndex === this.myIndex) {
+                this.props.focus(this.props.Document);
             }
         }
     }
@@ -195,17 +197,17 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
         let before = x[1] < bounds[1];
         if (de.data instanceof DragManager.DocumentDragData) {
-            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", doc, this.props.Document, before);
+            let addDoc = (doc: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, doc, this.props.Document, before);
             e.stopPropagation();
             //where does treeViewId come from
-            let movedDocs = (de.data.options === this.props.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            let movedDocs = (de.data.options === this.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
             document.removeEventListener("pointermove", this.onDragMove, true);
             return (de.data.dropAction || de.data.userDropAction) ?
-                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before) || added, false)
+                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, d, this.props.Document, before) || added, false)
                 : (de.data.moveDocument) ?
                     movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.Document, addDoc) || added, false)
-                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before), false);
+                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, d, this.props.Document, before), false);
         }
         document.removeEventListener("pointermove", this.onDragMove, true);
 
@@ -215,7 +217,7 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
     //This is used to add dragging as an event.
     onPointerEnter = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-            this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? "presElementBox-selected" : "");
+            this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? "presElementBox-selected" : "");
 
             document.addEventListener("pointermove", this.onDragMove, true);
         }
@@ -223,7 +225,7 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
 
     //This is used to remove the dragging when dropped.
     onPointerLeave = (e: React.PointerEvent): void => {
-        this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? " presElementBox-selected" : "");
+        this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
 
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
@@ -298,18 +300,18 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
     render() {
         let p = this.props;
 
-        let className = "presElementBox-item" + (this.currentIndex === p.index ? " presElementBox-selected" : "");
+        let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
         let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
-        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.props.presentationDoc[Id], true);
+        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.presentationDoc[Id], true);
         return (
-            <div className={className} key={p.Document[Id] + p.index}
+            <div className={className} key={p.Document[Id] + this.myIndex}
                 ref={this.presElRef}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
                 onPointerDown={onItemDown}
                 style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
-                onClick={e => p.gotoDocument(p.index, this.currentIndex)}>
+                onClick={e => p.focus(p.Document)}>
                 <strong className="presElementBox-name">
-                    {`${p.index + 1}. ${p.Document.title}`}
+                    {`${this.myIndex + 1}. ${p.Document.title}`}
                 </strong>
                 <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
                 <br />
-- 
cgit v1.2.3-70-g09d2


From 8790670f8e2173dd2a578500b3f03ad08ef793f2 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 20:56:10 -0400
Subject: switching presentatons to be colllections

---
 .../views/collections/CollectionSchemaView.tsx     |  9 ++-
 .../views/collections/CollectionStackingView.scss  |  2 +-
 .../views/collections/CollectionStackingView.tsx   |  4 +-
 .../views/collections/CollectionTreeView.scss      |  4 +-
 .../views/collections/CollectionTreeView.tsx       | 18 +++---
 src/client/views/collections/CollectionView.tsx    |  8 +--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 20 +-----
 src/client/views/nodes/PresBox.scss                |  4 +-
 src/client/views/nodes/PresBox.tsx                 | 73 ++++++++++++++--------
 .../views/presentationview/PresElementBox.scss     |  1 +
 .../views/presentationview/PresElementBox.tsx      | 46 +++++++-------
 11 files changed, 101 insertions(+), 88 deletions(-)

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 8d931f812..77d86b2fa 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -166,6 +166,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 width={this.previewWidth}
                 height={this.previewHeight}
                 getTransform={this.getPreviewTransform}
+                CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document}
                 CollectionView={this.props.CollectionView}
                 moveDocument={this.props.moveDocument}
                 addDocument={this.props.addDocument}
@@ -906,8 +907,10 @@ interface CollectionSchemaPreviewProps {
     width: () => number;
     height: () => number;
     ruleProvider: Doc | undefined;
+    focus?: (doc: Doc) => void;
     showOverlays?: (doc: Doc) => { title?: string, caption?: string };
     CollectionView?: CollectionView | CollectionPDFView | CollectionVideoView;
+    CollectionDoc?: Doc;
     onClick?: ScriptField;
     getTransform: () => Transform;
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -994,7 +997,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
                         height: this.props.height(),
                         width: this.props.width()
                     }}>
-                    <DocumentView
+                    <DocumentView {...this.props}
                         DataDoc={this.props.DataDocument}
                         Document={this.props.Document}
                         fitToBox={this.props.fitToBox}
@@ -1006,7 +1009,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
                         moveDocument={this.props.moveDocument}
                         whenActiveChanged={this.props.whenActiveChanged}
                         ContainingCollectionView={this.props.CollectionView}
-                        ContainingCollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document}
+                        ContainingCollectionDoc={this.props.CollectionDoc}
                         addDocTab={this.props.addDocTab}
                         pinToPres={this.props.pinToPres}
                         parentActive={this.props.active}
@@ -1015,7 +1018,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
                         ContentScaling={this.contentScaling}
                         PanelWidth={this.PanelWidth}
                         PanelHeight={this.PanelHeight}
-                        focus={emptyFunction}
+                        focus={this.props.focus || emptyFunction}
                         backgroundColor={returnEmptyString}
                         bringToFront={emptyFunction}
                         zoomToScale={emptyFunction}
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 01d4ea2b6..74da4ef85 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -9,7 +9,7 @@
 .collectionStackingView, .collectionMasonryView{
     height: 100%;
     width: 100%;
-    position: absolute;
+    position: relative;
     top: 0;
     overflow-y: auto;
     flex-wrap: wrap;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 1eeb16c4a..6712e8cfe 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -133,7 +133,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     getDisplayDoc(layoutDoc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) {
         let height = () => this.getDocHeight(layoutDoc);
         let finalDxf = () => dxf().scale(this.columnWidth / layoutDoc[WidthSym]());
-        return <CollectionSchemaPreview
+        return <CollectionSchemaPreview {...this.props}
             Document={layoutDoc}
             DataDocument={dataDoc}
             showOverlays={this.overlays}
@@ -144,6 +144,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             width={width}
             height={height}
             getTransform={finalDxf}
+            focus={this.props.focus}
+            CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document}
             CollectionView={this.props.CollectionView}
             addDocument={this.props.addDocument}
             moveDocument={this.props.moveDocument}
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 197e57808..ab01a1086 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -8,11 +8,11 @@
     box-sizing: border-box;
     height: 100%;
     width:100%;
-    position: absolute;
+    position: relative;
     top:0;
     padding-top: 20px;
     padding-left: 10px;
-    padding-right: 0px;
+    padding-right: 10px;
     background: $light-color-secondary;
     font-size: 13px;
     overflow: auto;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index e5313f68c..a133e2c51 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,12 +1,13 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faAngleRight, faCamera, faExpand, faTrash, faBell, faCaretDown, faCaretRight, faArrowsAltH, faCaretSquareDown, faCaretSquareRight, faTrashAlt, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { faAngleRight, faArrowsAltH, faBell, faCamera, faCaretDown, faCaretRight, faCaretSquareDown, faCaretSquareRight, faExpand, faMinus, faPlus, faTrash, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, trace, untracked } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, HeightSym, WidthSym, Opt, Field } from '../../../new_fields/Doc';
+import { Doc, DocListCast, Field, HeightSym, Opt, WidthSym } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/FieldSymbols';
 import { List } from '../../../new_fields/List';
 import { Document, listSpec } from '../../../new_fields/Schema';
+import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../new_fields/Types';
 import { emptyFunction, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
@@ -17,18 +18,16 @@ import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
+import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from "../EditableView";
 import { MainView } from '../MainView';
+import { KeyValueBox } from '../nodes/KeyValueBox';
 import { Templates } from '../Templates';
 import { CollectionViewType } from './CollectionBaseView';
-import { CollectionDockingView } from './CollectionDockingView';
 import { CollectionSchemaPreview } from './CollectionSchemaView';
 import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionTreeView.scss";
 import React = require("react");
-import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
-import { KeyValueBox } from '../nodes/KeyValueBox';
-import { ContextMenuProps } from '../ContextMenuItem';
 
 
 export interface TreeViewProps {
@@ -250,8 +249,8 @@ class TreeView extends React.Component<TreeViewProps> {
     }
     docWidth = () => {
         let aspect = NumCast(this.props.document.nativeHeight) / NumCast(this.props.document.nativeWidth);
-        if (aspect) return Math.min(this.props.document[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.panelWidth() - 5));
-        return NumCast(this.props.document.nativeWidth) ? Math.min(this.props.document[WidthSym](), this.props.panelWidth() - 5) : this.props.panelWidth() - 5;
+        if (aspect) return Math.min(this.props.document[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.panelWidth() - 20));
+        return NumCast(this.props.document.nativeWidth) ? Math.min(this.props.document[WidthSym](), this.props.panelWidth() - 20) : this.props.panelWidth() - 20;
     }
     docHeight = () => {
         let bounds = this.boundsOfCollectionDocument;
@@ -331,6 +330,7 @@ class TreeView extends React.Component<TreeViewProps> {
                     width={this.docWidth}
                     height={this.docHeight}
                     getTransform={this.docTransform}
+                    CollectionDoc={this.props.containingCollection}
                     CollectionView={undefined}
                     addDocument={emptyFunction as any}
                     moveDocument={this.props.moveDocument}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 90fa00202..6eb444dde 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,25 +1,23 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEye } from '@fortawesome/free-regular-svg-icons';
-import { faColumns, faEllipsisV, faFingerprint, faImage, faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { faColumns, faCopy, faEllipsisV, faFingerprint, faImage, faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree } from '@fortawesome/free-solid-svg-icons';
 import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from "mobx-react";
 import * as React from 'react';
-import { Doc, DocListCastAsync } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/FieldSymbols';
-import { StrCast, Cast } from '../../../new_fields/Types';
+import { StrCast } from '../../../new_fields/Types';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from '../ContextMenuItem';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from './CollectionBaseView';
 import { CollectionDockingView } from "./CollectionDockingView";
+import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines';
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionStackingView } from './CollectionStackingView';
 import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionViewBaseChrome } from './CollectionViewChromes';
-import { ImageField } from '../../../new_fields/URLField';
-import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a9699d17b..6fc809f7f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -443,11 +443,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps {
         return {
+            ...this.props,
             DataDoc: childData,
             Document: childLayout,
-            addDocument: this.props.addDocument,
-            removeDocument: this.props.removeDocument,
-            moveDocument: this.props.moveDocument,
             ruleProvider: this.Document.isRuleProvider && childLayout.type !== DocumentType.TEXT ? this.props.Document : this.props.ruleProvider, //bcz: hack! - currently ruleProviders apply to documents in nested colleciton, not direct children of themselves
             onClick: undefined, // this.props.onClick,  // bcz: check this out -- I don't think we want to inherit click handlers, or we at least need a way to ignore them
             ScreenToLocalTransform: childLayout.z ? this.getTransformOverlay : this.getTransform,
@@ -460,37 +458,23 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             focus: this.focusDocument,
             backgroundColor: this.getClusterColor,
             parentActive: this.props.active,
-            whenActiveChanged: this.props.whenActiveChanged,
             bringToFront: this.bringToFront,
-            addDocTab: this.props.addDocTab,
-            pinToPres: this.props.pinToPres,
             zoomToScale: this.zoomToScale,
             getScale: this.getScale
         };
     }
     getDocumentViewProps(layoutDoc: Doc): DocumentViewProps {
         return {
-            DataDoc: this.props.DataDoc,
-            Document: this.props.Document,
-            addDocument: this.props.addDocument,
-            removeDocument: this.props.removeDocument,
-            moveDocument: this.props.moveDocument,
-            ruleProvider: this.props.ruleProvider,
-            onClick: this.props.onClick,
+            ...this.props,
             ScreenToLocalTransform: this.getTransform,
-            renderDepth: this.props.renderDepth,
             PanelWidth: layoutDoc[WidthSym],
             PanelHeight: layoutDoc[HeightSym],
             ContentScaling: returnOne,
             ContainingCollectionView: this.props.CollectionView,
-            ContainingCollectionDoc: this.props.ContainingCollectionDoc,
             focus: this.focusDocument,
             backgroundColor: returnEmptyString,
             parentActive: this.props.active,
-            whenActiveChanged: this.props.whenActiveChanged,
             bringToFront: this.bringToFront,
-            addDocTab: this.props.addDocTab,
-            pinToPres: this.props.pinToPres,
             zoomToScale: this.zoomToScale,
             getScale: this.getScale
         };
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 2aadd77aa..e5a79ab11 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -15,6 +15,7 @@
     pointer-events: all;
 
     .presBox-listCont {
+        position: relative;
         padding-left: 10px;
         padding-right: 10px;
     }
@@ -29,5 +30,4 @@
             border-radius: 5px;
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index d3a24eb7a..ab777d534 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, runInAction, computed } from "mobx";
+import { action, computed, reaction, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { listSpec } from "../../../new_fields/Schema";
@@ -10,12 +10,15 @@ import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { DocumentManager } from "../../util/DocumentManager";
 import { undoBatch } from "../../util/UndoManager";
+import { CollectionViewType } from "../collections/CollectionBaseView";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionView } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
-import "./PresBox.scss";
 import { FieldView, FieldViewProps } from './FieldView';
-import { PresElementBox } from "../presentationview/PresElementBox";
-import { Id } from "../../../new_fields/FieldSymbols";
+import "./PresBox.scss";
+import { DocumentType } from "../../documents/DocumentTypes";
+import { Docs } from "../../documents/Documents";
+import { ComputedField } from "../../../new_fields/ScriptField";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -29,6 +32,29 @@ library.add(faEdit);
 @observer
 export class PresBox extends React.Component<FieldViewProps> {
     public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); }
+    _docListChangedReaction: IReactionDisposer | undefined;
+    componentDidMount() {
+        this._docListChangedReaction = reaction(() => {
+            const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)));
+            return value ? value.slice() : value;
+        }, () => {
+            const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)));
+            if (value) {
+                value.forEach((item, i) => {
+                    if (item instanceof Doc && item.type !== DocumentType.PRESELEMENT) {
+                        let pinDoc = Docs.Create.PresElementBoxDocument();
+                        Doc.GetProto(pinDoc).target = item;
+                        Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()');
+                        value.splice(i, 1, pinDoc);
+                    }
+                })
+            }
+        });
+    }
+
+    componentWillUnmount() {
+        this._docListChangedReaction && this._docListChangedReaction();
+    }
 
     @computed get childDocs() { return DocListCast(this.props.Document[this.props.fieldKey]); }
 
@@ -275,20 +301,14 @@ export class PresBox extends React.Component<FieldViewProps> {
     //directly at start.
     startPresentation = (startIndex: number) => {
         this.childDocs.map(doc => {
-            if (doc.hideTillShownButton) {
-                if (this.childDocs.indexOf(doc) > startIndex) {
-                    doc.opacity = 0;
-                }
+            if (doc.hideTillShownButton && this.childDocs.indexOf(doc) > startIndex) {
+                doc.opacity = 0;
             }
-            if (doc.hideAfterButton) {
-                if (this.childDocs.indexOf(doc) < startIndex) {
-                    doc.opacity = 0;
-                }
+            if (doc.hideAfterButton && this.childDocs.indexOf(doc) < startIndex) {
+                doc.opacity = 0;
             }
-            if (doc.fadeButton) {
-                if (this.childDocs.indexOf(doc) < startIndex) {
-                    doc.opacity = 0.5;
-                }
+            if (doc.fadeButton && this.childDocs.indexOf(doc) < startIndex) {
+                doc.opacity = 0.5;
             }
         });
     }
@@ -316,8 +336,13 @@ export class PresBox extends React.Component<FieldViewProps> {
      * that they will be displayed in a canvas with scale 1.
      */
     @action
-    initializeScaleViews = (docList: Doc[]) => {
+    initializeScaleViews = (docList: Doc[], viewtype: number) => {
+        this.props.Document.chromeStatus = "disabled";
+        let hgt = (viewtype === CollectionViewType.Tree) ? 50 : 72;
         docList.forEach((doc: Doc) => {
+            doc.presBox = this.props.Document;
+            doc.presBoxKey = this.props.fieldKey;
+            doc.height = hgt;
             let curScale = NumCast(doc.viewScale, null);
             if (curScale === undefined) {
                 doc.viewScale = 1;
@@ -325,13 +350,14 @@ export class PresBox extends React.Component<FieldViewProps> {
         });
     }
 
+
     selectElement = (doc: Doc) => {
         let index = DocListCast(this.props.Document[this.props.fieldKey]).indexOf(doc);
         index !== -1 && this.gotoDocument(index, NumCast(this.props.Document.selectedDoc));
     }
 
     render() {
-        this.initializeScaleViews(this.childDocs);
+        this.initializeScaleViews(this.childDocs, NumCast(this.props.Document.viewType));
         return (
             <div className="presBox-cont" onContextMenu={this.specificContextMenu}>
                 <div className="presBox-buttons">
@@ -344,14 +370,9 @@ export class PresBox extends React.Component<FieldViewProps> {
                 </div>
                 {this.props.Document.minimizedView ? (null) :
                     <div className="presBox-listCont" >
-                        {this.childDocs.map(doc =>
-                            <PresElementBox key={doc[Id]}  {... this.props} Document={doc}
-                                removeDocument={this.removeDocument}
-                                focus={this.selectElement}
-                                presBox={this}
-                            />
-                        )}
-                    </div>}
+                        <CollectionView {...this.props} focus={this.selectElement} />
+                    </div>
+                }
             </div>
         );
     }
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index c7d846718..51f2d2ab8 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,6 +1,7 @@
 .presElementBox-item {
     padding: 10px;
     display: inline-block;
+    pointer-events: all;
     width: 100%;
     outline-color: maroon;
     outline-style: dashed;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 1b4c841e7..7692800c3 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -12,11 +12,11 @@ import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
+import { CollectionViewType } from '../collections/CollectionBaseView';
 import { DocumentView } from "../nodes/DocumentView";
-import React = require("react");
+import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
-import { FieldViewProps, FieldView } from '../nodes/FieldView';
-import { PresBox } from '../nodes/PresBox';
+import React = require("react");
 
 
 library.add(faArrowUp);
@@ -25,26 +25,22 @@ library.add(faLocationArrow);
 library.add(fileRegular as any);
 library.add(faSearch);
 library.add(faArrowDown);
-
-interface PresElementProps {
-    presBox: PresBox;
-}
-
 /**
  * This class models the view a document added to presentation will have in the presentation.
  * It involves some functionality for its buttons and options.
  */
 @observer
-export class PresElementBox extends React.Component<PresElementProps & FieldViewProps> {
+export class PresElementBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
     private header?: HTMLDivElement | undefined;
     private listdropDisposer?: DragManager.DragDropDisposer;
     private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _embedHeight = 100;
 
-    @computed get myIndex() { return DocListCast(this.props.presBox.props.Document[this.props.presBox.props.fieldKey]).indexOf(this.props.Document) }
-    @computed get presentationDoc() { return this.props.presBox.props.Document; }
-    @computed get presentationFieldKey() { return this.props.presBox.props.fieldKey; }
+    @computed get myIndex() { return DocListCast(this.presentationDoc[this.presentationFieldKey]).indexOf(this.props.Document); }
+    @computed get presentationDoc() { return this.props.Document.presBox as Doc; }
+    @computed get presentationFieldKey() { return StrCast(this.props.Document.presBoxKey); }
     @computed get currentIndex() { return NumCast(this.presentationDoc.selectedDoc); }
     @computed get showButton() { return BoolCast(this.props.Document.showButton); }
     @computed get navButton() { return BoolCast(this.props.Document.navButton); }
@@ -266,12 +262,12 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
         let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175);
         return (
             <div className="presElementBox-embedded" style={{
-                height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
+                height: propDocHeight === 0 ? this._embedHeight : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
             }}>
                 <DocumentView
                     fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1}
-                    Document={this.props.Document.target as Doc}
+                    Document={this.props.Document.target}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
                     ruleProvider={undefined}
@@ -300,6 +296,7 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
     render() {
         let p = this.props;
 
+        let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree;
         let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
         let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
         let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.presentationDoc[Id], true);
@@ -310,18 +307,25 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView
                 onPointerDown={onItemDown}
                 style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
                 onClick={e => p.focus(p.Document)}>
-                <strong className="presElementBox-name">
-                    {`${this.myIndex + 1}. ${p.Document.title}`}
-                </strong>
-                <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
-                <br />
+                {treecontainer ? (null) : <>
+                    <strong className="presElementBox-name">
+                        {`${this.myIndex + 1}. ${p.Document.title}`}
+                    </strong>
+                    <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
+                    <br />
+                </>
+                }
                 <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
                 <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
                 <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
                 <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
                 <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.groupButton = !this.groupButton)}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
-                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.embedInline = !this.embedInline)}><FontAwesomeIcon icon={"arrow-down"} /></button>
+                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { e.stopPropagation(); this.groupButton = !this.groupButton; })}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => {
+                    this.embedInline = !this.embedInline;
+                    this.props.Document.height = NumCast(this.props.Document.height) + (this.embedInline ? 1 : -1) * this._embedHeight;
+                    e.stopPropagation();
+                })}><FontAwesomeIcon icon={"arrow-down"} /></button>
 
                 <br />
                 {this.renderEmbeddedInline()}
-- 
cgit v1.2.3-70-g09d2


From 8bf998f81c2d633156142d431182998291dfade1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 21:57:34 -0400
Subject: now presentation views are really just wrappers around collections

---
 .../views/collections/CollectionStackingView.tsx   |  8 +-
 .../views/presentationview/PresElementBox.tsx      | 96 ----------------------
 2 files changed, 6 insertions(+), 98 deletions(-)

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6712e8cfe..cb272ef1c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -203,14 +203,18 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @undoBatch
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
-        let where = [de.x, de.y];
+        // bcz: this is here for now to account for the presentation stacking view being offset from the document top in PresBox's.  Should generalize this somehow.
+        let offsethack = Number(this._masonryGridRef && this._masonryGridRef.parentElement!.parentElement!.offsetTop);
+        let where = [de.x, de.y - offsethack];
         let targInd = -1;
+        let plusOne = false;
         if (de.data instanceof DragManager.DocumentDragData) {
             this._docXfs.map((cd, i) => {
                 let pos = cd.dxf().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
                 let pos1 = cd.dxf().inverse().transformPoint(cd.width(), cd.height());
                 if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
                     targInd = i;
+                    plusOne = (where[1] > (pos[1] + pos1[1]) / 2 ? 1 : 0) ? true : false;
                 }
             });
         }
@@ -222,7 +226,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 else targInd = docs.indexOf(this.filteredChildren[targInd]);
                 let srcInd = docs.indexOf(newDoc);
                 docs.splice(srcInd, 1);
-                docs.splice(targInd > srcInd ? targInd - 1 : targInd, 0, newDoc);
+                docs.splice((targInd > srcInd ? targInd - 1 : targInd) + (plusOne ? 1 : 0), 0, newDoc);
             }
         }
         return false;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 7692800c3..0e3d8bb7f 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -9,8 +9,6 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types";
 import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
-import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { CollectionViewType } from '../collections/CollectionBaseView';
 import { DocumentView } from "../nodes/DocumentView";
@@ -33,9 +31,6 @@ library.add(faArrowDown);
 export class PresElementBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
-    private header?: HTMLDivElement | undefined;
-    private listdropDisposer?: DragManager.DragDropDisposer;
-    private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _embedHeight = 100;
 
     @computed get myIndex() { return DocListCast(this.presentationDoc[this.presentationFieldKey]).indexOf(this.props.Document); }
@@ -58,17 +53,6 @@ export class PresElementBox extends React.Component<FieldViewProps> {
     set hideAfterButton(val: boolean) { this.props.Document.hideAfterButton = val; }
     set groupButton(val: boolean) { this.props.Document.groupButton = val; }
 
-    //Lifecycle function that makes sure that button BackUp is received when mounted.
-    componentDidMount() {
-        if (this.presElRef.current) {
-            this.header = this.presElRef.current;
-            this.createListDropTarget(this.presElRef.current);
-        }
-    }
-
-    componentWillUnmount() {
-        this.listdropDisposer && this.listdropDisposer();
-    }
     /**
      * The function that is called on click to turn Hiding document till press option on/off.
      * It also sets the beginning and end opacitys.
@@ -168,86 +152,11 @@ export class PresElementBox extends React.Component<FieldViewProps> {
             }
         }
     }
-
-    /**
-     * Creating a drop target for drag and drop when called.
-     */
-    protected createListDropTarget = (ele: HTMLDivElement) => {
-        this.listdropDisposer && this.listdropDisposer();
-        ele && (this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }));
-    }
-
     /**
      * Returns a local transformed coordinate array for given coordinates.
      */
     ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
-    /**
-     * This method is called when a element is dropped on a already esstablished target.
-     * It makes sure to do appropirate action depending on if the item is dropped before
-     * or after the target.
-     */
-    listDrop = async (e: Event, de: DragManager.DropEvent) => {
-        let x = this.ScreenToLocalListTransform(de.x, de.y);
-        let rect = this.header!.getBoundingClientRect();
-        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        let before = x[1] < bounds[1];
-        if (de.data instanceof DragManager.DocumentDragData) {
-            let addDoc = (doc: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, doc, this.props.Document, before);
-            e.stopPropagation();
-            //where does treeViewId come from
-            let movedDocs = (de.data.options === this.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
-            //console.log("How is this causing an issue");
-            document.removeEventListener("pointermove", this.onDragMove, true);
-            return (de.data.dropAction || de.data.userDropAction) ?
-                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, d, this.props.Document, before) || added, false)
-                : (de.data.moveDocument) ?
-                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.Document, addDoc) || added, false)
-                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, d, this.props.Document, before), false);
-        }
-        document.removeEventListener("pointermove", this.onDragMove, true);
-
-        return false;
-    }
-
-    //This is used to add dragging as an event.
-    onPointerEnter = (e: React.PointerEvent): void => {
-        if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-            this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? "presElementBox-selected" : "");
-
-            document.addEventListener("pointermove", this.onDragMove, true);
-        }
-    }
-
-    //This is used to remove the dragging when dropped.
-    onPointerLeave = (e: React.PointerEvent): void => {
-        this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
-
-        document.removeEventListener("pointermove", this.onDragMove, true);
-    }
-
-    /**
-     * This method is passed in to be used when dragging a document.
-     * It makes it possible to show dropping lines on drop targets.
-     */
-    onDragMove = (e: PointerEvent): void => {
-        Doc.UnBrushDoc(this.props.Document);
-        let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
-        let rect = this.header!.getBoundingClientRect();
-        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        this.header!.className = "presElementBox-item presElementBox-item-" + (x[1] < bounds[1] ? "above" : "below");
-        e.stopPropagation();
-    }
-
-    /**
-     * This method is passed in to on down event of presElement, so that drag and
-     * drop can be completed with DragManager functionality.
-     */
-    @action
-    move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
-        return this.props.Document !== target && (this.props.removeDocument ? this.props.removeDocument(doc) : false) && addDoc(doc);
-    }
-
     /**
      * The function that is responsible for rendering the a preview or not for this
      * presentation element.
@@ -298,13 +207,8 @@ export class PresElementBox extends React.Component<FieldViewProps> {
 
         let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree;
         let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
-        let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
-        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.presentationDoc[Id], true);
         return (
             <div className={className} key={p.Document[Id] + this.myIndex}
-                ref={this.presElRef}
-                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
-                onPointerDown={onItemDown}
                 style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
                 onClick={e => p.focus(p.Document)}>
                 {treecontainer ? (null) : <>
-- 
cgit v1.2.3-70-g09d2


From 2a393bd745667fa920d105bf69827c75dc687f08 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 1 Oct 2019 01:33:57 -0400
Subject: final updates to presentation view to improve layout. fixes for
 chromeHeight

---
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionStackingView.tsx   |  6 ++--
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 src/client/views/collections/CollectionView.tsx    | 19 +++++++----
 .../views/collections/CollectionViewChromes.tsx    |  3 +-
 src/client/views/nodes/PresBox.tsx                 | 10 ++++--
 .../views/presentationview/PresElementBox.scss     | 14 ++++++--
 .../views/presentationview/PresElementBox.tsx      | 38 ++++++++++------------
 8 files changed, 52 insertions(+), 42 deletions(-)

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d83530d4f..246546c9e 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -573,7 +573,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         //add this new doc to props.Document
         let curPres = Cast(CurrentUserUtils.UserDocument.curPresentation, Doc) as Doc;
         if (curPres) {
-            let pinDoc = Docs.Create.PresElementBoxDocument();
+            let pinDoc = Docs.Create.PresElementBoxDocument({ backgroundColor: "transparent" });
             Doc.GetProto(pinDoc).target = doc;
             Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()');
             const data = Cast(curPres.data, listSpec(Doc));
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index cb272ef1c..c7060f110 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -203,9 +203,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @undoBatch
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
-        // bcz: this is here for now to account for the presentation stacking view being offset from the document top in PresBox's.  Should generalize this somehow.
-        let offsethack = Number(this._masonryGridRef && this._masonryGridRef.parentElement!.parentElement!.offsetTop);
-        let where = [de.x, de.y - offsethack];
+        let where = [de.x, de.y];
         let targInd = -1;
         let plusOne = false;
         if (de.data instanceof DragManager.DocumentDragData) {
@@ -285,7 +283,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let outerXf = Utils.GetScreenTransform(this._masonryGridRef!);
         let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
         return this.props.ScreenToLocalTransform().
-            translate(offset[0], offset[1]).
+            translate(offset[0], offset[1] + (this.props.ChromeHeight ? this.props.ChromeHeight() : 0)).
             scale(NumCast(doc.width, 1) / this.columnWidth);
     }
     masonryChildren(docs: Doc[]) {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index a133e2c51..6ce5d8e20 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -81,7 +81,7 @@ class TreeView extends React.Component<TreeViewProps> {
     private _header?: React.RefObject<HTMLDivElement> = React.createRef();
     private _treedropDisposer?: DragManager.DragDropDisposer;
     private _dref = React.createRef<HTMLDivElement>();
-    get defaultExpandedView() { return this.childDocs ? this.fieldKey : "fields"; }
+    get defaultExpandedView() { return this.childDocs ? this.fieldKey : this.props.document.defaultExpandedView ? StrCast(this.props.document.defaultExpandedView) : ""; }
     @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state
     @computed get treeViewOpen() { return (BoolCast(this.props.document.treeViewOpen) && !this.props.preventTreeViewOpen) || this._overrideTreeViewOpen; }
     set treeViewOpen(c: boolean) { if (this.props.preventTreeViewOpen) this._overrideTreeViewOpen = c; else this.props.document.treeViewOpen = c; }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 6eb444dde..534246326 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -50,20 +50,25 @@ export class CollectionView extends React.Component<FieldViewProps> {
         this._reactionDisposer && this._reactionDisposer();
     }
 
+    // bcz: Argh?  What's the height of the collection chomes??  
+    chromeHeight = () => {
+        return (this.props.ChromeHeight ? this.props.ChromeHeight() : 0) + (this.props.Document.chromeStatus === "enabled" ? -60 : 0);
+    }
+
     private SubViewHelper = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
         let props = { ...this.props, ...renderProps };
         switch (this.isAnnotationOverlay ? CollectionViewType.Freeform : type) {
-            case CollectionViewType.Schema: return (<CollectionSchemaView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+            case CollectionViewType.Schema: return (<CollectionSchemaView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />);
             // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip
-            case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={true} key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Tree: return (<CollectionTreeView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
-            case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
-            case CollectionViewType.Pivot: { this.props.Document.freeformLayoutEngine = "pivot"; return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
+            case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={true} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />);
+            case CollectionViewType.Tree: return (<CollectionTreeView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />);
+            case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
+            case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
+            case CollectionViewType.Pivot: { this.props.Document.freeformLayoutEngine = "pivot"; return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
             case CollectionViewType.Freeform:
             default:
                 this.props.Document.freeformLayoutEngine = undefined;
-                return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+                return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />);
         }
         return (null);
     }
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 47b300efc..23001f0f5 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -10,7 +10,6 @@ import { ScriptField } from "../../../new_fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types";
 import { Utils, emptyFunction } from "../../../Utils";
 import { DragManager } from "../../util/DragManager";
-import { CompileScript } from "../../util/Scripting";
 import { undoBatch } from "../../util/UndoManager";
 import { EditableView } from "../EditableView";
 import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss";
@@ -375,7 +374,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
     render() {
         let collapsed = this.props.CollectionView.props.Document.chromeStatus !== "enabled";
         return (
-            <div className="collectionViewChrome-cont" style={{ top: collapsed ? -70 : 0 }}>
+            <div className="collectionViewChrome-cont" style={{ top: collapsed ? -70 : 0, height: collapsed ? 0 : undefined }}>
                 <div className="collectionViewChrome">
                     <div className="collectionViewBaseChrome">
                         <button className="collectionViewBaseChrome-collapse"
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index ab777d534..66608fb8d 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -42,7 +42,7 @@ export class PresBox extends React.Component<FieldViewProps> {
             if (value) {
                 value.forEach((item, i) => {
                     if (item instanceof Doc && item.type !== DocumentType.PRESELEMENT) {
-                        let pinDoc = Docs.Create.PresElementBoxDocument();
+                        let pinDoc = Docs.Create.PresElementBoxDocument({ backgroundColor: "transparent" });
                         Doc.GetProto(pinDoc).target = item;
                         Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()');
                         value.splice(i, 1, pinDoc);
@@ -342,7 +342,8 @@ export class PresBox extends React.Component<FieldViewProps> {
         docList.forEach((doc: Doc) => {
             doc.presBox = this.props.Document;
             doc.presBoxKey = this.props.fieldKey;
-            doc.height = hgt;
+            doc.collapsedHeight = hgt;
+            doc.height = ComputedField.MakeFunction("this.collapsedHeight + Number(this.embedOpen ? 100:0)")
             let curScale = NumCast(doc.viewScale, null);
             if (curScale === undefined) {
                 doc.viewScale = 1;
@@ -356,6 +357,9 @@ export class PresBox extends React.Component<FieldViewProps> {
         index !== -1 && this.gotoDocument(index, NumCast(this.props.Document.selectedDoc));
     }
 
+    getTransform = () => {
+        return this.props.ScreenToLocalTransform().translate(-10, -50);// listBox padding-left and pres-box-cont minHeight
+    }
     render() {
         this.initializeScaleViews(this.childDocs, NumCast(this.props.Document.viewType));
         return (
@@ -370,7 +374,7 @@ export class PresBox extends React.Component<FieldViewProps> {
                 </div>
                 {this.props.Document.minimizedView ? (null) :
                     <div className="presBox-listCont" >
-                        <CollectionView {...this.props} focus={this.selectElement} />
+                        <CollectionView {...this.props} focus={this.selectElement} ScreenToLocalTransform={this.getTransform} />
                     </div>
                 }
             </div>
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 51f2d2ab8..34c170be2 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,10 +1,12 @@
 .presElementBox-item {
     padding: 10px;
     display: inline-block;
+    background-color: #eeeeee;
     pointer-events: all;
     width: 100%;
     outline-color: maroon;
     outline-style: dashed;
+    border-radius: 12px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -40,9 +42,10 @@
     box-shadow: black 2px 2px 5px;
 }
 
-
-.presElementBox-icon {
+.presElementBox-closeIcon {
     float: right;
+    border-radius: 20px;
+    transform:scale(0.7);
 }
 
 .presElementBox-interaction {
@@ -57,12 +60,17 @@
 
 .presElementBox-name {
     font-size: 15px;
+    position: absolute;
     display: inline-block;
+    width: calc(100% - 45px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: pre;
 }
 
 .presElementBox-embedded {
     position: relative;
-    margin-top: 15;
+    margin-top: 30;
 }
 
 .presElementBox-embeddedMask {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 0e3d8bb7f..fb9474cde 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -31,7 +31,6 @@ library.add(faArrowDown);
 export class PresElementBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
-    private _embedHeight = 100;
 
     @computed get myIndex() { return DocListCast(this.presentationDoc[this.presentationFieldKey]).indexOf(this.props.Document); }
     @computed get presentationDoc() { return this.props.Document.presBox as Doc; }
@@ -43,9 +42,9 @@ export class PresElementBox extends React.Component<FieldViewProps> {
     @computed get fadeButton() { return BoolCast(this.props.Document.fadeButton); }
     @computed get hideAfterButton() { return BoolCast(this.props.Document.hideAfterButton); }
     @computed get groupButton() { return BoolCast(this.props.Document.groupButton); }
-    @computed get embedInline() { return BoolCast(this.props.Document.embedOpen); }
+    @computed get embedOpen() { return BoolCast(this.props.Document.embedOpen); }
 
-    set embedInline(value: boolean) { this.props.Document.embedOpen = value; }
+    set embedOpen(value: boolean) { this.props.Document.embedOpen = value; }
     set showButton(val: boolean) { this.props.Document.showButton = val; }
     set navButton(val: boolean) { this.props.Document.navButton = val; }
     set hideTillShownButton(val: boolean) { this.props.Document.hideTillShownButton = val; }
@@ -162,7 +161,7 @@ export class PresElementBox extends React.Component<FieldViewProps> {
      * presentation element.
      */
     renderEmbeddedInline = () => {
-        if (!this.embedInline || !(this.props.Document.target instanceof Doc)) {
+        if (!this.embedOpen || !(this.props.Document.target instanceof Doc)) {
             return (null);
         }
 
@@ -171,7 +170,7 @@ export class PresElementBox extends React.Component<FieldViewProps> {
         let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175);
         return (
             <div className="presElementBox-embedded" style={{
-                height: propDocHeight === 0 ? this._embedHeight : propDocHeight * scale(),
+                height: propDocHeight === 0 ? NumCast(this.props.Document.height) - NumCast(this.props.Document.collapsedHeight) : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
             }}>
                 <DocumentView
@@ -207,31 +206,28 @@ export class PresElementBox extends React.Component<FieldViewProps> {
 
         let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree;
         let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
+        let pbi = "presElementBox-interaction";
         return (
             <div className={className} key={p.Document[Id] + this.myIndex}
-                style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
-                onClick={e => p.focus(p.Document)}>
+                style={{ outlineWidth: Doc.IsBrushed(p.Document.target as Doc) ? `1px` : "0px", }}
+                onClick={e => { p.focus(p.Document); e.stopPropagation(); }}>
                 {treecontainer ? (null) : <>
                     <strong className="presElementBox-name">
                         {`${this.myIndex + 1}. ${p.Document.title}`}
                     </strong>
-                    <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
+                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
                     <br />
                 </>
                 }
-                <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { e.stopPropagation(); this.groupButton = !this.groupButton; })}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
-                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => {
-                    this.embedInline = !this.embedInline;
-                    this.props.Document.height = NumCast(this.props.Document.height) + (this.embedInline ? 1 : -1) * this._embedHeight;
-                    e.stopPropagation();
-                })}><FontAwesomeIcon icon={"arrow-down"} /></button>
-
-                <br />
+                <button title="Zoom" className={pbi + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={pbi + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Before" className={pbi + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade After" className={pbi + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide After" className={pbi + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={pbi + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { e.stopPropagation(); this.groupButton = !this.groupButton; })}><FontAwesomeIcon icon={"arrow-up"} /></button>
+                <button title="Expand Inline" className={pbi + (this.embedOpen ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { e.stopPropagation(); this.embedOpen = !this.embedOpen; })}><FontAwesomeIcon icon={"arrow-down"} /></button>
+
+                <br style={{ lineHeight: 0.1 }} />
                 {this.renderEmbeddedInline()}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 9e1234abe64d289927122ad641e3bcaf0b9eaf6e Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 1 Oct 2019 02:54:03 -0400
Subject: bugs, bugs.  this time with fittobox when called from schema view
 which was passing width and height as functions, not values.  switched to
 PanelWidth and PanelHeight

---
 .../views/collections/CollectionSchemaView.tsx     | 32 +++++++++++-----------
 .../views/collections/CollectionStackingView.tsx   |  4 +--
 .../views/collections/CollectionTreeView.tsx       |  4 +--
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  4 +--
 src/client/views/nodes/PresBox.tsx                 |  4 +--
 .../views/presentationview/PresElementBox.tsx      | 22 ++++++---------
 6 files changed, 33 insertions(+), 37 deletions(-)

(limited to 'src/client/views/presentationview/PresElementBox.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 77d86b2fa..59cce7386 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -163,8 +163,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 childDocs={this.childDocs}
                 renderDepth={this.props.renderDepth}
                 ruleProvider={this.props.Document.isRuleProvider && layoutDoc && layoutDoc.type !== DocumentType.TEXT ? this.props.Document : this.props.ruleProvider}
-                width={this.previewWidth}
-                height={this.previewHeight}
+                PanelWidth={this.previewWidth}
+                PanelHeight={this.previewHeight}
                 getTransform={this.getPreviewTransform}
                 CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document}
                 CollectionView={this.props.CollectionView}
@@ -904,8 +904,8 @@ interface CollectionSchemaPreviewProps {
     childDocs?: Doc[];
     renderDepth: number;
     fitToBox?: boolean;
-    width: () => number;
-    height: () => number;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
     ruleProvider: Doc | undefined;
     focus?: (doc: Doc) => void;
     showOverlays?: (doc: Doc) => { title?: string, caption?: string };
@@ -928,12 +928,12 @@ interface CollectionSchemaPreviewProps {
 export class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
     private dropDisposer?: DragManager.DragDropDisposer;
     _mainCont?: HTMLDivElement;
-    private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.width()); }
-    private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.height()); }
+    private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.PanelWidth()); }
+    private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.PanelHeight()); }
     private contentScaling = () => {
-        let wscale = this.props.width() / (this.nativeWidth ? this.nativeWidth : this.props.width());
-        if (wscale * this.nativeHeight > this.props.height()) {
-            return this.props.height() / (this.nativeHeight ? this.nativeHeight : this.props.height());
+        let wscale = this.props.PanelWidth() / (this.nativeWidth ? this.nativeWidth : this.props.PanelWidth());
+        if (wscale * this.nativeHeight > this.props.PanelHeight()) {
+            return this.props.PanelHeight() / (this.nativeHeight ? this.nativeHeight : this.props.PanelHeight());
         }
         return wscale;
     }
@@ -962,10 +962,10 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
         }
         return true;
     }
-    private PanelWidth = () => this.nativeWidth ? this.nativeWidth * this.contentScaling() : this.props.width();
-    private PanelHeight = () => this.nativeHeight ? this.nativeHeight * this.contentScaling() : this.props.height();
+    private PanelWidth = () => this.nativeWidth ? this.nativeWidth * this.contentScaling() : this.props.PanelWidth();
+    private PanelHeight = () => this.nativeHeight ? this.nativeHeight * this.contentScaling() : this.props.PanelHeight();
     private getTransform = () => this.props.getTransform().translate(-this.centeringOffset, 0).scale(1 / this.contentScaling());
-    get centeringOffset() { return this.nativeWidth ? (this.props.width() - this.nativeWidth * this.contentScaling()) / 2 : 0; }
+    get centeringOffset() { return this.nativeWidth ? (this.props.PanelWidth() - this.nativeWidth * this.contentScaling()) / 2 : 0; }
     @action
     onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.setPreviewScript(e.currentTarget.value);
@@ -987,15 +987,15 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
             <div ref={this.createTarget}><input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
                 style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} /></div>;
         return (<div className="collectionSchemaView-previewRegion"
-            style={{ width: this.props.width(), height: this.props.height() }}>
-            {!this.props.Document || !this.props.width ? (null) : (
+            style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
+            {!this.props.Document || !this.props.PanelWidth ? (null) : (
                 <div className="collectionSchemaView-previewDoc"
                     style={{
                         transform: `translate(${this.centeringOffset}px, 0px)`,
                         borderRadius: this.borderRounding,
                         display: "inline",
-                        height: this.props.height(),
-                        width: this.props.width()
+                        height: this.props.PanelHeight(),
+                        width: this.props.PanelWidth()
                     }}>
                     <DocumentView {...this.props}
                         DataDoc={this.props.DataDocument}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index c7060f110..e2020601b 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -141,8 +141,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             ruleProvider={this.props.Document.isRuleProvider && layoutDoc.type !== DocumentType.TEXT ? this.props.Document : this.props.ruleProvider}
             fitToBox={this.props.fitToBox}
             onClick={layoutDoc.isTemplate ? this.onClickHandler : this.onChildClickHandler}
-            width={width}
-            height={height}
+            PanelWidth={width}
+            PanelHeight={height}
             getTransform={finalDxf}
             focus={this.props.focus}
             CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6ce5d8e20..ffd1f9170 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -327,8 +327,8 @@ class TreeView extends React.Component<TreeViewProps> {
                     showOverlays={this.noOverlays}
                     ruleProvider={this.props.document.isRuleProvider && layoutDoc.type !== DocumentType.TEXT ? this.props.document : this.props.ruleProvider}
                     fitToBox={this.boundsOfCollectionDocument !== undefined}
-                    width={this.docWidth}
-                    height={this.docHeight}
+                    PanelWidth={this.docWidth}
+                    PanelHeight={this.docHeight}
                     getTransform={this.docTransform}
                     CollectionDoc={this.props.containingCollection}
                     CollectionView={undefined}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6fc809f7f..27b9a06f5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -745,8 +745,8 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
         const ceny = this.props.centeringShiftY();
         const panx = -this.props.panX();
         const pany = -this.props.panY();
-        const zoom = this.props.zoomScaling();// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
-        return <div className={freeformclass} style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
+        const zoom = this.props.zoomScaling();
+        return <div className={freeformclass} style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}) translate(${panx}px, ${pany}px)` }}>
             {this.props.children}
         </div>;
     }
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 66608fb8d..f44ca99b9 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -47,7 +47,7 @@ export class PresBox extends React.Component<FieldViewProps> {
                         Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()');
                         value.splice(i, 1, pinDoc);
                     }
-                })
+                });
             }
         });
     }
@@ -343,7 +343,7 @@ export class PresBox extends React.Component<FieldViewProps> {
             doc.presBox = this.props.Document;
             doc.presBoxKey = this.props.fieldKey;
             doc.collapsedHeight = hgt;
-            doc.height = ComputedField.MakeFunction("this.collapsedHeight + Number(this.embedOpen ? 100:0)")
+            doc.height = ComputedField.MakeFunction("this.collapsedHeight + Number(this.embedOpen ? 100:0)");
             let curScale = NumCast(doc.viewScale, null);
             if (curScale === undefined) {
                 doc.viewScale = 1;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index fb9474cde..de3242d32 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -15,6 +15,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
 import React = require("react");
+import { CollectionSchemaPreview } from '../collections/CollectionSchemaView';
 
 
 library.add(faArrowUp);
@@ -173,28 +174,23 @@ export class PresElementBox extends React.Component<FieldViewProps> {
                 height: propDocHeight === 0 ? NumCast(this.props.Document.height) - NumCast(this.props.Document.collapsedHeight) : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
             }}>
-                <DocumentView
-                    fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1}
+                <CollectionSchemaPreview
+                    fitToBox={StrCast(this.props.Document.target.type).indexOf(DocumentType.COL) !== -1}
                     Document={this.props.Document.target}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
                     ruleProvider={undefined}
-                    ScreenToLocalTransform={Transform.Identity}
                     addDocTab={returnFalse}
                     pinToPres={returnFalse}
+                    PanelWidth={() => this.props.PanelWidth() - 20}
+                    PanelHeight={() => 100}
+                    setPreviewScript={emptyFunction}
+                    getTransform={Transform.Identity}
+                    active={this.props.active}
+                    moveDocument={this.props.moveDocument!}
                     renderDepth={1}
-                    PanelWidth={() => 350}
-                    PanelHeight={() => 90}
                     focus={emptyFunction}
-                    backgroundColor={returnEmptyString}
-                    parentActive={returnFalse}
                     whenActiveChanged={returnFalse}
-                    bringToFront={emptyFunction}
-                    zoomToScale={emptyFunction}
-                    getScale={returnOne}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    ContentScaling={scale}
                 />
                 <div className="presElementBox-embeddedMask" />
             </div>
-- 
cgit v1.2.3-70-g09d2

