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')

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