diff options
Diffstat (limited to 'src/client/views/nodes/PresBox.tsx')
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 531 |
1 files changed, 192 insertions, 339 deletions
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index e376fbddb..15fafb022 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,21 +2,23 @@ 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, computed, reaction, IReactionDisposer } 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 { listSpec } from "../../../new_fields/Schema"; -import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils } from "../../../Utils"; +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 PresentationElement from "../presentationview/PresentationElement"; -import PresentationViewList from "../presentationview/PresentationList"; -import "../presentationview/PresentationView.scss"; -import { FieldView, FieldViewProps } from './FieldView'; +import { CollectionViewType } from "../collections/CollectionBaseView"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionView } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; +import { FieldView, FieldViewProps } from './FieldView'; +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); @@ -27,149 +29,90 @@ 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(); - //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 public static CurrentPresentation: PresBox; - - //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; - } + _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({ backgroundColor: "transparent" }); + Doc.GetProto(pinDoc).presentationTargetDoc = item; + Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.presentationTargetDoc instanceof Doc) && this.presentationTargetDoc.title.toString()'); + value.splice(i, 1, pinDoc); + } + }); + } + }); } - //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(); + componentWillUnmount() { + this._docListChangedReaction && this._docListChangedReaction(); } + @computed get childDocs() { return DocListCast(this.props.Document[this.props.fieldKey]); } - /** - * 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[this.props.fieldKey]); + 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 (!presDocs[nextSelected + 1].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; + let presDocs = await DocListCastAsync(this.props.Document[this.props.fieldKey]); + let currentsArray: Doc[] = []; + for (; presDocs && prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) { + currentsArray.push(presDocs[prevSelected]); } - }); - + prevSelected = Math.max(0, prevSelected - 1); - // 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) { - if (prevScale !== curScale) { + //checking if any of the group members had used zooming in + currentsArray.forEach((doc: Doc) => { + if (doc.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 || docAtCurrent.showButton) { + let prevScale = NumCast(this.childDocs[prevSelected].viewScale, null); + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childDocs[current]); + if (prevScale !== undefined && prevScale !== curScale) { DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); } } } + this.gotoDocument(prevSelected, current); } - this.gotoDocument(prevSelected, current); - } /** @@ -178,22 +121,16 @@ 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.childDocs.forEach((doc, ind) => { //the order of cases is aligned based on priority - if (presElem.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(key) <= index) { - key.opacity = 1; - } + if (doc.hideTillShownButton && ind <= index) { + (doc.presentationTargetDoc as Doc).opacity = 1; } - if (presElem.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0; - } + if (doc.hideAfterButton && ind < index) { + (doc.presentationTargetDoc as Doc).opacity = 0; } - if (presElem.props.document.fadeButton) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0.5; - } + if (doc.fadeButton && ind < index) { + (doc.presentationTargetDoc as Doc).opacity = 0.5; } }); } @@ -204,23 +141,17 @@ 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.childDocs.forEach((key, ind) => { //the order of cases is aligned based on priority - if (presElem.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(key) >= index) { - key.opacity = 1; - } + if (key.hideAfterButton && ind >= index) { + (key.presentationTargetDoc as Doc).opacity = 1; } - if (presElem.props.document.fadeButton) { - if (this.childrenDocs.indexOf(key) >= index) { - key.opacity = 1; - } + if (key.fadeButton && ind >= index) { + (key.presentationTargetDoc as Doc).opacity = 1; } - if (presElem.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(key) > index) { - key.opacity = 0; - } + if (key.hideTillShownButton && ind > index) { + (key.presentationTargetDoc as Doc).opacity = 0; } }); } @@ -230,27 +161,27 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps? * has the option open and last in the group. If not in the group, and it has * te option open, navigates to that element. */ - navigateToElement = async (curDoc: Doc, fromDoc: number) => { - let docToJump: Doc = curDoc; - let willZoom: boolean = false; - + navigateToElement = async (curDoc: Doc, fromDocIndex: number) => { + let fromDoc = this.childDocs[fromDocIndex].presentationTargetDoc as Doc; + let docToJump = curDoc; + let willZoom = false; - let presDocs = DocListCast(this.curPresentation.data); + let presDocs = DocListCast(this.props.Document[this.props.fieldKey]); 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 (!presDocs[nextSelected + 1].groupButton) { break; } currentDocGroups.push(presDocs[nextSelected]); } currentDocGroups.forEach((doc: Doc, index: number) => { - if (this.presElementsMappings.get(doc)!.navButton) { + if (doc.navButton) { docToJump = doc; willZoom = false; } - if (this.presElementsMappings.get(doc)!.showButton) { + if (doc.showButton) { docToJump = doc; willZoom = true; } @@ -259,32 +190,32 @@ 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) { - DocumentManager.Instance.jumpToDocument(curDoc, false); - } else if (this.presElementsMappings.get(curDoc)!.showButton) { - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + let target = await curDoc.presentationTargetDoc as Doc; + if (curDoc.navButton) { + DocumentManager.Instance.jumpToDocument(target, false); + } else if (curDoc.showButton) { + let curScale = DocumentManager.Instance.getScaleOfDocView(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; + await DocumentManager.Instance.jumpToDocument(target, true); + curDoc.viewScale = DocumentManager.Instance.getScaleOfDocView(target); //saving the scale user was on before zooming in if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; + fromDoc.viewScale = curScale; } } return; } - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + let curScale = DocumentManager.Instance.getScaleOfDocView(fromDoc); //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(docToJump, willZoom); - let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); + await DocumentManager.Instance.jumpToDocument(await docToJump.presentationTargetDoc as Doc, willZoom); + let newScale = DocumentManager.Instance.getScaleOfDocView(await curDoc.presentationTargetDoc as Doc); curDoc.viewScale = newScale; //saving the scale that user was on if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; + fromDoc.viewScale = curScale; } } @@ -293,45 +224,25 @@ 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; + const list = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); + if (list && index >= 0 && index < list.length) { + this.props.Document.selectedDoc = index; + //awaiting async call to finish to get Doc instance + return list[index]; } - if (index < 0 || index >= list.length) { - return undefined; - } - - this.curPresentation.selectedDoc = index; - //awaiting async call to finish to get Doc instance - const doc = await list[index]; - return doc; + return undefined; } - /** - * The function that removes a doc from a presentation. It also makes sure to - * do necessary updates to backUps and mappings stored locally. - */ - @action - public RemoveDoc = async (index: number) => { - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (value) { - let removedDoc = await value.splice(index, 1)[0]; - - //removing the Presentation Element stored for it - this.presElementsMappings.delete(removedDoc); - } - } - - public removeDocByRef = (doc: Doc) => { - let indexOfDoc = this.childrenDocs.indexOf(doc); - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + @undoBatch + public removeDocument = (doc: Doc) => { + const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); if (value) { - value.splice(indexOfDoc, 1)[0]; - } - //this.RemoveDoc(indexOfDoc, true); - if (indexOfDoc !== - 1) { - return true; + let indexOfDoc = value.indexOf(doc); + if (indexOfDoc !== - 1) { + value.splice(indexOfDoc, 1)[0]; + return true; + } } return false; } @@ -341,189 +252,131 @@ 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; - - if (!this.presStatus) { - this.presStatus = true; - this.startPresentation(index); - } + const list = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); + if (list && index >= 0 && index < list.length) { + this.props.Document.selectedDoc = index; - const doc = await list[index]; - if (this.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; - } + if (!this.props.Document.presStatus) { + this.props.Document.presStatus = true; + this.startPresentation(index); + } - //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>; + const doc = await list[index]; + if (this.props.Document.presStatus) { + this.navigateToElement(doc, fromDoc); + this.hideIfNotPresented(index); + this.showAfterPresented(index); + } } } //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.childDocs.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.childDocs.length !== 0) { + DocumentManager.Instance.zoomIntoScale(this.childDocs[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) => { - if (component.props.document.hideTillShownButton) { - if (this.childrenDocs.indexOf(doc) > startIndex) { - doc.opacity = 0; - } - + this.childDocs.map(doc => { + if (doc.hideTillShownButton && this.childDocs.indexOf(doc) > startIndex) { + doc.opacity = 0; } - if (component.props.document.hideAfterButton) { - if (this.childrenDocs.indexOf(doc) < startIndex) { - doc.opacity = 0; - } + if (doc.hideAfterButton && this.childDocs.indexOf(doc) < startIndex) { + doc.opacity = 0; } - if (component.props.document.fadeButton) { - if (this.childrenDocs.indexOf(doc) < startIndex) { - doc.opacity = 0.5; - } + if (doc.fadeButton && this.childDocs.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} />; + toggleMinimize = undoBatch(action((e: React.PointerEvent) => { + if (this.props.Document.inOverlay) { + Doc.RemoveDocFromList((CurrentUserUtils.UserDocument.overlays as Doc), this.props.fieldKey, this.props.Document); + CollectionDockingView.AddRightSplit(this.props.Document, this.props.DataDoc); + this.props.Document.inOverlay = false; } else { - return (null); + 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), this.props.fieldKey, this.props.Document); } + })); + + specificContextMenu = (e: React.MouseEvent): void => { + ContextMenu.Instance.addItem({ description: "Make Current Presentation", event: action(() => Doc.UserDoc().curPresentation = this.props.Document), icon: "asterisk" }); } /** - * 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. + * Initially every document starts with a viewScale 1, which means + * that they will be displayed in a canvas with scale 1. */ @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); + 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.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; } - } - } - /** - * 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); + }); } - minimize = undoBatch(action(() => { - this.presMode = true; - this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close"); - })); - specificContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ description: "Make Current Presentation", event: action(() => Doc.UserDoc().curPresentation = this.props.Document), icon: "asterisk" }); + selectElement = (doc: Doc) => { + let index = DocListCast(this.props.Document[this.props.fieldKey]).indexOf(doc); + 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() { - - let width = "100%"; //NumCast(this.curPresentation.width) + this.initializeScaleViews(this.childDocs, NumCast(this.props.Document.viewType)); 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="presentation-buttons"> - <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button> - {this.renderPlayPauseButton()} - <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button> - <button title="Minimize" className="presentation-button" onClick={this.minimize}><FontAwesomeIcon icon={"eye"} /></button> + <div className="presBox-cont" onContextMenu={this.specificContextMenu}> + <div className="presBox-buttons"> + <button className="presBox-button" title="Back" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button> + <button className="presBox-button" title={"Reset Presentation" + this.props.Document.presStatus ? "" : " From Start"} onClick={this.startOrResetPres}> + <FontAwesomeIcon icon={this.props.Document.presStatus ? "stop" : "play"} /> + </button> + <button className="presBox-button" title="Next" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button> + <button className="presBox-button" title={this.props.Document.inOverlay ? "Expand" : "Minimize"} onClick={this.toggleMinimize}><FontAwesomeIcon icon={"eye"} /></button> </div> - <input - type="checkbox" - onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { - this.persistOpacity = e.target.checked; - this.opacity = this.persistOpacity ? 1 : 0.4; - })} - checked={this.persistOpacity} - style={{ position: "absolute", bottom: 5, left: 5 }} - 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> - <PresentationViewList - mainDocument={this.curPresentation} - deleteDocument={this.RemoveDoc} - gotoDocument={this.gotoDocument} - PresElementsMappings={this.presElementsMappings} - setChildrenDocs={this.setChildrenDocs} - presStatus={this.presStatus} - removeDocByRef={this.removeDocByRef} - clearElemMap={() => this.presElementsMappings.clear()} - /> + {this.props.Document.inOverlay ? (null) : + <div className="presBox-listCont" > + <CollectionView {...this.props} focus={this.selectElement} ScreenToLocalTransform={this.getTransform} /> + </div> + } </div> ); } - - }
\ No newline at end of file |