diff options
| -rw-r--r-- | src/client/views/MainView.tsx | 43 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 410 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresentationModeMenu.tsx | 4 |
3 files changed, 161 insertions, 296 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index cf09bd2d0..dadff21a7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons'; +import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -7,23 +7,24 @@ import "normalize.css"; import * as React from 'react'; import { SketchPicker } from 'react-color'; import Measure from 'react-measure'; -import { List } from '../../new_fields/List'; -import { Doc, DocListCast, Opt, HeightSym, FieldResult, Field } from '../../new_fields/Doc'; +import { Doc, DocListCast, Field, FieldResult, HeightSym, Opt } from '../../new_fields/Doc'; import { Id } from '../../new_fields/FieldSymbols'; import { InkTool } from '../../new_fields/InkField'; +import { List } from '../../new_fields/List'; import { listSpec } from '../../new_fields/Schema'; -import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../new_fields/Types'; +import { BoolCast, Cast, FieldValue, StrCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; -import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString } from '../../Utils'; +import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils'; import { DocServer } from '../DocServer'; +import { Docs, DocumentOptions } from '../documents/Documents'; import { ClientUtils } from '../util/ClientUtils'; import { DictationManager } from '../util/DictationManager'; import { SetupDrag } from '../util/DragManager'; -import { Transform } from '../util/Transform'; -import { UndoManager, undoBatch } from '../util/UndoManager'; -import { Docs, DocumentOptions } from '../documents/Documents'; import { HistoryUtil } from '../util/History'; +import SharingManager from '../util/SharingManager'; +import { Transform } from '../util/Transform'; +import { UndoManager } from '../util/UndoManager'; import { CollectionBaseView, CollectionViewType } from './collections/CollectionBaseView'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { CollectionTreeView } from './collections/CollectionTreeView'; @@ -33,20 +34,13 @@ import KeyManager from './GlobalKeyHandler'; import { InkingControl } from './InkingControl'; import "./Main.scss"; import { MainOverlayTextBox } from './MainOverlayTextBox'; +import MainViewModal from './MainViewModal'; import { DocumentView } from './nodes/DocumentView'; +import { PresBox } from './nodes/PresBox'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; -import PresModeMenu from './presentationview/PresentationModeMenu'; -import { PresBox } from './nodes/PresBox'; -import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils'; -import { ImageField } from '../../new_fields/URLField'; -import { LinkFollowBox } from './linking/LinkFollowBox'; -import { DocumentManager } from '../util/DocumentManager'; -import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField'; -import MainViewModal from './MainViewModal'; -import SharingManager from '../util/SharingManager'; @observer export class MainView extends React.Component { @@ -185,9 +179,8 @@ export class MainView extends React.Component { CurrentUserUtils.MainDocId = pathname[1]; if (!this.userDoc) { runInAction(() => this.flyoutWidth = 0); - DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action(field => { - field instanceof Doc && (CurrentUserUtils.GuestTarget = field); - })); + DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt<Field>) => + field instanceof Doc && (CurrentUserUtils.GuestTarget = field))); } } } @@ -634,14 +627,6 @@ export class MainView extends React.Component { ); } - @computed get miniPresentation() { - let next = () => PresBox.CurrentPresentation.next(); - let back = () => PresBox.CurrentPresentation.back(); - let startOrResetPres = () => PresBox.CurrentPresentation.startOrResetPres(); - let closePresMode = action(() => { PresBox.CurrentPresentation.presMode = false; this.addDocTabFunc(PresBox.CurrentPresentation.props.Document, undefined, "onRight"); }); - return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : <PresModeMenu next={next} back={back} presStatus={PresBox.CurrentPresentation.presStatus} startOrResetPres={startOrResetPres} closePresMode={closePresMode} > </PresModeMenu>; - } - render() { return ( <div id="main-div"> @@ -649,7 +634,7 @@ export class MainView extends React.Component { <SharingManager /> <DocumentDecorations /> {this.mainContent} - {this.miniPresentation} + {PresBox.miniPresentation} <PreviewCursor /> <ContextMenu /> {this.nodesMenu()} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 5afd85430..d246da87a 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,21 +2,20 @@ 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, computed, observable, runInAction } from "mobx"; +import { action, observable, runInAction, computed } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; -import { Id } from "../../../new_fields/FieldSymbols"; -import { List } from "../../../new_fields/List"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; import { listSpec } from "../../../new_fields/Schema"; -import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils } from "../../../Utils"; +import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; +import { ContextMenu } from "../ContextMenu"; import PresentationElement from "../presentationview/PresentationElement"; import PresentationViewList from "../presentationview/PresentationList"; import "../presentationview/PresentationView.scss"; import { FieldView, FieldViewProps } from './FieldView'; -import { ContextMenu } from "../ContextMenu"; +import PresModeMenu from "../presentationview/PresentationModeMenu"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; library.add(faArrowLeft); library.add(faArrowRight); @@ -27,147 +26,99 @@ library.add(faTimes); library.add(faMinus); library.add(faEdit); - -export interface PresViewProps { - Documents: List<Doc>; -} - -const expandedWidth = 450; - @observer -export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? - - +export class PresBox extends React.Component<FieldViewProps> { public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); } public static Instance: PresBox; - - //Keeping track of the doc for the current presentation -- bcz: keeping a list of current presentations shouldn't be needed. Let users create them, store them, as they see fit. - @computed get curPresentation() { return this.props.Document; } - //mapping from docs to their rendered component - @observable presElementsMappings: Map<Doc, PresentationElement> = new Map(); + @observable _presElementsMappings: Map<Doc, PresentationElement> = new Map(); //variable that holds all the docs in the presentation - @observable childrenDocs: Doc[] = []; - //variable to hold if presentation is started - @observable presStatus: boolean = false; - //Mapping of guids to presentations. - @observable presentationsMapping: Map<String, Doc> = new Map(); - //Mapping of presentations to guid, so that select option values can be given. - @observable presentationsKeyMapping: Map<Doc, String> = new Map(); - //Variable to keep track of guid of the current presentation - @observable currentSelectedPresValue: string | undefined; - //A flag to keep track if title input is open, which is used in rendering. - @observable PresTitleInputOpen: boolean = false; - //Variable that holds reference to title input, so that new presentations get titles assigned. - @observable titleInputElement: HTMLInputElement | undefined; - @observable PresTitleChangeOpen: boolean = false; - - @observable opacity = 1; - @observable persistOpacity = true; - @observable labelOpacity = 0; - @observable presMode = false; + @observable _childrenDocs: Doc[] = []; + @observable _opacity = 1; + @observable _persistOpacity = true; + @observable _labelOpacity = 0; + // whether presentation view has been minimized + @observable _presMode = false; @observable public static CurrentPresentation: PresBox; + @computed static get miniPresentation() { + let next = () => PresBox.CurrentPresentation.next(); + let back = () => PresBox.CurrentPresentation.back(); + let startOrResetPres = () => PresBox.CurrentPresentation.startOrResetPres(); + let closePresMode = action(() => { + PresBox.CurrentPresentation._presMode = false; + CollectionDockingView.AddRightSplit(PresBox.CurrentPresentation.props.Document, undefined); + }); + return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation._presMode ? (null) : + <PresModeMenu next={next} back={back} presStatus={BoolCast(PresBox.CurrentPresentation.props.Document.presStatus)} + startOrResetPres={startOrResetPres} closePresMode={closePresMode} />; + } + //initilize class variables constructor(props: FieldViewProps) { super(props); runInAction(() => PresBox.CurrentPresentation = this); } - @action - toggle = (forcedValue: boolean | undefined) => { - if (forcedValue !== undefined) { - this.curPresentation.width = forcedValue ? expandedWidth : 0; - } else { - this.curPresentation.width = this.curPresentation.width === expandedWidth ? 0 : expandedWidth; - } - } - - //Second lifecycle function that gets called when component mounts. It makes sure toS - //get the back-up information from previous session for the current presentation. - async componentDidMount() { - this.setPresentationBackUps(); - } - - - /** - * The function that retrieves the backUps for the current Presentation if present, - * otherwise initializes. - */ - setPresentationBackUps = async () => { - //storing the presentation status,ie. whether it was stopped or playing - let presStatusBackUp = BoolCast(this.curPresentation.presStatus); - runInAction(() => this.presStatus = presStatusBackUp); - } - - //observable means render is re-called every time variable is changed - @observable - collapsed: boolean = false; next = async () => { - const current = NumCast(this.curPresentation.selectedDoc); + const current = NumCast(this.props.Document.selectedDoc); //asking to get document at current index let docAtCurrentNext = await this.getDocAtIndex(current + 1); - if (docAtCurrentNext === undefined) { - return; - } - let nextSelected = current + 1; + if (docAtCurrentNext !== undefined) { + let presDocs = DocListCast(this.props.Document.data); + let nextSelected = current + 1; - let presDocs = DocListCast(this.curPresentation.data); - for (; nextSelected < presDocs.length - 1; nextSelected++) { - if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { - break; + for (; nextSelected < presDocs.length - 1; nextSelected++) { + if (!this._presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { + break; + } } - } - - this.gotoDocument(nextSelected, current); + this.gotoDocument(nextSelected, current); + } } back = async () => { - const current = NumCast(this.curPresentation.selectedDoc); + const current = NumCast(this.props.Document.selectedDoc); //requesting for the doc at current index let docAtCurrent = await this.getDocAtIndex(current); - if (docAtCurrent === undefined) { - return; - } + if (docAtCurrent !== undefined) { - //asking for its presentation id. - let curPresId = StrCast(docAtCurrent.presentId); - let prevSelected = current; - let zoomOut: boolean = false; + //asking for its presentation id. + let prevSelected = current; + let zoomOut: boolean = false; - //checking if this presentation id is mapped to a group, if so chosing the first element in group - let presDocs = DocListCast(this.curPresentation.data); - let currentsArray: Doc[] = []; - for (; prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) { - currentsArray.push(presDocs[prevSelected]); - } - prevSelected = Math.max(0, prevSelected - 1); - - //checking if any of the group members had used zooming in - currentsArray.forEach((doc: Doc) => { - //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); - if (this.presElementsMappings.get(doc)!.props.document.showButton) { - zoomOut = true; - return; + //checking if this presentation id is mapped to a group, if so chosing the first element in group + let presDocs = DocListCast(this.props.Document.data); + let currentsArray: Doc[] = []; + for (; prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) { + currentsArray.push(presDocs[prevSelected]); } - }); - - - // if a group set that flag to zero or a single element - //If so making sure to zoom out, which goes back to state before zooming action - if (current > 0) { - if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.showButton) { - let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); - if (prevScale !== undefined && prevScale !== curScale) { - DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + prevSelected = Math.max(0, prevSelected - 1); + + //checking if any of the group members had used zooming in + currentsArray.forEach((doc: Doc) => { + //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); + if (this._presElementsMappings.get(doc)!.props.document.showButton) { + zoomOut = true; + return; + } + }); + + // if a group set that flag to zero or a single element + //If so making sure to zoom out, which goes back to state before zooming action + if (current > 0) { + if (zoomOut || this._presElementsMappings.get(docAtCurrent)!.showButton) { + let prevScale = NumCast(this._childrenDocs[prevSelected].viewScale, null); + let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[current]); + if (prevScale !== undefined && prevScale !== curScale) { + DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + } } } + this.gotoDocument(prevSelected, current); } - this.gotoDocument(prevSelected, current); - } /** @@ -176,21 +127,21 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? * Hide Until Presented, Hide After Presented, Fade After Presented */ showAfterPresented = (index: number) => { - this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + this._presElementsMappings.forEach((presElem, doc) => { //the order of cases is aligned based on priority if (presElem.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(key) <= index) { - key.opacity = 1; + if (this._childrenDocs.indexOf(doc) <= index) { + doc.opacity = 1; } } if (presElem.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0; + if (this._childrenDocs.indexOf(doc) < index) { + doc.opacity = 0; } } if (presElem.props.document.fadeButton) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0.5; + if (this._childrenDocs.indexOf(doc) < index) { + doc.opacity = 0.5; } } }); @@ -202,21 +153,21 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? * Hide Until Presented, Hide After Presented, Fade After Presented */ hideIfNotPresented = (index: number) => { - this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + this._presElementsMappings.forEach((presElem, key) => { //the order of cases is aligned based on priority if (presElem.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(key) >= index) { + if (this._childrenDocs.indexOf(key) >= index) { key.opacity = 1; } } if (presElem.props.document.fadeButton) { - if (this.childrenDocs.indexOf(key) >= index) { + if (this._childrenDocs.indexOf(key) >= index) { key.opacity = 1; } } if (presElem.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(key) > index) { + if (this._childrenDocs.indexOf(key) > index) { key.opacity = 0; } } @@ -229,26 +180,25 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? * te option open, navigates to that element. */ navigateToElement = async (curDoc: Doc, fromDoc: number) => { - let docToJump: Doc = curDoc; - let willZoom: boolean = false; - + let docToJump = curDoc; + let willZoom = false; - let presDocs = DocListCast(this.curPresentation.data); + let presDocs = DocListCast(this.props.Document.data); let nextSelected = presDocs.indexOf(curDoc); let currentDocGroups: Doc[] = []; for (; nextSelected < presDocs.length - 1; nextSelected++) { - if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { + if (!this._presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { break; } currentDocGroups.push(presDocs[nextSelected]); } currentDocGroups.forEach((doc: Doc, index: number) => { - if (this.presElementsMappings.get(doc)!.navButton) { + if (this._presElementsMappings.get(doc)!.navButton) { docToJump = doc; willZoom = false; } - if (this.presElementsMappings.get(doc)!.showButton) { + if (this._presElementsMappings.get(doc)!.showButton) { docToJump = doc; willZoom = true; } @@ -257,24 +207,23 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? //docToJump stayed same meaning, it was not in the group or was the last element in the group if (docToJump === curDoc) { //checking if curDoc has navigation open - if (this.presElementsMappings.get(curDoc)!.navButton) { + if (this._presElementsMappings.get(curDoc)!.navButton) { DocumentManager.Instance.jumpToDocument(curDoc, false); - } else if (this.presElementsMappings.get(curDoc)!.showButton) { - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + } else if (this._presElementsMappings.get(curDoc)!.showButton) { + let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[fromDoc]); //awaiting jump so that new scale can be found, since jumping is async await DocumentManager.Instance.jumpToDocument(curDoc, true); - let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); - curDoc.viewScale = newScale; + curDoc.viewScale = DocumentManager.Instance.getScaleOfDocView(curDoc); //saving the scale user was on before zooming in if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; + this._childrenDocs[fromDoc].viewScale = curScale; } } return; } - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[fromDoc]); //awaiting jump so that new scale can be found, since jumping is async await DocumentManager.Instance.jumpToDocument(docToJump, willZoom); @@ -282,7 +231,7 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? curDoc.viewScale = newScale; //saving the scale that user was on if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; + this._childrenDocs[fromDoc].viewScale = curScale; } } @@ -291,18 +240,13 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? * Async function that supposedly return the doc that is located at given index. */ getDocAtIndex = async (index: number) => { - const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (!list) { - return undefined; - } - if (index < 0 || index >= list.length) { - return undefined; + const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + if (list && index >= 0 && index < list.length) { + this.props.Document.selectedDoc = index; + //awaiting async call to finish to get Doc instance + return await list[index]; } - - this.curPresentation.selectedDoc = index; - //awaiting async call to finish to get Doc instance - const doc = await list[index]; - return doc; + return undefined } /** @@ -311,23 +255,19 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? */ @action public RemoveDoc = async (index: number) => { - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); // don't replace with DocListCast -- we need to modify the document's actual stored list if (value) { - let removedDoc = await value.splice(index, 1)[0]; - - //removing the Presentation Element stored for it - this.presElementsMappings.delete(removedDoc); - + //removing the Presentation Element from the document and update mappings + this._presElementsMappings.delete(await value.splice(index, 1)[0]); } } public removeDocByRef = (doc: Doc) => { - let indexOfDoc = this.childrenDocs.indexOf(doc); - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + let indexOfDoc = this._childrenDocs.indexOf(doc); + const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (value) { value.splice(indexOfDoc, 1)[0]; } - //this.RemoveDoc(indexOfDoc, true); if (indexOfDoc !== - 1) { return true; } @@ -339,144 +279,92 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? @action public gotoDocument = async (index: number, fromDoc: number) => { Doc.UnBrushAllDocs(); - const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (!list) { - return; - } - if (index < 0 || index >= list.length) { - return; - } - this.curPresentation.selectedDoc = index; + const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + if (list && index >= 0 && index < list.length) { + this.props.Document.selectedDoc = index; - if (!this.presStatus) { - this.presStatus = true; - this.startPresentation(index); - } + if (!this.props.Document.presStatus) { + this.props.Document.presStatus = true; + this.startPresentation(index); + } - const doc = await list[index]; - if (this.presStatus) { - this.navigateToElement(doc, fromDoc); - this.hideIfNotPresented(index); - this.showAfterPresented(index); + const doc = await list[index]; + if (this.props.Document.presStatus) { + this.navigateToElement(doc, fromDoc); + this.hideIfNotPresented(index); + this.showAfterPresented(index); + } } } //Function that sets the store of the children docs. @action setChildrenDocs = (docList: Doc[]) => { - this.childrenDocs = docList; + this._childrenDocs = docList; } //The function that is called to render the play or pause button depending on //if presentation is running or not. renderPlayPauseButton = () => { - if (this.presStatus) { - return <button title="Reset Presentation" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>; - } else { - return <button title="Start Presentation From Start" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>; - } + return <button title={"Reset Presentation" + this.props.Document.presStatus ? "" : " From Start"} className="presentation-button" onClick={this.startOrResetPres}> + <FontAwesomeIcon icon={this.props.Document.presStatus ? "stop" : "play"} /> + </button>; } //The function that starts or resets presentaton functionally, depending on status flag. @action startOrResetPres = () => { - if (this.presStatus) { + if (this.props.Document.presStatus) { this.resetPresentation(); } else { - this.presStatus = true; + this.props.Document.presStatus = true; this.startPresentation(0); - const current = NumCast(this.curPresentation.selectedDoc); - this.gotoDocument(0, current); + this.gotoDocument(0, NumCast(this.props.Document.selectedDoc)); } - this.curPresentation.presStatus = this.presStatus; } //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. @action resetPresentation = () => { - this.childrenDocs.forEach((doc: Doc) => { + this._childrenDocs.forEach((doc: Doc) => { doc.opacity = 1; doc.viewScale = 1; }); - this.curPresentation.selectedDoc = 0; - this.presStatus = false; - this.curPresentation.presStatus = this.presStatus; - if (this.childrenDocs.length === 0) { - return; + this.props.Document.selectedDoc = 0; + this.props.Document.presStatus = false; + if (this._childrenDocs.length !== 0) { + DocumentManager.Instance.zoomIntoScale(this._childrenDocs[0], 1); } - DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); } - //The function that starts the presentation, also checking if actions should be applied //directly at start. startPresentation = (startIndex: number) => { - this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { + this._presElementsMappings.forEach((component, doc) => { if (component.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(doc) > startIndex) { + if (this._childrenDocs.indexOf(doc) > startIndex) { doc.opacity = 0; } - } if (component.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(doc) < startIndex) { + if (this._childrenDocs.indexOf(doc) < startIndex) { doc.opacity = 0; } } if (component.props.document.fadeButton) { - if (this.childrenDocs.indexOf(doc) < startIndex) { + if (this._childrenDocs.indexOf(doc) < startIndex) { doc.opacity = 0.5; } } - }); - - } - - - /** - * The function that is called to render either select for presentations, or title inputting. - */ - renderSelectOrPresSelection = () => { - if (this.PresTitleInputOpen || this.PresTitleChangeOpen) { - return <input ref={(e) => this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; - } else { - return (null); - } - } - - /** - * The function that is called on enter press of title input. It gives the - * new presentation the title user entered. If nothing is entered, gives a default title. - */ - @action - submitPresentationTitle = (e: React.KeyboardEvent) => { - if (e.keyCode === 13) { - let presTitle = this.titleInputElement!.value; - this.titleInputElement!.value = ""; - if (this.PresTitleChangeOpen) { - this.PresTitleChangeOpen = false; - this.changePresentationTitle(presTitle); - } - } - } - /** - * The function that is called to change title of presentation to what user entered. - */ - @undoBatch - changePresentationTitle = (newTitle: string) => { - if (newTitle === "") { - return; - } - this.curPresentation.title = newTitle; } addPressElem = (keyDoc: Doc, elem: PresentationElement) => { - this.presElementsMappings.set(keyDoc, elem); + this._presElementsMappings.set(keyDoc, elem); } minimize = undoBatch(action(() => { - this.presMode = true; + this._presMode = true; this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close"); })); @@ -485,12 +373,10 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? } render() { - - let width = "100%"; //NumCast(this.curPresentation.width) return ( - <div className="presentationView-cont" onPointerEnter={action(() => !this.persistOpacity && (this.opacity = 1))} onContextMenu={this.specificContextMenu} - onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} - style={{ width: width, opacity: this.opacity, }}> + <div className="presentationView-cont" onPointerEnter={action(() => !this._persistOpacity && (this._opacity = 1))} onContextMenu={this.specificContextMenu} + onPointerLeave={action(() => !this._persistOpacity && (this._opacity = 0.4))} + style={{ width: "100%", opacity: this._opacity, }}> <div className="presentation-buttons"> <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button> {this.renderPlayPauseButton()} @@ -500,28 +386,26 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? <input type="checkbox" onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { - this.persistOpacity = e.target.checked; - this.opacity = this.persistOpacity ? 1 : 0.4; + this._persistOpacity = e.target.checked; + this._opacity = this._persistOpacity ? 1 : 0.4; })} - checked={this.persistOpacity} + checked={this._persistOpacity} style={{ position: "absolute", bottom: 5, left: 5 }} - onPointerEnter={action(() => this.labelOpacity = 1)} - onPointerLeave={action(() => this.labelOpacity = 0)} + onPointerEnter={action(() => this._labelOpacity = 1)} + onPointerLeave={action(() => this._labelOpacity = 0)} /> - <p style={{ position: "absolute", bottom: 1, left: 22, opacity: this.labelOpacity, transition: "0.7s opacity ease" }}>opacity {this.persistOpacity ? "persistent" : "on focus"}</p> + <p style={{ position: "absolute", bottom: 1, left: 22, opacity: this._labelOpacity, transition: "0.7s opacity ease" }}>opacity {this._persistOpacity ? "persistent" : "on focus"}</p> <PresentationViewList - mainDocument={this.curPresentation} + mainDocument={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} - PresElementsMappings={this.presElementsMappings} + PresElementsMappings={this._presElementsMappings} setChildrenDocs={this.setChildrenDocs} - presStatus={this.presStatus} + presStatus={BoolCast(this.props.Document.presStatus)} removeDocByRef={this.removeDocByRef} - clearElemMap={() => this.presElementsMappings.clear()} + clearElemMap={() => this._presElementsMappings.clear()} /> </div> ); } - - }
\ No newline at end of file diff --git a/src/client/views/presentationview/PresentationModeMenu.tsx b/src/client/views/presentationview/PresentationModeMenu.tsx index 0dd2b7731..e4123a1fe 100644 --- a/src/client/views/presentationview/PresentationModeMenu.tsx +++ b/src/client/views/presentationview/PresentationModeMenu.tsx @@ -98,8 +98,4 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> { </div > ); } - - - - }
\ No newline at end of file |