diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/nodes/PresBox.tsx | 25 | ||||
-rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 60 |
2 files changed, 44 insertions, 41 deletions
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 /> |