From c541acbdfc7ec66522409beeebce5f33b340273f Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Tue, 4 Jun 2019 14:07:20 -0400 Subject: move computers --- src/client/views/PresentationView.scss | 4 ++++ src/client/views/PresentationView.tsx | 6 ++++++ 2 files changed, 10 insertions(+) (limited to 'src') diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss index fb4a851c4..97ce80a02 100644 --- a/src/client/views/PresentationView.scss +++ b/src/client/views/PresentationView.scss @@ -53,6 +53,10 @@ float: right; } +.presentation-interaction { + float: left; +} + .presentationView-name { font-size: 15px; display: inline-block; diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx index 9d5798ff1..b6e0f0889 100644 --- a/src/client/views/PresentationView.tsx +++ b/src/client/views/PresentationView.tsx @@ -58,6 +58,12 @@ class PresentationViewList extends React.Component { {`${index + 1}. ${title}`} +

+ + + + + ); -- cgit v1.2.3-70-g09d2 From 464096297d34bb824ed665aa50dfb58f268c1d12 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 4 Jun 2019 20:01:59 -0400 Subject: BUttons in Presentation CSSed and grouping up insertion done, removal almost done --- src/client/views/MainView.tsx | 2 +- src/client/views/PresentationView.scss | 83 --------- src/client/views/PresentationView.tsx | 165 ----------------- src/client/views/nodes/DocumentView.tsx | 2 +- .../views/presentationview/PresentationElement.tsx | 115 ++++++++++++ .../views/presentationview/PresentationView.scss | 88 +++++++++ .../views/presentationview/PresentationView.tsx | 203 +++++++++++++++++++++ 7 files changed, 408 insertions(+), 250 deletions(-) delete mode 100644 src/client/views/PresentationView.scss delete mode 100644 src/client/views/PresentationView.tsx create mode 100644 src/client/views/presentationview/PresentationElement.tsx create mode 100644 src/client/views/presentationview/PresentationView.scss create mode 100644 src/client/views/presentationview/PresentationView.tsx (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a093ffdec..c98e6e8fb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -14,7 +14,7 @@ import { Docs } from '../documents/Documents'; import { SetupDrag, DragManager } from '../util/DragManager'; import { Transform } from '../util/Transform'; import { UndoManager } from '../util/UndoManager'; -import { PresentationView } from './PresentationView'; +import { PresentationView } from './presentationview/PresentationView'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { ContextMenu } from './ContextMenu'; import { DocumentDecorations } from './DocumentDecorations'; diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss deleted file mode 100644 index 97ce80a02..000000000 --- a/src/client/views/PresentationView.scss +++ /dev/null @@ -1,83 +0,0 @@ -.presentationView-cont { - position: absolute; - background: white; - z-index: 1; - box-shadow: #AAAAAA .2vw .2vw .4vw; - right: 0; - top: 0; - bottom: 0; -} - -.presentationView-item { - padding: 10px; - display: inline-block; - width: 100%; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: all .1s; -} - -.presentationView-listCont { - padding-left: 10px; - padding-right: 10px; -} - -.presentationView-item:hover { - transition: all .1s; - background: #AAAAAA -} - -.presentationView-selected { - background: gray; -} - -.presentationView-heading { - background: lightseagreen; - padding: 10px; - display: inline-block; - width: 100%; -} - -.presentationView-title { - padding-top: 3px; - padding-bottom: 3px; - font-size: 25px; - display: inline-block; -} - -.presentation-icon { - float: right; -} - -.presentation-interaction { - float: left; -} - -.presentationView-name { - font-size: 15px; - display: inline-block; -} - -.presentation-button { - margin-right: 12.5%; - margin-left: 12.5%; - width: 25%; -} - -.presentation-buttons { - padding: 10px; -} - -.presentation-next:hover { - transition: all .1s; - background: #AAAAAA -} - -.presentation-back:hover { - transition: all .1s; - background: #AAAAAA -} \ No newline at end of file diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx deleted file mode 100644 index b6e0f0889..000000000 --- a/src/client/views/PresentationView.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { observer } from "mobx-react"; -import React = require("react"); -import { observable, action, runInAction, reaction } from "mobx"; -import "./PresentationView.scss"; -import { DocumentManager } from "../util/DocumentManager"; -import { Utils } from "../../Utils"; -import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc"; -import { listSpec } from "../../new_fields/Schema"; -import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../new_fields/Types"; -import { Id } from "../../new_fields/FieldSymbols"; -import { List } from "../../new_fields/List"; -import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; - -export interface PresViewProps { - Document: Doc; -} - -interface PresListProps extends PresViewProps { - deleteDocument(index: number): void; - gotoDocument(index: number): void; -} - - -@observer -/** - * Component that takes in a document prop and a boolean whether it's collapsed or not. - */ -class PresentationViewList extends React.Component { - - - /** - * Renders a single child document. It will just append a list element. - * @param document The document to render. - */ - renderChild = (document: Doc, index: number) => { - let title = document.title; - - //to get currently selected presentation doc - let selected = NumCast(this.props.Document.selectedDoc, 0); - - let className = "presentationView-item"; - if (selected === index) { - //this doc is selected - className += " presentationView-selected"; - } - let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; } - let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; } - return ( -
{ this.props.gotoDocument(index); e.stopPropagation(); }}> - - {`${index + 1}. ${title}`} - - -

- - - - - -
- ); - - } - - render() { - const children = DocListCast(this.props.Document.data); - - return ( -
- {children.map(this.renderChild)} -
- ); - } -} - - -@observer -export class PresentationView extends React.Component { - public static Instance: PresentationView; - - //observable means render is re-called every time variable is changed - @observable - collapsed: boolean = false; - closePresentation = action(() => this.props.Document.width = 0); - next = () => { - const current = NumCast(this.props.Document.selectedDoc); - this.gotoDocument(current + 1); - - } - back = () => { - const current = NumCast(this.props.Document.selectedDoc); - this.gotoDocument(current - 1); - } - - @action - public RemoveDoc = (index: number) => { - const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); - if (value) { - value.splice(index, 1); - } - } - - public gotoDocument = async (index: number) => { - const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); - if (!list) { - return; - } - if (index < 0 || index >= list.length) { - return; - } - - this.props.Document.selectedDoc = index; - const doc = await list[index]; - DocumentManager.Instance.jumpToDocument(doc); - } - - //initilize class variables - constructor(props: PresViewProps) { - super(props); - PresentationView.Instance = this; - } - - /** - * Adds a document to the presentation view - **/ - @action - public PinDoc(doc: Doc) { - //add this new doc to props.Document - const data = Cast(this.props.Document.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - this.props.Document.data = new List([doc]); - } - - this.props.Document.width = 300; - } - - render() { - let titleStr = StrCast(this.props.Document.title); - let width = NumCast(this.props.Document.width); - - //TODO: next and back should be icons - return ( -
-
-
{titleStr}
- -
-
- - -
- -
- ); - } -} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 7750b9173..984cac9b9 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -23,7 +23,7 @@ import { CollectionVideoView } from "../collections/CollectionVideoView"; import { CollectionView } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; import { DocComponent } from "../DocComponent"; -import { PresentationView } from "../PresentationView"; +import { PresentationView } from "../presentationview/PresentationView"; import { Template } from "./../Templates"; import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx new file mode 100644 index 000000000..02d97ee4d --- /dev/null +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -0,0 +1,115 @@ +import { observer } from "mobx-react"; +import React = require("react"); +import { Doc } from "../../../new_fields/Doc"; +import { NumCast, BoolCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { observable, action } from "mobx"; +import "./PresentationView.scss"; + + + +interface PresentationElementProps { + mainDocument: Doc; + document: Doc; + index: number; + deleteDocument(index: number): void; + gotoDocument(index: number): void; + groupedMembers: [Doc[]]; + allListElements: Doc[]; + +} + +@observer +export default class PresentationElement extends React.Component { + + @observable selectedButtons: boolean[] = new Array(6); + + + @action + onGroupClick = (document: Doc, index: number, buttonStatus: boolean[] | boolean) => { + let p = this.props; + if (Array.isArray(buttonStatus)) { + if (buttonStatus[5]) { + buttonStatus[5] = false; + console.log("Reached!"); + if (index >= 1) { + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1)); + } + } + } else { + buttonStatus[5] = true; + if (index >= 1) { + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1].push(doc)); + } + p.groupedMembers[index - 1].push(document); + //this.onGroupClick() + } + } + } else { + if (!buttonStatus) { + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1)); + } + } else { + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } }); + } + if (!p.groupedMembers[index - 1].includes(document)) { + p.groupedMembers[index - 1].push(document); + } + } + } + if (index >= 2) { + this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 0); + } + + p.groupedMembers.forEach((docArray: Doc[], index: number) => console.log("Index: ", index, " size: ", docArray.length)); + console.log("Group Size: ", p.groupedMembers[index - 1].length); + } + + + + render() { + let p = this.props; + let title = p.document.title; + + //to get currently selected presentation doc + let selected = NumCast(p.mainDocument.selectedDoc, 0); + + let className = "presentationView-item"; + if (selected === p.index) { + //this doc is selected + className += " presentationView-selected"; + } + let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; } + let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; } + return ( +
{ p.gotoDocument(p.index); e.stopPropagation(); }}> + + {`${p.index + 1}. ${title}`} + + +

+ + + + + + + +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss new file mode 100644 index 000000000..07c3e69fd --- /dev/null +++ b/src/client/views/presentationview/PresentationView.scss @@ -0,0 +1,88 @@ +.presentationView-cont { + position: absolute; + background: white; + z-index: 1; + box-shadow: #AAAAAA .2vw .2vw .4vw; + right: 0; + top: 0; + bottom: 0; +} + +.presentationView-item { + padding: 10px; + display: inline-block; + width: 100%; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: all .1s; +} + +.presentationView-listCont { + padding-left: 10px; + padding-right: 10px; +} + +.presentationView-item:hover { + transition: all .1s; + background: #AAAAAA +} + +.presentationView-selected { + background: gray; +} + +.presentationView-heading { + background: lightseagreen; + padding: 10px; + display: inline-block; + width: 100%; +} + +.presentationView-title { + padding-top: 3px; + padding-bottom: 3px; + font-size: 25px; + display: inline-block; +} + +.presentation-icon { + float: right; +} + +.presentation-interaction { + float: left; +} + +.presentation-interaction-selected { + background: #505050; + float: left; +} + +.presentationView-name { + font-size: 15px; + display: inline-block; +} + +.presentation-button { + margin-right: 12.5%; + margin-left: 12.5%; + width: 25%; +} + +.presentation-buttons { + padding: 10px; +} + +.presentation-next:hover { + transition: all .1s; + background: #AAAAAA +} + +.presentation-back:hover { + transition: all .1s; + background: #AAAAAA +} \ No newline at end of file diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx new file mode 100644 index 000000000..5a7d38e28 --- /dev/null +++ b/src/client/views/presentationview/PresentationView.tsx @@ -0,0 +1,203 @@ +import { observer } from "mobx-react"; +import React = require("react"); +import { observable, action, runInAction, reaction } from "mobx"; +import "./PresentationView.scss"; +import { DocumentManager } from "../../util/DocumentManager"; +import { Utils } from "../../../Utils"; +import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; +import { listSpec } from "../../../new_fields/Schema"; +import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { List } from "../../../new_fields/List"; +import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; +import PresentationElement from "./PresentationElement"; + +export interface PresViewProps { + Document: Doc; +} + +interface PresListProps extends PresViewProps { + deleteDocument(index: number): void; + gotoDocument(index: number): void; + groupedMembers: [Doc[]]; + +} + + +@observer +/** + * Component that takes in a document prop and a boolean whether it's collapsed or not. + */ +class PresentationViewList extends React.Component { + + + // onGroupClick = (document: Doc, index: number, buttonStatus: boolean[]) => { + // if (buttonStatus[5]) { + // buttonStatus[5] = false; + // if (index >= 1) { + // if (this.groupedMembers[index].length >= 0) { + // this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].slice(this.groupedMembers[index - 1].indexOf(doc), 1)); + // } + // } + // } else { + // buttonStatus[5] = true; + // console.log("reached!! ", buttonStatus[5]); + // if (index >= 1) { + // if (this.groupedMembers[index].length >= 0) { + // this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].push(doc)); + // } + // this.groupedMembers[index - 1].push(document); + // } + // } + // } + @action + initializeGroupArrays = (docList: Doc[]) => { + docList.forEach((doc: Doc, index: number) => { + if (this.props.groupedMembers.length < index + 1) { + this.props.groupedMembers[index] = new Array(); + } + }); + } + + // /** + // * Renders a single child document. It will just append a list element. + // * @param document The document to render. + // */ + // renderChild = (document: Doc, index: number) => { + // let title = document.title; + + // //to get currently selected presentation doc + // let selected = NumCast(this.props.Document.selectedDoc, 0); + + // let className = "presentationView-item"; + // if (selected === index) { + // //this doc is selected + // className += " presentationView-selected"; + // } + // let selectedButtons: boolean[] = new Array(6); + // let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; } + // let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; } + // return ( + //
{ this.props.gotoDocument(index); e.stopPropagation(); }}> + // + // {`${index + 1}. ${title}`} + // + // + //

+ // + // + // + // + // + // + + //
+ // ); + + // } + + render() { + const children = DocListCast(this.props.Document.data); + this.initializeGroupArrays(children); + + return ( +
+ {children.map((doc: Doc, index: number) => )} +
+ ); + } +} + + +@observer +export class PresentationView extends React.Component { + public static Instance: PresentationView; + + @observable groupedMembers: [Doc[]] = [[]]; + + + //observable means render is re-called every time variable is changed + @observable + collapsed: boolean = false; + closePresentation = action(() => this.props.Document.width = 0); + next = () => { + const current = NumCast(this.props.Document.selectedDoc); + this.gotoDocument(current + 1); + + } + back = () => { + const current = NumCast(this.props.Document.selectedDoc); + this.gotoDocument(current - 1); + } + + @action + public RemoveDoc = (index: number) => { + const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + if (value) { + value.splice(index, 1); + } + } + + public gotoDocument = async (index: number) => { + const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + if (!list) { + return; + } + if (index < 0 || index >= list.length) { + return; + } + + this.props.Document.selectedDoc = index; + const doc = await list[index]; + DocumentManager.Instance.jumpToDocument(doc); + } + + //initilize class variables + constructor(props: PresViewProps) { + super(props); + PresentationView.Instance = this; + } + + /** + * Adds a document to the presentation view + **/ + @action + public PinDoc(doc: Doc) { + //add this new doc to props.Document + const data = Cast(this.props.Document.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + this.props.Document.data = new List([doc]); + } + + this.props.Document.width = 300; + } + + render() { + let titleStr = StrCast(this.props.Document.title); + let width = NumCast(this.props.Document.width); + + //TODO: next and back should be icons + return ( +
+
+
{titleStr}
+ +
+
+ + +
+ +
+ ); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From efce6bf5ad2de96c8d4ee688ce0083608ecb541e Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 5 Jun 2019 14:29:38 -0400 Subject: Grouping done, insertion order should be checked --- .../views/presentationview/PresentationElement.tsx | 106 +++++++++++++++++++-- .../views/presentationview/PresentationView.tsx | 5 +- 2 files changed, 103 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 02d97ee4d..4d7f07154 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -41,14 +41,17 @@ export default class PresentationElement extends React.Component= 1) { if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1].push(doc)); + p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } }); + } + if (!p.groupedMembers[index - 1].includes(document)) { + p.groupedMembers[index - 1].push(document); } - p.groupedMembers[index - 1].push(document); //this.onGroupClick() } } } else { if (!buttonStatus) { + console.log("U reached me!"); if (p.groupedMembers[index].length >= 0) { p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1)); } @@ -62,11 +65,98 @@ export default class PresentationElement extends React.Component= 2) { - this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 0); + this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 1); } p.groupedMembers.forEach((docArray: Doc[], index: number) => console.log("Index: ", index, " size: ", docArray.length)); - console.log("Group Size: ", p.groupedMembers[index - 1].length); + console.log("Group Size: ", p.groupedMembers[index - 1].length, "Index: ", index - 1); + } + + + @action + onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => { + let p = this.props; + if (buttonStatus) { + if (index >= 1) { + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => { + if (!p.groupedMembers[index - 1].includes(doc)) { + p.groupedMembers[index - 1].push(doc); + } + }); + } + + if (index >= 2) { + let nextBool = p.groupedMembers[index - 2].length !== 1; + if (nextBool === buttonStatus) { + this.onGroupClickRec(document, index - 1, p.groupedMembers[index - 2].length !== 1); + } + } + + } + } + else { + + if (index >= 1) { + let removeSize = p.groupedMembers[index].length; + if (p.groupedMembers[index].length >= 0) { + p.groupedMembers[index].forEach((doc: Doc) => { + p.groupedMembers[index - 1].pop(); console.log("Reached!!"); + }); + } + + + + if (index >= 2) { + let nextBool = p.groupedMembers[index - 2].length !== 1; + if (nextBool !== buttonStatus) { + this.recursiveDeleteGroups(index - 1, removeSize); + } + } + } + } + + } + + @action + recursiveDeleteGroups = (index: number, removeSize: number) => { + let p = this.props; + for (let i = 0; i < removeSize; i++) { + p.groupedMembers[index - 1].pop(); + } + if (index >= 2) { + + let nextBool = p.groupedMembers[index - 2].length !== 1; + if (nextBool === true) { + this.recursiveDeleteGroups(index - 1, removeSize); + } + } + } + + @action + onGroupClickRec2 = (document: Doc, index: number, buttonStatus: boolean) => { + let p = this.props; + if (buttonStatus) { + if (index >= 1) { + p.groupedMembers[index - 1].push(document); + if (index >= 2) { + this.onGroupClickRec2(document, index - 1, p.groupedMembers[index - 2].length !== 1); + } + } + } + } + + @action + changeGroupStatus = () => { + if (this.selectedButtons[5]) { + this.selectedButtons[5] = false; + } else { + this.selectedButtons[5] = true; + } + } + + printGroupSizes = () => { + this.props.groupedMembers.forEach((doc: Doc[], index: number) => console.log("Index: ", index, " size: ", doc.length)); } @@ -83,8 +173,8 @@ export default class PresentationElement extends React.Component { p.document.libraryBrush = true; } - let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; } + let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; }; + let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; }; return (
E
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 5a7d38e28..9baf75ad3 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -52,9 +52,12 @@ class PresentationViewList extends React.Component { // } @action initializeGroupArrays = (docList: Doc[]) => { + console.log("Starting len: ", this.props.groupedMembers.length); docList.forEach((doc: Doc, index: number) => { - if (this.props.groupedMembers.length < index + 1) { + if (this.props.groupedMembers.length < index + 2) { this.props.groupedMembers[index] = new Array(); + this.props.groupedMembers[index].push(docList[index]); + } }); } -- cgit v1.2.3-70-g09d2 From 917c4f0ed9c61e52a06fce2872ffe3048b46099f Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 5 Jun 2019 14:58:23 -0400 Subject: comments removed --- .../views/presentationview/PresentationElement.tsx | 64 ---------------------- 1 file changed, 64 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 4d7f07154..08a663150 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -24,55 +24,6 @@ export default class PresentationElement extends React.Component { - let p = this.props; - if (Array.isArray(buttonStatus)) { - if (buttonStatus[5]) { - buttonStatus[5] = false; - console.log("Reached!"); - if (index >= 1) { - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1)); - } - } - } else { - buttonStatus[5] = true; - if (index >= 1) { - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } }); - } - if (!p.groupedMembers[index - 1].includes(document)) { - p.groupedMembers[index - 1].push(document); - } - //this.onGroupClick() - } - } - } else { - if (!buttonStatus) { - console.log("U reached me!"); - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1)); - } - } else { - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } }); - } - if (!p.groupedMembers[index - 1].includes(document)) { - p.groupedMembers[index - 1].push(document); - } - } - } - if (index >= 2) { - this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 1); - } - - p.groupedMembers.forEach((docArray: Doc[], index: number) => console.log("Index: ", index, " size: ", docArray.length)); - console.log("Group Size: ", p.groupedMembers[index - 1].length, "Index: ", index - 1); - } - - @action onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => { let p = this.props; @@ -105,8 +56,6 @@ export default class PresentationElement extends React.Component= 2) { let nextBool = p.groupedMembers[index - 2].length !== 1; if (nextBool !== buttonStatus) { @@ -133,19 +82,6 @@ export default class PresentationElement extends React.Component { - let p = this.props; - if (buttonStatus) { - if (index >= 1) { - p.groupedMembers[index - 1].push(document); - if (index >= 2) { - this.onGroupClickRec2(document, index - 1, p.groupedMembers[index - 2].length !== 1); - } - } - } - } - @action changeGroupStatus = () => { if (this.selectedButtons[5]) { -- cgit v1.2.3-70-g09d2 From a54e3b99c2c6d4c39cbdd935978b5e78015956ab Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 5 Jun 2019 17:29:43 -0400 Subject: Enums for buttons --- src/client/views/nodes/DocumentView.tsx | 4 +- .../views/presentationview/PresentationElement.tsx | 45 +++++++++++++++++----- .../views/presentationview/PresentationView.tsx | 5 +-- 3 files changed, 40 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 984cac9b9..449fa76a7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -83,6 +83,7 @@ const schema = createSchema({ nativeWidth: "number", nativeHeight: "number", backgroundColor: "string", + opacity: "number" }); export const positionSchema = createSchema({ @@ -464,7 +465,8 @@ export class DocumentView extends DocComponent(Docu background: this.Document.backgroundColor || "", width: nativeWidth, height: nativeHeight, - transform: `scale(${scaling}, ${scaling})` + transform: `scale(${scaling}, ${scaling})`, + opacity: NumCast(this.props.Document.opacity, 1) }} onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick} diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 08a663150..48e740c4b 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -19,6 +19,16 @@ interface PresentationElementProps { } +enum buttonIndex { + Show = 0, + Navigate = 1, + HideTillPressed = 2, + FadeAfter = 3, + HideAfter = 4, + Group = 5, + +} + @observer export default class PresentationElement extends React.Component { @@ -84,10 +94,10 @@ export default class PresentationElement extends React.Component { - if (this.selectedButtons[5]) { - this.selectedButtons[5] = false; + if (this.selectedButtons[buttonIndex.Group]) { + this.selectedButtons[buttonIndex.Group] = false; } else { - this.selectedButtons[5] = true; + this.selectedButtons[buttonIndex.Group] = true; } } @@ -95,6 +105,21 @@ export default class PresentationElement extends React.Component console.log("Index: ", index, " size: ", doc.length)); } + @action + onHideDocumentUntilPressClick = (e: React.MouseEvent) => { + e.stopPropagation(); + if (this.selectedButtons[buttonIndex.HideTillPressed]) { + this.selectedButtons[buttonIndex.HideTillPressed] = false; + + } else { + this.selectedButtons[buttonIndex.HideTillPressed] = true; + } + } + + hideDocumentIfNotPressed = () => { + this.props.allListElements.forEach((doc: Doc) => doc.opacity = 0); + } + render() { @@ -125,15 +150,15 @@ export default class PresentationElement extends React.Component

- - - - - - + + + + + diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 9baf75ad3..b41149099 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -55,7 +55,7 @@ class PresentationViewList extends React.Component { console.log("Starting len: ", this.props.groupedMembers.length); docList.forEach((doc: Doc, index: number) => { if (this.props.groupedMembers.length < index + 2) { - this.props.groupedMembers[index] = new Array(); + this.props.groupedMembers[index] = []; this.props.groupedMembers[index].push(docList[index]); } @@ -123,8 +123,7 @@ class PresentationViewList extends React.Component { export class PresentationView extends React.Component { public static Instance: PresentationView; - @observable groupedMembers: [Doc[]] = [[]]; - + @observable groupedMembers: Doc[][] = []; //observable means render is re-called every time variable is changed @observable -- cgit v1.2.3-70-g09d2 From 36cf1b38e5da3ec948fd85d5d751a65dd8ec44fb Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 5 Jun 2019 20:04:00 -0400 Subject: Grouping With GUIDs is mostly done --- .../views/presentationview/PresentationElement.tsx | 69 ++++++++++++++++++++-- .../views/presentationview/PresentationView.tsx | 9 +-- 2 files changed, 69 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 48e740c4b..81be2c49f 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -1,10 +1,11 @@ import { observer } from "mobx-react"; import React = require("react"); import { Doc } from "../../../new_fields/Doc"; -import { NumCast, BoolCast } from "../../../new_fields/Types"; +import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; import { observable, action } from "mobx"; import "./PresentationView.scss"; +import { Utils } from "../../../Utils"; @@ -14,8 +15,9 @@ interface PresentationElementProps { index: number; deleteDocument(index: number): void; gotoDocument(index: number): void; - groupedMembers: [Doc[]]; + groupedMembers: Doc[][]; allListElements: Doc[]; + groupMappings: Map; } @@ -34,6 +36,63 @@ export default class PresentationElement extends React.Component { + let p = this.props; + if (buttonStatus) { + if (index >= 1) { + let newGuid = Utils.GenerateGuid(); + let aboveGuid = StrCast(p.allListElements[index - 1].presentId, undefined); + let docGuid = StrCast(document.presentId, undefined); + if (aboveGuid !== undefined) { + if (p.groupMappings.has(aboveGuid)) { + let aboveArray = p.groupMappings.get(aboveGuid)!; + if (p.groupMappings.has(docGuid)) { + let docsArray = p.groupMappings.get(docGuid)!; + docsArray.forEach((doc: Doc) => { + if (!aboveArray.includes(doc)) { + aboveArray.push(doc); + } + }); + } else { + if (!aboveArray.includes(document)) { + aboveArray.push(document); + + } + + } + } + document.presentId = aboveGuid; + } else { + p.allListElements[index - 1].presentId = newGuid; + let newAboveArray: Doc[] = []; + if (p.groupMappings.has(docGuid)) { + let docsArray = p.groupMappings.get(docGuid)!; + docsArray.forEach((doc: Doc) => newAboveArray.push(doc)); + } else { + newAboveArray.push(document); + } + document.presentId = newGuid; + p.groupMappings.set(newGuid, newAboveArray); + + + } + + } + } else { + let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!; + let targetIndex = curArray.indexOf(document); + let firstPart = curArray.slice(0, targetIndex); + let secondPart = curArray.slice(targetIndex); + p.groupMappings.set(StrCast(p.allListElements[index - 1].presentId, Utils.GenerateGuid()), firstPart); + p.groupMappings.set(StrCast(document.presentId, Utils.GenerateGuid()), secondPart); + + + } + + } + @action onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => { let p = this.props; @@ -117,7 +176,7 @@ export default class PresentationElement extends React.Component { - this.props.allListElements.forEach((doc: Doc) => doc.opacity = 0); + this.props.allListElements.forEach((doc: Doc) => doc.opacity = 1); } @@ -158,8 +217,8 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); this.changeGroupStatus(); - this.onGroupClickRec(p.document, p.index, this.selectedButtons[buttonIndex.Group]); - this.printGroupSizes(); + this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]); + //this.printGroupSizes(); }}>F diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index b41149099..6cf908d01 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -19,8 +19,8 @@ export interface PresViewProps { interface PresListProps extends PresViewProps { deleteDocument(index: number): void; gotoDocument(index: number): void; - groupedMembers: [Doc[]]; - + groupedMembers: Doc[][]; + groupMappings: Map; } @@ -112,7 +112,7 @@ class PresentationViewList extends React.Component { return (
- {children.map((doc: Doc, index: number) => )} + {children.map((doc: Doc, index: number) => )}
); } @@ -124,6 +124,7 @@ export class PresentationView extends React.Component { public static Instance: PresentationView; @observable groupedMembers: Doc[][] = []; + @observable groupMappings: Map = new Map(); //observable means render is re-called every time variable is changed @observable @@ -198,7 +199,7 @@ export class PresentationView extends React.Component { - + ); } -- cgit v1.2.3-70-g09d2 From 9cf1a4375700a0d473db1affcba5e9d28f22d124 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 12:57:38 -0400 Subject: Guid emptystring error fixed for grouping --- .../views/collections/CollectionBaseView.tsx | 3 ++ .../views/presentationview/PresentationElement.tsx | 53 +++++++++++++++++----- 2 files changed, 44 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 734669893..6639879e1 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -146,6 +146,9 @@ export class CollectionBaseView extends React.Component { } }); + //initial + // + if (index !== -1) { value.splice(index, 1); diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 81be2c49f..2d14476d2 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -40,33 +40,60 @@ export default class PresentationElement extends React.Component { let p = this.props; - if (buttonStatus) { - if (index >= 1) { + if (index >= 1) { + if (buttonStatus) { let newGuid = Utils.GenerateGuid(); - let aboveGuid = StrCast(p.allListElements[index - 1].presentId, undefined); - let docGuid = StrCast(document.presentId, undefined); + let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null); + let docGuid = StrCast(document.presentId, null); if (aboveGuid !== undefined) { if (p.groupMappings.has(aboveGuid)) { let aboveArray = p.groupMappings.get(aboveGuid)!; if (p.groupMappings.has(docGuid)) { + console.log("Doc Guid: ", docGuid); + console.log("Above Guid: ", aboveGuid); let docsArray = p.groupMappings.get(docGuid)!; docsArray.forEach((doc: Doc) => { if (!aboveArray.includes(doc)) { aboveArray.push(doc); + } }); + console.log("CAlled first one"); + } else { if (!aboveArray.includes(document)) { aboveArray.push(document); + console.log("CAlled this one"); + console.log("Doc: ", document); } } + console.log("AboveArray Size: ", aboveArray.length); + } else { + let newAboveArray: Doc[] = []; + newAboveArray.push(p.allListElements[index - 1]); + if (p.groupMappings.has(docGuid)) { + let docsArray = p.groupMappings.get(docGuid)!; + docsArray.forEach((doc: Doc) => { + newAboveArray.push(doc); + + }); + } else { + newAboveArray.push(document); + + } + p.groupMappings.set(aboveGuid, newAboveArray); + console.log("NewABove array size: ", newAboveArray.length); + + + } document.presentId = aboveGuid; } else { p.allListElements[index - 1].presentId = newGuid; let newAboveArray: Doc[] = []; + newAboveArray.push(p.allListElements[index - 1]); if (p.groupMappings.has(docGuid)) { let docsArray = p.groupMappings.get(docGuid)!; docsArray.forEach((doc: Doc) => newAboveArray.push(doc)); @@ -75,20 +102,22 @@ export default class PresentationElement extends React.Component Date: Thu, 6 Jun 2019 16:08:18 -0400 Subject: Grouping done --- .../views/presentationview/PresentationElement.tsx | 95 ++++++++++++---------- .../views/presentationview/PresentationView.tsx | 11 +++ 2 files changed, 62 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 2d14476d2..eb7002731 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -45,72 +45,79 @@ export default class PresentationElement extends React.Component { - if (!aboveArray.includes(doc)) { - aboveArray.push(doc); - - } - }); - console.log("CAlled first one"); - - } else { - if (!aboveArray.includes(document)) { - aboveArray.push(document); - console.log("CAlled this one"); - console.log("Doc: ", document); - + // if (aboveGuid !== undefined) { + if (p.groupMappings.has(aboveGuid)) { + let aboveArray = p.groupMappings.get(aboveGuid)!; + if (p.groupMappings.has(docGuid)) { + console.log("Doc Guid: ", docGuid); + console.log("Above Guid: ", aboveGuid); + let docsArray = p.groupMappings.get(docGuid)!; + docsArray.forEach((doc: Doc) => { + if (!aboveArray.includes(doc)) { + aboveArray.push(doc); } - - } - console.log("AboveArray Size: ", aboveArray.length); + doc.presentId = aboveGuid; + }); + console.log("CAlled first one"); + p.groupMappings.delete(docGuid); } else { - let newAboveArray: Doc[] = []; - newAboveArray.push(p.allListElements[index - 1]); - if (p.groupMappings.has(docGuid)) { - let docsArray = p.groupMappings.get(docGuid)!; - docsArray.forEach((doc: Doc) => { - newAboveArray.push(doc); - - }); - } else { - newAboveArray.push(document); + if (!aboveArray.includes(document)) { + aboveArray.push(document); + console.log("CAlled this one"); + console.log("Doc: ", document); } - p.groupMappings.set(aboveGuid, newAboveArray); - console.log("NewABove array size: ", newAboveArray.length); - - } - document.presentId = aboveGuid; + console.log("AboveArray Size: ", aboveArray.length); } else { - p.allListElements[index - 1].presentId = newGuid; let newAboveArray: Doc[] = []; newAboveArray.push(p.allListElements[index - 1]); if (p.groupMappings.has(docGuid)) { let docsArray = p.groupMappings.get(docGuid)!; - docsArray.forEach((doc: Doc) => newAboveArray.push(doc)); + docsArray.forEach((doc: Doc) => { + newAboveArray.push(doc); + doc.presentId = aboveGuid; + }); + p.groupMappings.delete(docGuid); } else { newAboveArray.push(document); + } - document.presentId = newGuid; - p.groupMappings.set(newGuid, newAboveArray); - console.log("New Array created"); + p.groupMappings.set(aboveGuid, newAboveArray); + console.log("NewABove array size: ", newAboveArray.length); + } + document.presentId = aboveGuid; + // } else { + // p.allListElements[index - 1].presentId = newGuid; + // let newAboveArray: Doc[] = []; + // newAboveArray.push(p.allListElements[index - 1]); + // if (p.groupMappings.has(docGuid)) { + // let docsArray = p.groupMappings.get(docGuid)!; + // docsArray.forEach((doc: Doc) => { + // doc.presentId = newGuid; + // newAboveArray.push(doc); + // }); + // p.groupMappings.delete(docGuid); + // } else { + // newAboveArray.push(document); + // } + // document.presentId = newGuid; + // p.groupMappings.set(newGuid, newAboveArray); + // console.log("New Array created"); + + + // } } else { let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!; let targetIndex = curArray.indexOf(document); let firstPart = curArray.slice(0, targetIndex); + let firstPartNewGuid = Utils.GenerateGuid(); + firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid); let secondPart = curArray.slice(targetIndex); p.groupMappings.set(StrCast(p.allListElements[index - 1].presentId, Utils.GenerateGuid()), firstPart); p.groupMappings.set(StrCast(document.presentId, Utils.GenerateGuid()), secondPart); diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 6cf908d01..79b7c1f15 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -62,6 +62,16 @@ class PresentationViewList extends React.Component { }); } + @action + initializeGroupIds = (docList: Doc[]) => { + docList.forEach((doc: Doc, index: number) => { + let docGuid = StrCast(doc.presentId, null); + if (docGuid === undefined) { + doc.presentId = Utils.GenerateGuid(); + } + }); + } + // /** // * Renders a single child document. It will just append a list element. // * @param document The document to render. @@ -109,6 +119,7 @@ class PresentationViewList extends React.Component { render() { const children = DocListCast(this.props.Document.data); this.initializeGroupArrays(children); + this.initializeGroupIds(children); return (
-- cgit v1.2.3-70-g09d2 From 51c59893afd84eb9f36669282cbf0479ee9d9f84 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 16:45:32 -0400 Subject: Cleaned the ex implementation --- .../views/presentationview/PresentationElement.tsx | 88 ---------------------- .../views/presentationview/PresentationView.tsx | 17 +---- 2 files changed, 2 insertions(+), 103 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index eb7002731..f5220c564 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -15,7 +15,6 @@ interface PresentationElementProps { index: number; deleteDocument(index: number): void; gotoDocument(index: number): void; - groupedMembers: Doc[][]; allListElements: Doc[]; groupMappings: Map; @@ -45,12 +44,9 @@ export default class PresentationElement extends React.Component { if (!aboveArray.includes(doc)) { @@ -91,27 +87,6 @@ export default class PresentationElement extends React.Component { - // doc.presentId = newGuid; - // newAboveArray.push(doc); - // }); - // p.groupMappings.delete(docGuid); - // } else { - // newAboveArray.push(document); - // } - // document.presentId = newGuid; - // p.groupMappings.set(newGuid, newAboveArray); - // console.log("New Array created"); - - - // } - } else { let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!; let targetIndex = curArray.indexOf(document); @@ -129,64 +104,6 @@ export default class PresentationElement extends React.Component { - let p = this.props; - if (buttonStatus) { - if (index >= 1) { - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => { - if (!p.groupedMembers[index - 1].includes(doc)) { - p.groupedMembers[index - 1].push(doc); - } - }); - } - - if (index >= 2) { - let nextBool = p.groupedMembers[index - 2].length !== 1; - if (nextBool === buttonStatus) { - this.onGroupClickRec(document, index - 1, p.groupedMembers[index - 2].length !== 1); - } - } - - } - } - else { - - if (index >= 1) { - let removeSize = p.groupedMembers[index].length; - if (p.groupedMembers[index].length >= 0) { - p.groupedMembers[index].forEach((doc: Doc) => { - p.groupedMembers[index - 1].pop(); console.log("Reached!!"); - }); - } - - if (index >= 2) { - let nextBool = p.groupedMembers[index - 2].length !== 1; - if (nextBool !== buttonStatus) { - this.recursiveDeleteGroups(index - 1, removeSize); - } - } - } - } - - } - - @action - recursiveDeleteGroups = (index: number, removeSize: number) => { - let p = this.props; - for (let i = 0; i < removeSize; i++) { - p.groupedMembers[index - 1].pop(); - } - if (index >= 2) { - - let nextBool = p.groupedMembers[index - 2].length !== 1; - if (nextBool === true) { - this.recursiveDeleteGroups(index - 1, removeSize); - } - } - } - @action changeGroupStatus = () => { if (this.selectedButtons[buttonIndex.Group]) { @@ -196,10 +113,6 @@ export default class PresentationElement extends React.Component { - this.props.groupedMembers.forEach((doc: Doc[], index: number) => console.log("Index: ", index, " size: ", doc.length)); - } - @action onHideDocumentUntilPressClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -254,7 +167,6 @@ export default class PresentationElement extends React.ComponentF
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 79b7c1f15..3263ea62e 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -19,7 +19,6 @@ export interface PresViewProps { interface PresListProps extends PresViewProps { deleteDocument(index: number): void; gotoDocument(index: number): void; - groupedMembers: Doc[][]; groupMappings: Map; } @@ -50,17 +49,6 @@ class PresentationViewList extends React.Component { // } // } // } - @action - initializeGroupArrays = (docList: Doc[]) => { - console.log("Starting len: ", this.props.groupedMembers.length); - docList.forEach((doc: Doc, index: number) => { - if (this.props.groupedMembers.length < index + 2) { - this.props.groupedMembers[index] = []; - this.props.groupedMembers[index].push(docList[index]); - - } - }); - } @action initializeGroupIds = (docList: Doc[]) => { @@ -118,12 +106,11 @@ class PresentationViewList extends React.Component { render() { const children = DocListCast(this.props.Document.data); - this.initializeGroupArrays(children); this.initializeGroupIds(children); return (
- {children.map((doc: Doc, index: number) => )} + {children.map((doc: Doc, index: number) => )}
); } @@ -210,7 +197,7 @@ export class PresentationView extends React.Component { - + ); } -- cgit v1.2.3-70-g09d2 From ecbf6dda7f410f866b1031966982b23b031e72ee Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 18:47:48 -0400 Subject: Pres ELements mapped --- .../views/presentationview/PresentationElement.tsx | 16 +++++++++------- src/client/views/presentationview/PresentationView.tsx | 8 +++++--- 2 files changed, 14 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index f5220c564..33c0289d7 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -3,7 +3,7 @@ import React = require("react"); import { Doc } from "../../../new_fields/Doc"; import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; -import { observable, action } from "mobx"; +import { observable, action, computed } from "mobx"; import "./PresentationView.scss"; import { Utils } from "../../../Utils"; @@ -35,6 +35,10 @@ export default class PresentationElement extends React.Component { @@ -118,18 +122,16 @@ export default class PresentationElement extends React.Component { - this.props.allListElements.forEach((doc: Doc) => doc.opacity = 1); + } } - render() { let p = this.props; let title = p.document.title; @@ -160,7 +162,7 @@ export default class PresentationElement extends React.Component
- + - + ); } -- cgit v1.2.3-70-g09d2 From 3473a78055d657829efb8818b643a5348c15fffc Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 19:47:45 -0400 Subject: ... --- src/client/views/presentationview/PresentationView.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 0655418f4..6089665fe 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -132,6 +132,8 @@ export class PresentationView extends React.Component { closePresentation = action(() => this.props.Document.width = 0); next = () => { const current = NumCast(this.props.Document.selectedDoc); + // let currentPresId = StrCast(current.presentId); + // this.groupMappings.get(current.presentId); this.gotoDocument(current + 1); } -- cgit v1.2.3-70-g09d2 From 8699b8bb3a3b93e2ec5eff7ca239bccbdccab8ae Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 12:23:34 -0400 Subject: Next and Prev adjusted to groups --- .../views/presentationview/PresentationView.tsx | 54 ++++++++++++++++++++-- 1 file changed, 50 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 6089665fe..bede2dd66 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -130,16 +130,62 @@ export class PresentationView extends React.Component { @observable collapsed: boolean = false; closePresentation = action(() => this.props.Document.width = 0); - next = () => { + next = async () => { const current = NumCast(this.props.Document.selectedDoc); // let currentPresId = StrCast(current.presentId); + let docAtCurrent = await this.getDocAtIndex(current); + if (docAtCurrent === undefined) { + return; + } + let curPresId = StrCast(docAtCurrent.presentId); + let nextSelected = current + 1; + + if (this.groupMappings.has(curPresId)) { + let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; + console.log("It reaches here"); + console.log("CurArray Len: ", currentsArray.length) + //nextSelected = current + currentsArray.length - current - 1; + nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1; + if (nextSelected === current) nextSelected = current + 1; + } + // this.groupMappings.get(current.presentId); - this.gotoDocument(current + 1); + this.gotoDocument(nextSelected); } - back = () => { + back = async () => { const current = NumCast(this.props.Document.selectedDoc); - this.gotoDocument(current - 1); + let docAtCurrent = await this.getDocAtIndex(current); + if (docAtCurrent === undefined) { + return; + } + let curPresId = StrCast(docAtCurrent.presentId); + let prevSelected = current - 1; + + if (this.groupMappings.has(curPresId)) { + let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; + prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)); + if (prevSelected === current) prevSelected = current - 1; + + + } + + + this.gotoDocument(prevSelected); + } + + getDocAtIndex = async (index: number) => { + const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + if (!list) { + return undefined; + } + if (index < 0 || index >= list.length) { + return undefined; + } + + this.props.Document.selectedDoc = index; + const doc = await list[index]; + return doc; } @action -- cgit v1.2.3-70-g09d2 From 6a905a729cbb59add629a305f99e1e225f958ea3 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 15:00:52 -0400 Subject: Guid Updatae Guids will only be assigned to docs that are not in groups --- src/client/views/presentationview/PresentationView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index bede2dd66..9acdea98e 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -55,8 +55,9 @@ class PresentationViewList extends React.Component { initializeGroupIds = (docList: Doc[]) => { docList.forEach((doc: Doc, index: number) => { let docGuid = StrCast(doc.presentId, null); - if (docGuid === undefined) { + if (!this.props.groupMappings.has(docGuid)) { doc.presentId = Utils.GenerateGuid(); + } }); } -- cgit v1.2.3-70-g09d2 From ecac03b032c4d1484408b892024135a814cd3265 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 15:53:21 -0400 Subject: Hide Until Presented Is Done --- .../views/presentationview/PresentationElement.tsx | 9 +++--- .../views/presentationview/PresentationView.tsx | 37 ++++++++++++++++++++-- 2 files changed, 39 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 33c0289d7..2621b92a3 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -20,7 +20,7 @@ interface PresentationElementProps { } -enum buttonIndex { +export enum buttonIndex { Show = 0, Navigate = 1, HideTillPressed = 2, @@ -120,14 +120,15 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); + const current = NumCast(this.props.mainDocument.selectedDoc); if (this.selectedButtons[buttonIndex.HideTillPressed]) { this.selectedButtons[buttonIndex.HideTillPressed] = false; this.props.document.opacity = 1; - } else { this.selectedButtons[buttonIndex.HideTillPressed] = true; - this.props.document.opacity = 0; - + if (this.props.index > current) { + this.props.document.opacity = 0; + } } } diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 9acdea98e..4fcc0b523 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -10,7 +10,7 @@ import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../. import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; -import PresentationElement from "./PresentationElement"; +import PresentationElement, { buttonIndex } from "./PresentationElement"; export interface PresViewProps { Document: Doc; @@ -21,6 +21,7 @@ interface PresListProps extends PresViewProps { gotoDocument(index: number): void; groupMappings: Map; presElementsMappings: Map; + setChildrenDocs: (docList: Doc[]) => void; } @@ -57,7 +58,6 @@ class PresentationViewList extends React.Component { let docGuid = StrCast(doc.presentId, null); if (!this.props.groupMappings.has(docGuid)) { doc.presentId = Utils.GenerateGuid(); - } }); } @@ -109,6 +109,7 @@ class PresentationViewList extends React.Component { render() { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); + this.props.setChildrenDocs(children); return (
@@ -126,6 +127,7 @@ export class PresentationView extends React.Component { @observable groupedMembers: Doc[][] = []; @observable groupMappings: Map = new Map(); @observable presElementsMappings: Map = new Map(); + @observable childrenDocs: Doc[] = []; //observable means render is re-called every time variable is changed @observable @@ -175,6 +177,26 @@ export class PresentationView extends React.Component { this.gotoDocument(prevSelected); } + showAfterPresented = (index: number) => { + this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + if (presElem.selected[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(key) <= index) { + key.opacity = 1; + } + } + }); + } + + hideIfNotPresented = (index: number) => { + this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + if (presElem.selected[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(key) > index) { + key.opacity = 0; + } + } + }); + } + getDocAtIndex = async (index: number) => { const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (!list) { @@ -209,6 +231,10 @@ export class PresentationView extends React.Component { this.props.Document.selectedDoc = index; const doc = await list[index]; DocumentManager.Instance.jumpToDocument(doc); + this.hideIfNotPresented(index); + this.showAfterPresented(index); + + } //initilize class variables @@ -233,6 +259,11 @@ export class PresentationView extends React.Component { this.props.Document.width = 300; } + @action + setChildrenDocs = (docList: Doc[]) => { + this.childrenDocs = docList; + } + render() { let titleStr = StrCast(this.props.Document.title); let width = NumCast(this.props.Document.width); @@ -248,7 +279,7 @@ export class PresentationView extends React.Component {
- + ); } -- cgit v1.2.3-70-g09d2 From 213cd917b20a8955ebfa0a4127e2853614314087 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 16:43:26 -0400 Subject: HideAfter Presented Done --- .../views/presentationview/PresentationElement.tsx | 12 +++++++++++- src/client/views/presentationview/PresentationView.tsx | 16 ++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 2621b92a3..bf09efaf2 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -132,6 +132,16 @@ export default class PresentationElement extends React.Component { + e.stopPropagation(); + if (this.selectedButtons[buttonIndex.HideAfter]) { + this.selectedButtons[buttonIndex.HideAfter] = false; + } else { + this.selectedButtons[buttonIndex.HideAfter] = true; + } + } + render() { let p = this.props; @@ -165,7 +175,7 @@ export default class PresentationElement extends React.ComponentB - + - +

- + diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index efc333ee3..cbfad56d1 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -222,6 +222,32 @@ export class PresentationView extends React.Component { }); } + navigateToElement = (curDoc: Doc) => { + let docToJump: Doc = curDoc; + let curDocPresId = StrCast(curDoc.presentId, null); + + if (curDocPresId !== undefined) { + if (this.groupMappings.has(curDocPresId)) { + let currentDocGroup = this.groupMappings.get(curDocPresId)!; + currentDocGroup.forEach((doc: Doc, index: number) => { + let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected; + if (selectedButtons[buttonIndex.Navigate]) { + docToJump = doc; + } + }); + } + + } + if (docToJump === curDoc) { + if (this.presElementsMappings.get(curDoc)!.selected[buttonIndex.Navigate]) { + DocumentManager.Instance.jumpToDocument(curDoc); + } else { + return; + } + } + DocumentManager.Instance.jumpToDocument(docToJump); + } + getDocAtIndex = async (index: number) => { const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (!list) { @@ -255,7 +281,8 @@ export class PresentationView extends React.Component { this.props.Document.selectedDoc = index; const doc = await list[index]; - DocumentManager.Instance.jumpToDocument(doc); + // DocumentManager.Instance.jumpToDocument(doc); + this.navigateToElement(doc); this.hideIfNotPresented(index); this.showAfterPresented(index); -- cgit v1.2.3-70-g09d2 From 91614b758e937113a39ab3490b8ec379ee0e03c1 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 19:04:04 -0400 Subject: Icons for buttons and next and back is added --- package.json | 2 ++ .../views/presentationview/PresentationElement.tsx | 23 ++++++++++++++++------ .../views/presentationview/PresentationView.tsx | 10 ++++++++-- 3 files changed, 27 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index df0767b50..de4e7b37e 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "dependencies": { "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/fontawesome-svg-core": "^1.2.15", + "@fortawesome/free-brands-svg-icons": "^5.9.0", + "@fortawesome/free-regular-svg-icons": "^5.9.0", "@fortawesome/free-solid-svg-icons": "^5.7.2", "@fortawesome/react-fontawesome": "^0.1.4", "@hig/flyout": "^1.0.3", diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index c89cd4309..1a3f35d44 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -6,9 +6,20 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { observable, action, computed } from "mobx"; import "./PresentationView.scss"; import { Utils } from "../../../Utils"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fortawesome/free-solid-svg-icons'; +import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; + +library.add(faArrowUp); +library.add(fileSolid); +library.add(fileRegular); +library.add(faLocationArrow); +library.add(faSearch); + interface PresentationElementProps { mainDocument: Doc; document: Doc; @@ -198,16 +209,16 @@ export default class PresentationElement extends React.Component

- - - - - + + + + + + }}> ); diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index cbfad56d1..e3a879833 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -11,6 +11,12 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import PresentationElement, { buttonIndex } from "./PresentationElement"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'; + +library.add(faArrowLeft); +library.add(faArrowRight); export interface PresViewProps { Document: Doc; @@ -328,8 +334,8 @@ export class PresentationView extends React.Component {
- - + +
-- cgit v1.2.3-70-g09d2 From cfb4470fa457581a78ea93fc53519c09f2516669 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 19:35:01 -0400 Subject: unnecessary console.logs and comments removed --- .../views/presentationview/PresentationElement.tsx | 7 -- .../views/presentationview/PresentationView.tsx | 76 +--------------------- 2 files changed, 1 insertion(+), 82 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 1a3f35d44..ee423c90a 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -69,18 +69,14 @@ export default class PresentationElement extends React.Component { - - // onGroupClick = (document: Doc, index: number, buttonStatus: boolean[]) => { - // if (buttonStatus[5]) { - // buttonStatus[5] = false; - // if (index >= 1) { - // if (this.groupedMembers[index].length >= 0) { - // this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].slice(this.groupedMembers[index - 1].indexOf(doc), 1)); - // } - // } - // } else { - // buttonStatus[5] = true; - // console.log("reached!! ", buttonStatus[5]); - // if (index >= 1) { - // if (this.groupedMembers[index].length >= 0) { - // this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].push(doc)); - // } - // this.groupedMembers[index - 1].push(document); - // } - // } - // } - @action initializeGroupIds = (docList: Doc[]) => { docList.forEach((doc: Doc, index: number) => { @@ -68,50 +47,6 @@ class PresentationViewList extends React.Component { }); } - // /** - // * Renders a single child document. It will just append a list element. - // * @param document The document to render. - // */ - // renderChild = (document: Doc, index: number) => { - // let title = document.title; - - // //to get currently selected presentation doc - // let selected = NumCast(this.props.Document.selectedDoc, 0); - - // let className = "presentationView-item"; - // if (selected === index) { - // //this doc is selected - // className += " presentationView-selected"; - // } - // let selectedButtons: boolean[] = new Array(6); - // let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; } - // let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; } - // return ( - //
{ this.props.gotoDocument(index); e.stopPropagation(); }}> - // - // {`${index + 1}. ${title}`} - // - // - //

- // - // - // - // - // - // - - //
- // ); - - // } - render() { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); @@ -119,7 +54,7 @@ class PresentationViewList extends React.Component { return (
- {children.map((doc: Doc, index: number) => this.props.presElementsMappings.set(doc, e!)} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)} + {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
); } @@ -141,7 +76,6 @@ export class PresentationView extends React.Component { closePresentation = action(() => this.props.Document.width = 0); next = async () => { const current = NumCast(this.props.Document.selectedDoc); - // let currentPresId = StrCast(current.presentId); let docAtCurrent = await this.getDocAtIndex(current); if (docAtCurrent === undefined) { return; @@ -151,14 +85,10 @@ export class PresentationView extends React.Component { if (this.groupMappings.has(curPresId)) { let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; - console.log("It reaches here"); - console.log("CurArray Len: ", currentsArray.length) - //nextSelected = current + currentsArray.length - current - 1; nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1; if (nextSelected === current) nextSelected = current + 1; } - // this.groupMappings.get(current.presentId); this.gotoDocument(nextSelected); } @@ -209,7 +139,6 @@ export class PresentationView extends React.Component { let selectedButtons: boolean[] = presElem.selected; if (selectedButtons[buttonIndex.HideAfter]) { if (this.childrenDocs.indexOf(key) >= index) { - console.log("CAlled this right"); key.opacity = 1; } } @@ -220,8 +149,6 @@ export class PresentationView extends React.Component { } if (selectedButtons[buttonIndex.HideTillPressed]) { if (this.childrenDocs.indexOf(key) > index) { - console.log("KeyIndex: ", this.childrenDocs.indexOf(key)); - console.log("Cur index: ", index); key.opacity = 0; } } @@ -287,7 +214,6 @@ export class PresentationView extends React.Component { this.props.Document.selectedDoc = index; const doc = await list[index]; - // DocumentManager.Instance.jumpToDocument(doc); this.navigateToElement(doc); this.hideIfNotPresented(index); this.showAfterPresented(index); -- cgit v1.2.3-70-g09d2 From 24730e6fe8114828a96c6c0ce9c170ff2488e423 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 19:56:35 -0400 Subject: Documentation --- .../views/presentationview/PresentationElement.tsx | 46 ++++++++++++++++++++- .../views/presentationview/PresentationView.tsx | 47 +++++++++++++++++++++- 2 files changed, 91 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index ee423c90a..dfe078a8e 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -31,6 +31,7 @@ interface PresentationElementProps { } +//enum for the all kinds of buttons a doc in presentation can have export enum buttonIndex { Show = 0, Navigate = 1, @@ -41,26 +42,41 @@ export enum buttonIndex { } +/** + * 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 default class PresentationElement extends React.Component { @observable selectedButtons: boolean[] = new Array(6); + /** + * Getter to get the status of the buttons. + */ @computed get selected() { return this.selectedButtons; } + /** + * The function that is called to group docs together. It tries to group a doc + * that turned grouping option with the above document. If that doc is grouped with + * other documents. Those other documents will be grouped with doc's above document as well. + */ @action onGroupClick = (document: Doc, index: number, buttonStatus: boolean) => { let p = this.props; if (index >= 1) { + //checking if options was turned true if (buttonStatus) { - let newGuid = Utils.GenerateGuid(); + //getting the id of the above-doc and the doc let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null); let docGuid = StrCast(document.presentId, null); + //the case where above-doc is already in group if (p.groupMappings.has(aboveGuid)) { let aboveArray = p.groupMappings.get(aboveGuid)!; + //case where doc is already in group if (p.groupMappings.has(docGuid)) { let docsArray = p.groupMappings.get(docGuid)!; docsArray.forEach((doc: Doc) => { @@ -70,6 +86,7 @@ export default class PresentationElement extends React.Component { @@ -87,6 +107,8 @@ export default class PresentationElement extends React.Component { if (this.selectedButtons[buttonIndex.Group]) { @@ -121,6 +148,10 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); @@ -136,6 +167,11 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); @@ -149,6 +185,11 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); @@ -162,6 +203,9 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index c7839a384..e987d12f6 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -37,10 +37,17 @@ interface PresListProps extends PresViewProps { */ class PresentationViewList extends React.Component { + /** + * Method that initializes presentation ids for the + * docs that is in the presentation, when presentation list + * gets re-rendered. It makes sure to not assign ids to the + * docs that are in the group, so that mapping won't be disrupted. + */ @action initializeGroupIds = (docList: Doc[]) => { docList.forEach((doc: Doc, index: number) => { let docGuid = StrCast(doc.presentId, null); + //checking if part of group if (!this.props.groupMappings.has(docGuid)) { doc.presentId = Utils.GenerateGuid(); } @@ -65,9 +72,11 @@ class PresentationViewList extends React.Component { export class PresentationView extends React.Component { public static Instance: PresentationView; - @observable groupedMembers: Doc[][] = []; + //Mapping from presentation ids to a list of doc that represent a group @observable groupMappings: Map = new Map(); + //mapping from docs to their rendered component @observable presElementsMappings: Map = new Map(); + //variable that holds all the docs in the presentation @observable childrenDocs: Doc[] = []; //observable means render is re-called every time variable is changed @@ -76,16 +85,21 @@ export class PresentationView extends React.Component { closePresentation = action(() => this.props.Document.width = 0); next = async () => { const current = NumCast(this.props.Document.selectedDoc); + //asking to get document at current index let docAtCurrent = await this.getDocAtIndex(current); if (docAtCurrent === undefined) { return; } + //asking for it's presentation id let curPresId = StrCast(docAtCurrent.presentId); let nextSelected = current + 1; + //if curDoc is in a group, selection slides until last one, if not it's next one if (this.groupMappings.has(curPresId)) { let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1; + + //end of grup so go beyond if (nextSelected === current) nextSelected = current + 1; } @@ -94,16 +108,21 @@ export class PresentationView extends React.Component { } back = async () => { const current = NumCast(this.props.Document.selectedDoc); + //requesting for the doc at current index let docAtCurrent = await this.getDocAtIndex(current); if (docAtCurrent === undefined) { return; } + + //asking for its presentation id. let curPresId = StrCast(docAtCurrent.presentId); let prevSelected = current - 1; + //checking if this presentation id is mapped to a group, if so chosing the first element in group if (this.groupMappings.has(curPresId)) { let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)); + //end of grup so go beyond if (prevSelected === current) prevSelected = current - 1; @@ -113,9 +132,15 @@ export class PresentationView extends React.Component { this.gotoDocument(prevSelected); } + /** + * This is the method that checks for the actions that need to be performed + * after the document has been presented, which involves 3 button options: + * Hide Until Presented, Hide After Presented, Fade After Presented + */ showAfterPresented = (index: number) => { this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { let selectedButtons: boolean[] = presElem.selected; + //the order of cases is aligned based on priority if (selectedButtons[buttonIndex.HideTillPressed]) { if (this.childrenDocs.indexOf(key) <= index) { key.opacity = 1; @@ -134,9 +159,17 @@ export class PresentationView extends React.Component { }); } + /** + * This is the method that checks for the actions that need to be performed + * before the document has been presented, which involves 3 button options: + * Hide Until Presented, Hide After Presented, Fade After Presented + */ hideIfNotPresented = (index: number) => { this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { let selectedButtons: boolean[] = presElem.selected; + + //the order of cases is aligned based on priority + if (selectedButtons[buttonIndex.HideAfter]) { if (this.childrenDocs.indexOf(key) >= index) { key.opacity = 1; @@ -155,10 +188,16 @@ export class PresentationView extends React.Component { }); } + /** + * This method makes sure that cursor navigates to the element that + * 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 = (curDoc: Doc) => { let docToJump: Doc = curDoc; let curDocPresId = StrCast(curDoc.presentId, null); + //checking if in group if (curDocPresId !== undefined) { if (this.groupMappings.has(curDocPresId)) { let currentDocGroup = this.groupMappings.get(curDocPresId)!; @@ -171,7 +210,9 @@ export class PresentationView extends React.Component { } } + //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)!.selected[buttonIndex.Navigate]) { DocumentManager.Instance.jumpToDocument(curDoc); } else { @@ -181,6 +222,9 @@ export class PresentationView extends React.Component { DocumentManager.Instance.jumpToDocument(docToJump); } + /** + * Async function that supposedly return the doc that is located at given index. + */ getDocAtIndex = async (index: number) => { const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (!list) { @@ -191,6 +235,7 @@ export class PresentationView extends React.Component { } this.props.Document.selectedDoc = index; + //awaiting async call to finish to get Doc instance const doc = await list[index]; return doc; } -- cgit v1.2.3-70-g09d2 From cd483361f9b372dc79a001e3182fdac459e229ec Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 10 Jun 2019 13:34:42 -0400 Subject: Start/Reset and interaction while playin added --- .../views/presentationview/PresentationElement.tsx | 42 ++++++++++--- .../views/presentationview/PresentationView.scss | 4 +- .../views/presentationview/PresentationView.tsx | 69 +++++++++++++++++++--- 3 files changed, 97 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index dfe078a8e..f346940a2 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -28,6 +28,8 @@ interface PresentationElementProps { gotoDocument(index: number): void; allListElements: Doc[]; groupMappings: Map; + presStatus: boolean; + } @@ -158,11 +160,15 @@ export default class PresentationElement extends React.Component= current) { + this.props.document.opacity = 1; + } } else { this.selectedButtons[buttonIndex.HideTillPressed] = true; - if (this.props.index > current) { - this.props.document.opacity = 0; + if (this.props.presStatus) { + if (this.props.index > current) { + this.props.document.opacity = 0; + } } } } @@ -175,13 +181,22 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); + const current = NumCast(this.props.mainDocument.selectedDoc); if (this.selectedButtons[buttonIndex.HideAfter]) { this.selectedButtons[buttonIndex.HideAfter] = false; + if (this.props.index <= current) { + this.props.document.opacity = 1; + } } else { if (this.selectedButtons[buttonIndex.FadeAfter]) { this.selectedButtons[buttonIndex.FadeAfter] = false; } this.selectedButtons[buttonIndex.HideAfter] = true; + if (this.props.presStatus) { + if (this.props.index < current) { + this.props.document.opacity = 0; + } + } } } @@ -193,13 +208,22 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); + const current = NumCast(this.props.mainDocument.selectedDoc); if (this.selectedButtons[buttonIndex.FadeAfter]) { this.selectedButtons[buttonIndex.FadeAfter] = false; + if (this.props.index <= current) { + this.props.document.opacity = 1; + } } else { if (this.selectedButtons[buttonIndex.HideAfter]) { this.selectedButtons[buttonIndex.HideAfter] = false; } this.selectedButtons[buttonIndex.FadeAfter] = true; + if (this.props.presStatus) { + if (this.props.index < current) { + this.props.document.opacity = 0.5; + } + } } } @@ -246,12 +270,12 @@ export default class PresentationElement extends React.Component

- - - - - - + + + + + ; + } else { + return ; + } + } + + @action + startOrResetPres = () => { + if (this.presStatus) { + this.presStatus = false; + this.resetPresentation(); + } else { + this.presStatus = true; + this.startPresentation(); + } + } + + @action + resetPresentation = () => { + this.groupMappings = new Map(); + let selectedButtons: boolean[]; + this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { + selectedButtons = component.selected; + selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); + doc.presentId = Utils.GenerateGuid(); + doc.opacity = 1; + }); + this.props.Document.selectedDoc = 0; + + } + + startPresentation = () => { + this.props.Document.selectedDoc = 0; + let selectedButtons: boolean[]; + this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { + selectedButtons = component.selected; + if (selectedButtons[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(doc) > 0) { + doc.opacity = 0; + } + + } + }); + + } + render() { let titleStr = StrCast(this.props.Document.title); let width = NumCast(this.props.Document.width); @@ -306,9 +360,10 @@ export class PresentationView extends React.Component {
+ {this.renderPlayPauseButton()}
- + ); } -- cgit v1.2.3-70-g09d2 From 6339ce36664b008c4274dc51fc2e7851b9dabf89 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 10 Jun 2019 14:03:33 -0400 Subject: Next And Back Fixed For groups --- .../views/presentationview/PresentationView.tsx | 49 ++++++++++++++-------- 1 file changed, 32 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 93c084dfd..8d1be6af1 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -91,18 +91,18 @@ export class PresentationView extends React.Component { next = async () => { const current = NumCast(this.props.Document.selectedDoc); //asking to get document at current index - let docAtCurrent = await this.getDocAtIndex(current); - if (docAtCurrent === undefined) { + let docAtCurrentNext = await this.getDocAtIndex(current + 1); + if (docAtCurrentNext === undefined) { return; } //asking for it's presentation id - let curPresId = StrCast(docAtCurrent.presentId); + let curNextPresId = StrCast(docAtCurrentNext.presentId); let nextSelected = current + 1; //if curDoc is in a group, selection slides until last one, if not it's next one - if (this.groupMappings.has(curPresId)) { - let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; - nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1; + if (this.groupMappings.has(curNextPresId)) { + let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!; + nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext); //end of grup so go beyond if (nextSelected === current) nextSelected = current + 1; @@ -126,7 +126,7 @@ export class PresentationView extends React.Component { //checking if this presentation id is mapped to a group, if so chosing the first element in group if (this.groupMappings.has(curPresId)) { let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; - prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)); + prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1; //end of grup so go beyond if (prevSelected === current) prevSelected = current - 1; @@ -252,7 +252,7 @@ export class PresentationView extends React.Component { value.splice(index, 1); } } - + @action public gotoDocument = async (index: number) => { const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (!list) { @@ -261,8 +261,13 @@ export class PresentationView extends React.Component { if (index < 0 || index >= list.length) { return; } - this.props.Document.selectedDoc = index; + + if (!this.presStatus) { + this.presStatus = true; + this.startPresentation(index); + } + const doc = await list[index]; if (this.presStatus) { this.navigateToElement(doc); @@ -301,9 +306,9 @@ export class PresentationView extends React.Component { renderPlayPauseButton = () => { if (this.presStatus) { - return ; + return ; } else { - return ; + return ; } } @@ -314,7 +319,7 @@ export class PresentationView extends React.Component { this.resetPresentation(); } else { this.presStatus = true; - this.startPresentation(); + this.startPresentation(0); } } @@ -332,17 +337,27 @@ export class PresentationView extends React.Component { } - startPresentation = () => { - this.props.Document.selectedDoc = 0; + startPresentation = (startIndex: number) => { let selectedButtons: boolean[]; this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { selectedButtons = component.selected; if (selectedButtons[buttonIndex.HideTillPressed]) { - if (this.childrenDocs.indexOf(doc) > 0) { + if (this.childrenDocs.indexOf(doc) > startIndex) { doc.opacity = 0; } } + if (selectedButtons[buttonIndex.HideAfter]) { + if (this.childrenDocs.indexOf(doc) < startIndex) { + doc.opacity = 0; + } + } + if (selectedButtons[buttonIndex.FadeAfter]) { + if (this.childrenDocs.indexOf(doc) < startIndex) { + doc.opacity = 0.5; + } + } + }); } @@ -359,9 +374,9 @@ export class PresentationView extends React.Component {
- + {this.renderPlayPauseButton()} - +
-- cgit v1.2.3-70-g09d2 From caf61bef345db0addd37c03bf2d0b0d2dd724c47 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 10 Jun 2019 14:17:27 -0400 Subject: Edge Case For Starting Presentation Fixed Navigation happens when u start document --- src/client/views/presentationview/PresentationView.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 8d1be6af1..40e6885f0 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -320,6 +320,7 @@ export class PresentationView extends React.Component { } else { this.presStatus = true; this.startPresentation(0); + this.gotoDocument(0); } } -- cgit v1.2.3-70-g09d2 From f9b472e6d69fcb99b8139cfcd6c36a8277962251 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 11 Jun 2019 17:52:18 -0400 Subject: Saving PresStatus Not Done, THere are bugs --- .../views/presentationview/PresentationElement.tsx | 41 +++++++++++++++- .../views/presentationview/PresentationView.tsx | 54 +++++++++++++++++++--- 2 files changed, 86 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index f346940a2..7928722f2 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import React = require("react"); -import { Doc } from "../../../new_fields/Doc"; -import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { NumCast, BoolCast, StrCast, Cast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; import { observable, action, computed } from "mobx"; import "./PresentationView.scss"; @@ -10,6 +10,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fortawesome/free-solid-svg-icons'; import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; +import { List } from "../../../new_fields/List"; +import { listSpec } from "../../../new_fields/Schema"; @@ -29,6 +31,8 @@ interface PresentationElementProps { allListElements: Doc[]; groupMappings: Map; presStatus: boolean; + presButtonBackUp: Doc; + presGroupBackUp: Doc; } @@ -60,6 +64,22 @@ export default class PresentationElement extends React.Component>; + let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); + if (castedList.length !== 0) { + // this.selectedButtons = castedList; + let selectedButtonOfDoc = Cast(castedList[this.props.index].selectedButtons, listSpec("boolean"), null); + if (selectedButtonOfDoc !== undefined) { + this.selectedButtons = selectedButtonOfDoc; + } + console.log("Entered!!"); + + } + console.log("Mounted!!"); + //this.props.presButtonBackUp.elIndex = this.props.index; + } /** * The function that is called to group docs together. It tries to group a doc @@ -171,6 +191,16 @@ export default class PresentationElement extends React.Component { + // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List>; + let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); + castedList[this.props.index].selectedButtons = new List(this.selectedButtons); + + //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp; } /** @@ -198,6 +228,8 @@ export default class PresentationElement extends React.Component; setChildrenDocs: (docList: Doc[]) => void; presStatus: boolean; + presButtonBackUp: Doc; + presGroupBackUp: Doc; } @@ -57,14 +59,30 @@ class PresentationViewList extends React.Component { }); } + @action + initializeSelectedButtonDocs = (docList: Doc[]) => { + + let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); + if (castedList.length === 0) { + let newDocArray: List = new List(); + newDocArray.push(new Doc()); + this.props.presButtonBackUp.selectedButtonDocs = newDocArray; + } else { + castedList.push(new Doc()); + } + + + } + render() { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); this.props.setChildrenDocs(children); + this.initializeSelectedButtonDocs(children); return (
- {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} />)} + {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)}
); } @@ -83,6 +101,28 @@ export class PresentationView extends React.Component { @observable childrenDocs: Doc[] = []; //variable to hold if presentation is started @observable presStatus: boolean = false; + //back-up so that presentation stays the way it's when refreshed + @observable presGroupBackUp: Doc = new Doc(); + @observable presButtonBackUp: Doc = new Doc(); + + @action + componentDidMount() { + let castedGroupBackUp: Doc = Cast(this.props.Document.presGroupBackUp, Doc, new Doc()); + let castedButtonBackUp: Doc = Cast(this.props.Document.presButtonBackUp, Doc, new Doc()); + // if (castedButtonBackUp === undefined) { + // this.props.Document.presButtonBackUp = new Doc(); + // } else { + this.presButtonBackUp = castedButtonBackUp; + // } + // if (castedGroupBackUp === undefined) { + // this.props.Document.presGroupBackUp = new Doc(); + // } else { + this.presGroupBackUp = castedGroupBackUp; + // + + // } + + } //observable means render is re-called every time variable is changed @observable @@ -326,12 +366,12 @@ export class PresentationView extends React.Component { @action resetPresentation = () => { - this.groupMappings = new Map(); - let selectedButtons: boolean[]; + //this.groupMappings = new Map(); + //let selectedButtons: boolean[]; this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { - selectedButtons = component.selected; - selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); - doc.presentId = Utils.GenerateGuid(); + //selectedButtons = component.selected; + //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); + //doc.presentId = Utils.GenerateGuid(); doc.opacity = 1; }); this.props.Document.selectedDoc = 0; @@ -379,7 +419,7 @@ export class PresentationView extends React.Component { {this.renderPlayPauseButton()} - + ); } -- cgit v1.2.3-70-g09d2 From 9a93306ba382018ebf3c686117bd4301beda61ef Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 12 Jun 2019 15:33:51 -0400 Subject: BUtton status and pres status saved on refresh, only groups left --- src/client/views/MainView.tsx | 7 ++- .../views/presentationview/PresentationElement.tsx | 42 ++++++++++------ .../views/presentationview/PresentationView.tsx | 57 ++++++++++++++++------ 3 files changed, 73 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c98e6e8fb..3d772916e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -200,12 +200,15 @@ export class MainView extends React.Component { whenActiveChanged={emptyFunction} bringToFront={emptyFunction} ContainingCollectionView={undefined} />; - const pres = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; + let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; + console.log("GETTING mainContent()"); + console.log(castRes instanceof Promise); + console.log(castRes); return {({ measureRef }) =>
{content} - {pres ? : null} + {castRes ? : null}
} ; diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 7928722f2..9fe69c2e3 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -1,9 +1,9 @@ import { observer } from "mobx-react"; import React = require("react"); -import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; import { NumCast, BoolCast, StrCast, Cast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; -import { observable, action, computed } from "mobx"; +import { observable, action, computed, runInAction } from "mobx"; import "./PresentationView.scss"; import { Utils } from "../../../Utils"; import { library } from '@fortawesome/fontawesome-svg-core'; @@ -64,21 +64,33 @@ export default class PresentationElement extends React.Component>; - let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); - if (castedList.length !== 0) { - // this.selectedButtons = castedList; - let selectedButtonOfDoc = Cast(castedList[this.props.index].selectedButtons, listSpec("boolean"), null); + let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); + if (!castedList) { + this.props.presButtonBackUp.selectedButtonDocs = castedList = new List(); + } + // let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); + + console.log("Mounted!!"); + console.log("CastedList Len: ", castedList.length); + console.log("Index of doc: ", this.props.index); + + if (castedList.length <= this.props.index) { + console.log("Entered here by index : ", this.props.index); + castedList.push(new Doc()); + } else { + let curDoc: Doc = await castedList[this.props.index]; + let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); + console.log("Entered First Place"); if (selectedButtonOfDoc !== undefined) { - this.selectedButtons = selectedButtonOfDoc; + runInAction(() => this.selectedButtons = selectedButtonOfDoc); + console.log("Entered Second Place"); } - console.log("Entered!!"); - } - console.log("Mounted!!"); - //this.props.presButtonBackUp.elIndex = this.props.index; + + } /** @@ -195,9 +207,9 @@ export default class PresentationElement extends React.Component { + autoSaveButtonChange = async (index: buttonIndex) => { // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List>; - let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); + let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!; castedList[this.props.index].selectedButtons = new List(this.selectedButtons); //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp; diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 8b0b919fd..b872181ae 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -78,7 +78,7 @@ class PresentationViewList extends React.Component { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); this.props.setChildrenDocs(children); - this.initializeSelectedButtonDocs(children); + //this.initializeSelectedButtonDocs(children); return (
@@ -105,23 +105,47 @@ export class PresentationView extends React.Component { @observable presGroupBackUp: Doc = new Doc(); @observable presButtonBackUp: Doc = new Doc(); - @action + + componentDidMount() { - let castedGroupBackUp: Doc = Cast(this.props.Document.presGroupBackUp, Doc, new Doc()); - let castedButtonBackUp: Doc = Cast(this.props.Document.presButtonBackUp, Doc, new Doc()); - // if (castedButtonBackUp === undefined) { - // this.props.Document.presButtonBackUp = new Doc(); - // } else { - this.presButtonBackUp = castedButtonBackUp; - // } - // if (castedGroupBackUp === undefined) { - // this.props.Document.presGroupBackUp = new Doc(); - // } else { - this.presGroupBackUp = castedGroupBackUp; - // - - // } + // let newDoc = new Doc(); + // let newDoc2 = new Doc(); + let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc); + let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc); + if (castedGroupBackUp instanceof Promise) { + castedGroupBackUp.then(doc => { + let toAssign = doc ? doc : new Doc(); + this.props.Document.presGroupBackUp = toAssign; + runInAction(() => this.presGroupBackUp = toAssign); + }); + } else { + runInAction(() => { + let toAssign = new Doc(); + this.presGroupBackUp = toAssign; + this.props.Document.presGroupBackUp = toAssign; + + }); + + } + + if (castedButtonBackUp instanceof Promise) { + castedButtonBackUp.then(doc => { + let toAssign = doc ? doc : new Doc(); + this.props.Document.presButtonBackUp = toAssign; + runInAction(() => this.presButtonBackUp = toAssign); + }); + + } else { + runInAction(() => { + let toAssign = new Doc(); + this.presButtonBackUp = toAssign; + this.props.Document.presButtonBackUp = toAssign; + }); + + } + let presStatusBackUp = BoolCast(this.props.Document.presStatus, null); + runInAction(() => this.presStatus = presStatusBackUp); } //observable means render is re-called every time variable is changed @@ -362,6 +386,7 @@ export class PresentationView extends React.Component { this.startPresentation(0); this.gotoDocument(0); } + this.props.Document.presStatus = this.presStatus; } @action -- cgit v1.2.3-70-g09d2 From 5c60cd95b3f766a18dee95ead388dd9f9603d138 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 12 Jun 2019 18:49:37 -0400 Subject: Groups saving on refresh done --- .../views/presentationview/PresentationElement.tsx | 25 ++++++++++----- .../views/presentationview/PresentationView.tsx | 36 ++++++++++++++++++++-- 2 files changed, 50 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 9fe69c2e3..53e6f903b 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -71,22 +71,14 @@ export default class PresentationElement extends React.Component(); } - // let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); - - console.log("Mounted!!"); - console.log("CastedList Len: ", castedList.length); - console.log("Index of doc: ", this.props.index); if (castedList.length <= this.props.index) { - console.log("Entered here by index : ", this.props.index); castedList.push(new Doc()); } else { let curDoc: Doc = await castedList[this.props.index]; let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); - console.log("Entered First Place"); if (selectedButtonOfDoc !== undefined) { runInAction(() => this.selectedButtons = selectedButtonOfDoc); - console.log("Entered Second Place"); } } @@ -167,6 +159,21 @@ export default class PresentationElement extends React.Component { + let castedList: List = new List(); + this.props.presGroupBackUp.groupDocs = castedList; + this.props.groupMappings.forEach((docArray: Doc[], id: String) => { + let newGroupDoc = new Doc(); + castedList.push(newGroupDoc); + newGroupDoc.presentIdStore = id.toString(); + newGroupDoc.grouping = new List(docArray); + }); } @@ -180,6 +187,8 @@ export default class PresentationElement extends React.Component { * docs that are in the group, so that mapping won't be disrupted. */ @action - initializeGroupIds = (docList: Doc[]) => { - docList.forEach((doc: Doc, index: number) => { + initializeGroupIds = async (docList: Doc[]) => { + docList.forEach(async (doc: Doc, index: number) => { let docGuid = StrCast(doc.presentId, null); //checking if part of group - if (!this.props.groupMappings.has(docGuid)) { + let storedGuids: string[] = []; + let castedGroupDocs = await DocListCastAsync(this.props.presGroupBackUp.groupDocs); + if (castedGroupDocs !== undefined) { + castedGroupDocs.forEach((doc: Doc) => { + let storedGuid = StrCast(doc.presentIdStore, null); + if (storedGuid) { + storedGuids.push(storedGuid); + } + + }); + } + if (!this.props.groupMappings.has(docGuid) && !storedGuids.includes(docGuid)) { doc.presentId = Utils.GenerateGuid(); } }); @@ -117,6 +128,11 @@ export class PresentationView extends React.Component { let toAssign = doc ? doc : new Doc(); this.props.Document.presGroupBackUp = toAssign; runInAction(() => this.presGroupBackUp = toAssign); + if (doc) { + if (toAssign[Id] === doc[Id]) { + this.retrieveGroupMappings(); + } + } }); } else { runInAction(() => { @@ -148,6 +164,20 @@ export class PresentationView extends React.Component { runInAction(() => this.presStatus = presStatusBackUp); } + retrieveGroupMappings = async () => { + //runInAction(() => this.groupMappings = new Map()); + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs !== undefined) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + let castedKey = StrCast(groupDoc.presentIdStore, null); + if (castedGrouping !== undefined && castedKey !== undefined) { + this.groupMappings.set(castedKey, castedGrouping); + } + }); + } + } + //observable means render is re-called every time variable is changed @observable collapsed: boolean = false; -- cgit v1.2.3-70-g09d2 From 7de0db8000aab06ccc8f973a50734cfdee93a388 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 13 Jun 2019 11:43:21 -0400 Subject: Documentation for saving and loading presentation state --- .../views/presentationview/PresentationElement.tsx | 16 ++++++++--- .../views/presentationview/PresentationView.tsx | 31 +++++++++------------- 2 files changed, 24 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 53e6f903b..c58570798 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -66,14 +66,15 @@ export default class PresentationElement extends React.Component>; + //get the list that stores docs that keep track of buttons let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); if (!castedList) { this.props.presButtonBackUp.selectedButtonDocs = castedList = new List(); } - + //if this is the first time this doc mounts, push a doc for it to store if (castedList.length <= this.props.index) { castedList.push(new Doc()); + //otherwise update the selected buttons depending on storage. } else { let curDoc: Doc = await castedList[this.props.index]; let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); @@ -164,14 +165,20 @@ export default class PresentationElement extends React.Component { let castedList: List = new List(); this.props.presGroupBackUp.groupDocs = castedList; this.props.groupMappings.forEach((docArray: Doc[], id: String) => { + //create a new doc for each group let newGroupDoc = new Doc(); castedList.push(newGroupDoc); + //store the id of the group in the doc newGroupDoc.presentIdStore = id.toString(); + //store the doc array which represents the group in the doc newGroupDoc.grouping = new List(docArray); }); @@ -215,13 +222,14 @@ export default class PresentationElement extends React.Component { - // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List>; let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!; castedList[this.props.index].selectedButtons = new List(this.selectedButtons); - //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp; } /** diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 0ba14e8ab..d3365725b 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -55,6 +55,7 @@ class PresentationViewList extends React.Component { //checking if part of group let storedGuids: string[] = []; let castedGroupDocs = await DocListCastAsync(this.props.presGroupBackUp.groupDocs); + //making sure the docs that were in groups, which were stored, to not get new guids. if (castedGroupDocs !== undefined) { castedGroupDocs.forEach((doc: Doc) => { let storedGuid = StrCast(doc.presentIdStore, null); @@ -70,26 +71,10 @@ class PresentationViewList extends React.Component { }); } - @action - initializeSelectedButtonDocs = (docList: Doc[]) => { - - let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs); - if (castedList.length === 0) { - let newDocArray: List = new List(); - newDocArray.push(new Doc()); - this.props.presButtonBackUp.selectedButtonDocs = newDocArray; - } else { - castedList.push(new Doc()); - } - - - } - render() { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); this.props.setChildrenDocs(children); - //this.initializeSelectedButtonDocs(children); return (
@@ -119,10 +104,10 @@ export class PresentationView extends React.Component { componentDidMount() { - // let newDoc = new Doc(); - // let newDoc2 = new Doc(); + //getting both backUp documents let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc); let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc); + //if instantiated before if (castedGroupBackUp instanceof Promise) { castedGroupBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); @@ -134,6 +119,7 @@ export class PresentationView extends React.Component { } } }); + //if never instantiated a store doc yet } else { runInAction(() => { let toAssign = new Doc(); @@ -143,6 +129,7 @@ export class PresentationView extends React.Component { }); } + //if instantiated before if (castedButtonBackUp instanceof Promise) { castedButtonBackUp.then(doc => { @@ -151,6 +138,7 @@ export class PresentationView extends React.Component { runInAction(() => this.presButtonBackUp = toAssign); }); + //if never instantiated a store doc yet } else { runInAction(() => { let toAssign = new Doc(); @@ -160,12 +148,17 @@ export class PresentationView extends React.Component { } + + //storing the presentation status,ie. whether it was stopped or playing let presStatusBackUp = BoolCast(this.props.Document.presStatus, null); runInAction(() => this.presStatus = presStatusBackUp); } + /** + * This is the function that is called to retrieve the groups that have been stored and + * push them to the groupMappings. + */ retrieveGroupMappings = async () => { - //runInAction(() => this.groupMappings = new Map()); let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); if (castedGroupDocs !== undefined) { castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { -- cgit v1.2.3-70-g09d2 From cebfbc2ce39befaa5c2454a740a3250286b676de Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 13 Jun 2019 20:07:05 -0400 Subject: zoom partial work --- .../collectionFreeForm/CollectionFreeFormView.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1a1614ac7..dc1bb5866 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -271,10 +271,30 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { newState.initializers[id] = { panX: newPanX, panY: newPanY }; HistoryUtil.pushState(newState); this.setPan(newPanX, newPanY); + this.setScaleToZoom(doc); this.props.Document.panTransformType = "Ease"; this.props.focus(this.props.Document); } + setScaleToZoom = (doc: Doc) => { + let p = this.props; + let PanelHeight = p.PanelHeight(); + let panelWidth = p.PanelWidth(); + // let heightDif: number = PanelHeight - NumCast(doc.height); + // let widthDif: number = panelWidth - NumCast(doc.width); + let docHeight = NumCast(doc.height); + let docWidth = NumCast(doc.width); + let targetHeight = 0.8 * PanelHeight; + let targetWidth = 0.8 * panelWidth; + + let maxScaleX: number = targetWidth / docWidth; + let maxScaleY: number = targetHeight / docHeight; + // let maxScaleX: number = NumCast(doc.width) / (panelWidth - 10); + // let maxScaleY: number = NumCast(doc.height) / (PanelHeight - 10); + let maxApplicableScale = Math.min(maxScaleX, maxScaleY); + this.Document.scale = maxApplicableScale; + } + getDocumentViewProps(document: Doc): DocumentViewProps { return { -- cgit v1.2.3-70-g09d2 From 19d5016acc3ff058a9665babb202e945c1fac766 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 14 Jun 2019 12:05:51 -0400 Subject: commented out code --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index dc1bb5866..5d26cb0c2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -271,9 +271,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { newState.initializers[id] = { panX: newPanX, panY: newPanY }; HistoryUtil.pushState(newState); this.setPan(newPanX, newPanY); - this.setScaleToZoom(doc); this.props.Document.panTransformType = "Ease"; this.props.focus(this.props.Document); + //this.setScaleToZoom(doc); + } setScaleToZoom = (doc: Doc) => { -- cgit v1.2.3-70-g09d2 From 218c8b6476621ef0ffe151014f77bb1d506705a3 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 14 Jun 2019 18:24:01 -0400 Subject: Zooming added to presentation, and done --- src/client/util/DocumentManager.ts | 31 +++++++- src/client/util/TooltipTextMenu.tsx | 2 +- src/client/views/MainOverlayTextBox.tsx | 2 +- src/client/views/MainView.tsx | 5 +- src/client/views/SearchItem.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 6 +- .../views/collections/CollectionSchemaView.tsx | 4 +- .../views/collections/CollectionStackingView.tsx | 2 + .../views/collections/CollectionTreeView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 31 +++++--- src/client/views/nodes/DocumentView.tsx | 10 ++- src/client/views/nodes/FieldView.tsx | 5 +- .../views/presentationview/PresentationElement.tsx | 31 +++++++- .../views/presentationview/PresentationView.tsx | 93 +++++++++++++++++++--- 14 files changed, 184 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 65c4b9e4b..a613625cb 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,4 +1,4 @@ -import { computed, observable } from 'mobx'; +import { computed, observable, action } from 'mobx'; import { DocumentView } from '../views/nodes/DocumentView'; import { Doc, DocListCast, Opt } from '../../new_fields/Doc'; import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types'; @@ -115,7 +115,7 @@ export class DocumentManager { } @undoBatch - public jumpToDocument = async (docDelegate: Doc, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void, linkPage?: number): Promise => { + public jumpToDocument = async (docDelegate: Doc, willZoom: boolean, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void, linkPage?: number): Promise => { let doc = Doc.GetProto(docDelegate); const contextDoc = await Cast(doc.annotationOn, Doc); if (contextDoc) { @@ -128,7 +128,7 @@ export class DocumentManager { if (!forceDockFunc && (docView = DocumentManager.Instance.getDocumentView(doc))) { docView.props.Document.libraryBrush = true; if (linkPage !== undefined) docView.props.Document.curPage = linkPage; - docView.props.focus(docView.props.Document); + docView.props.focus(docView.props.Document, willZoom); } else { if (!contextDoc) { const actualDoc = Doc.MakeAlias(docDelegate); @@ -140,11 +140,34 @@ export class DocumentManager { docDelegate.libraryBrush = true; if (!forceDockFunc && (contextView = DocumentManager.Instance.getDocumentView(contextDoc))) { contextDoc.panTransformType = "Ease"; - contextView.props.focus(contextDoc); + contextView.props.focus(contextDoc, willZoom); } else { (dockFunc || CollectionDockingView.Instance.AddRightSplit)(contextDoc); } } } } + + @action + zoomIntoScale = (docDelegate: Doc, scale: number) => { + let doc = Doc.GetProto(docDelegate); + + let docView: DocumentView | null; + docView = DocumentManager.Instance.getDocumentView(doc); + if (docView) { + docView.props.zoomToScale(scale); + } + } + + getScaleOfDocView = (docDelegate: Doc) => { + let doc = Doc.GetProto(docDelegate); + + let docView: DocumentView | null; + docView = DocumentManager.Instance.getDocumentView(doc); + if (docView) { + return docView.props.getScale(); + } else { + return 1; + } + } } \ No newline at end of file diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index f517f757a..34785446b 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -192,7 +192,7 @@ export class TooltipTextMenu { DocServer.GetRefField(docid).then(action((f: Opt) => { if (f instanceof Doc) { if (DocumentManager.Instance.getDocumentView(f)) { - DocumentManager.Instance.getDocumentView(f)!.props.focus(f); + DocumentManager.Instance.getDocumentView(f)!.props.focus(f, false); } else if (CollectionDockingView.Instance) CollectionDockingView.Instance.AddRightSplit(f); } diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index 24327b995..d1224febe 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -102,6 +102,6 @@ export class MainOverlayTextBox extends React.Component
; } - else return (null); Z + else return (null); } } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3d772916e..f78879efe 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -199,7 +199,10 @@ export class MainView extends React.Component { parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} - ContainingCollectionView={undefined} />; + ContainingCollectionView={undefined} + zoomToScale={emptyFunction} + getScale={returnOne} + />; let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; console.log("GETTING mainContent()"); console.log(castRes instanceof Promise); diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx index 01c7316d6..101d893de 100644 --- a/src/client/views/SearchItem.tsx +++ b/src/client/views/SearchItem.tsx @@ -24,7 +24,7 @@ library.add(faFilm); export class SearchItem extends React.Component { onClick = () => { - DocumentManager.Instance.jumpToDocument(this.props.doc); + DocumentManager.Instance.jumpToDocument(this.props.doc, false); } //needs help diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index dcc1bd95d..81f574a6c 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -9,7 +9,7 @@ import { Doc, Field, Opt, DocListCast } from "../../../new_fields/Doc"; import { FieldId } from "../../../new_fields/RefField"; import { listSpec } from "../../../new_fields/Schema"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { emptyFunction, returnTrue, Utils } from "../../../Utils"; +import { emptyFunction, returnTrue, Utils, returnOne } from "../../../Utils"; import { DocServer } from "../../DocServer"; import { DragLinksAsDocuments, DragManager } from "../../util/DragManager"; import { Transform } from '../../util/Transform'; @@ -483,7 +483,9 @@ export class DockedFrameRenderer extends React.Component { whenActiveChanged={emptyFunction} focus={emptyFunction} addDocTab={this.addDocTab} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + zoomToScale={emptyFunction} + getScale={returnOne} />
); } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 11d71d023..715faafd0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -7,7 +7,7 @@ import { observer } from "mobx-react"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import { MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss'; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; import { SetupDrag } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; @@ -451,6 +451,8 @@ export class CollectionSchemaPreview extends React.Component )} {input} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index da7ea50c6..e1453c658 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -146,6 +146,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { bringToFront={emptyFunction} whenActiveChanged={this.props.whenActiveChanged} collapseToPoint={this.collapseToPoint} + zoomToScale={emptyFunction} + getScale={returnOne} /> ); }) diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 2814c0502..c80bd8fce 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -147,7 +147,7 @@ class TreeView extends React.Component { ContextMenu.Instance.addItem({ description: "Open Tab", event: () => this.props.addDocTab(this.props.document, "inTab"), icon: "folder" }); ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, "onRight"), icon: "caret-square-right" }); if (DocumentManager.Instance.getDocumentViews(this.props.document).length) { - ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) }); + ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document, false)) }); } ContextMenu.Instance.addItem({ description: "Delete Item", event: undoBatch(() => this.props.deleteDoc(this.props.document)) }); } else { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5d26cb0c2..419d95b5f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -244,7 +244,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { doc.zIndex = docs.length + 1; } - focusDocument = (doc: Doc) => { + focusDocument = (doc: Doc, willZoom: boolean) => { const panX = this.Document.panX; const panY = this.Document.panY; const id = this.Document[Id]; @@ -271,9 +271,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { newState.initializers[id] = { panX: newPanX, panY: newPanY }; HistoryUtil.pushState(newState); this.setPan(newPanX, newPanY); + this.props.Document.panTransformType = "Ease"; this.props.focus(this.props.Document); - //this.setScaleToZoom(doc); + if (willZoom) { + this.setScaleToZoom(doc); + } } @@ -281,21 +284,29 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { let p = this.props; let PanelHeight = p.PanelHeight(); let panelWidth = p.PanelWidth(); - // let heightDif: number = PanelHeight - NumCast(doc.height); - // let widthDif: number = panelWidth - NumCast(doc.width); + let docHeight = NumCast(doc.height); let docWidth = NumCast(doc.width); - let targetHeight = 0.8 * PanelHeight; - let targetWidth = 0.8 * panelWidth; + let targetHeight = 0.5 * PanelHeight; + let targetWidth = 0.5 * panelWidth; let maxScaleX: number = targetWidth / docWidth; let maxScaleY: number = targetHeight / docHeight; - // let maxScaleX: number = NumCast(doc.width) / (panelWidth - 10); - // let maxScaleY: number = NumCast(doc.height) / (PanelHeight - 10); let maxApplicableScale = Math.min(maxScaleX, maxScaleY); this.Document.scale = maxApplicableScale; } + zoomToScale = (scale: number) => { + this.Document.scale = scale; + } + + getScale = () => { + if (this.Document.scale) { + return this.Document.scale; + } + return 1; + } + getDocumentViewProps(document: Doc): DocumentViewProps { return { @@ -315,6 +326,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { whenActiveChanged: this.props.whenActiveChanged, bringToFront: this.bringToFront, addDocTab: this.props.addDocTab, + zoomToScale: this.zoomToScale, + getScale: this.getScale }; } @@ -346,7 +359,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { private childViews = () => [ , ...this.views - ]; + ] render() { const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; const easing = () => this.props.Document.panTransformType === "Ease"; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 449fa76a7..fb7657b68 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -69,13 +69,15 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; - focus: (doc: Doc) => void; + focus: (doc: Doc, willZoom: boolean) => void; selectOnLoad: boolean; parentActive: () => boolean; whenActiveChanged: (isActive: boolean) => void; bringToFront: (doc: Doc) => void; addDocTab: (doc: Doc, where: string) => void; collapseToPoint?: (scrpt: number[], expandedDocs: Doc[] | undefined) => void; + zoomToScale: (scale: number) => void; + getScale: () => number; } const schema = createSchema({ @@ -302,8 +304,8 @@ export class DocumentView extends DocComponent(Docu this._lastTap = Date.now(); } - deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); } - fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }), "onRight") }; + deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); }; + fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }), "onRight"); }; makeBtnClicked = (): void => { let doc = Doc.GetProto(this.props.Document); doc.isButton = !BoolCast(doc.isButton, false); @@ -422,7 +424,7 @@ export class DocumentView extends DocComponent(Docu this.props.addDocTab && this.props.addDocTab(Docs.SchemaDocument(["title"], aliases, {}), "onRight"); }, icon: "search" }); - cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document), icon: "crosshairs" }); + cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document, false), icon: "crosshairs" }); cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])), icon: "link" }); cm.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]), icon: "fingerprint" }); cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" }); diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 7b642b299..3047d55a3 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -103,7 +103,10 @@ export class FieldView extends React.Component { ContainingCollectionView={this.props.ContainingCollectionView} parentActive={this.props.active} whenActiveChanged={this.props.whenActiveChanged} - bringToFront={emptyFunction} /> + bringToFront={emptyFunction} + zoomToScale={emptyFunction} + getScale={returnOne} + /> ); } else if (field instanceof List) { diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index c58570798..00dc07921 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -12,6 +12,7 @@ import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fort import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; +import { DocumentManager } from "../../util/DocumentManager"; @@ -27,7 +28,7 @@ interface PresentationElementProps { document: Doc; index: number; deleteDocument(index: number): void; - gotoDocument(index: number): void; + gotoDocument(index: number, fromDoc: number): Promise; allListElements: Doc[]; groupMappings: Map; presStatus: boolean; @@ -300,6 +301,9 @@ export default class PresentationElement extends React.Component { + e.stopPropagation(); + if (this.selectedButtons[buttonIndex.Show]) { + this.selectedButtons[buttonIndex.Show] = false; + this.props.document.viewScale = 1; + + } else { + if (this.selectedButtons[buttonIndex.Navigate]) { + this.selectedButtons[buttonIndex.Navigate] = false; + } + this.selectedButtons[buttonIndex.Show] = true; + } + + this.autoSaveButtonChange(buttonIndex.Show); + + } + render() { let p = this.props; @@ -330,13 +355,13 @@ export default class PresentationElement extends React.Component { p.gotoDocument(p.index); e.stopPropagation(); }}> + onClick={e => { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}> {`${p.index + 1}. ${title}`}

- + diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index d3365725b..6cf5fad7e 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -26,7 +26,7 @@ export interface PresViewProps { interface PresListProps extends PresViewProps { deleteDocument(index: number): void; - gotoDocument(index: number): void; + gotoDocument(index: number, fromDoc: number): Promise; groupMappings: Map; presElementsMappings: Map; setChildrenDocs: (docList: Doc[]) => void; @@ -71,9 +71,24 @@ class PresentationViewList extends React.Component { }); } + /** + * Initially every document starts with a viewScale 1, which means + * that they will be displayed in a canvas with scale 1. + */ + @action + initializeScaleViews = (docList: Doc[]) => { + docList.forEach((doc: Doc) => { + let curScale = NumCast(doc.viewScale, null); + if (curScale === undefined) { + doc.viewScale = 1; + } + }); + } + render() { const children = DocListCast(this.props.Document.data); this.initializeGroupIds(children); + this.initializeScaleViews(children); this.props.setChildrenDocs(children); return ( @@ -102,7 +117,6 @@ export class PresentationView extends React.Component { @observable presButtonBackUp: Doc = new Doc(); - componentDidMount() { //getting both backUp documents let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc); @@ -195,7 +209,7 @@ export class PresentationView extends React.Component { if (nextSelected === current) nextSelected = current + 1; } - this.gotoDocument(nextSelected); + this.gotoDocument(nextSelected, current); } back = async () => { @@ -209,6 +223,7 @@ export class PresentationView extends React.Component { //asking for its presentation id. let curPresId = StrCast(docAtCurrent.presentId); let prevSelected = current - 1; + let zoomOut: boolean = false; //checking if this presentation id is mapped to a group, if so chosing the first element in group if (this.groupMappings.has(curPresId)) { @@ -217,11 +232,29 @@ export class PresentationView extends React.Component { //end of grup so go beyond if (prevSelected === current) prevSelected = current - 1; + //checking if any of the group members had used zooming in + currentsArray.forEach((doc: Doc) => { + if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) { + 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 (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { + let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); + if (prevScale !== undefined) { + if (prevScale !== curScale) { + DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + } + } + } + this.gotoDocument(prevSelected, current); - this.gotoDocument(prevSelected); } /** @@ -285,9 +318,10 @@ export class PresentationView extends React.Component { * 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 = (curDoc: Doc) => { + navigateToElement = async (curDoc: Doc, fromDoc: number) => { let docToJump: Doc = curDoc; let curDocPresId = StrCast(curDoc.presentId, null); + let willZoom: boolean = false; //checking if in group if (curDocPresId !== undefined) { @@ -297,6 +331,11 @@ export class PresentationView extends React.Component { let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected; if (selectedButtons[buttonIndex.Navigate]) { docToJump = doc; + willZoom = false; + } + if (selectedButtons[buttonIndex.Show]) { + docToJump = doc; + willZoom = true; } }); } @@ -305,13 +344,35 @@ export class PresentationView extends React.Component { //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)!.selected[buttonIndex.Navigate]) { - DocumentManager.Instance.jumpToDocument(curDoc); - } else { - return; + let curDocButtons = this.presElementsMappings.get(curDoc)!.selected; + if (curDocButtons[buttonIndex.Navigate]) { + DocumentManager.Instance.jumpToDocument(curDoc, false); + } else if (curDocButtons[buttonIndex.Show]) { + 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; + + //saving the scale user was on before zooming in + if (curScale !== 1) { + this.childrenDocs[fromDoc].viewScale = curScale; + } + } + return; + } + 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); + let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); + curDoc.viewScale = newScale; + //saving the scale that user was on + if (curScale !== 1) { + this.childrenDocs[fromDoc].viewScale = curScale; } - DocumentManager.Instance.jumpToDocument(docToJump); + } /** @@ -340,7 +401,7 @@ export class PresentationView extends React.Component { } } @action - public gotoDocument = async (index: number) => { + public gotoDocument = async (index: number, fromDoc: number) => { const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); if (!list) { return; @@ -357,7 +418,7 @@ export class PresentationView extends React.Component { const doc = await list[index]; if (this.presStatus) { - this.navigateToElement(doc); + this.navigateToElement(doc, fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); } @@ -407,7 +468,8 @@ export class PresentationView extends React.Component { } else { this.presStatus = true; this.startPresentation(0); - this.gotoDocument(0); + const current = NumCast(this.props.Document.selectedDoc); + this.gotoDocument(0, current); } this.props.Document.presStatus = this.presStatus; } @@ -423,6 +485,11 @@ export class PresentationView extends React.Component { doc.opacity = 1; }); this.props.Document.selectedDoc = 0; + if (this.childrenDocs.length === 0) { + return; + } + DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); + this.childrenDocs[0].viewScale = 1; } -- cgit v1.2.3-70-g09d2 From ae86fd1237873e7aa3144e7a0c6890ae60507d66 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 17 Jun 2019 20:03:03 -0400 Subject: Presentation Selection UI a bit, with bugs --- src/client/views/MainView.tsx | 7 +- .../views/presentationview/PresentationView.tsx | 117 ++++++++++++++------- 2 files changed, 85 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f78879efe..7d2aa3199 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -32,6 +32,7 @@ import { listSpec } from '../../new_fields/Schema'; import { Id } from '../../new_fields/FieldSymbols'; import { HistoryUtil } from '../util/History'; import { CollectionBaseView } from './collections/CollectionBaseView'; +import { List } from '../../new_fields/List'; @observer @@ -46,7 +47,7 @@ export class MainView extends React.Component { private set mainContainer(doc: Opt) { if (doc) { if (!("presentationView" in doc)) { - doc.presentationView = Docs.TreeDocument([], { title: "Presentation" }); + doc.presentationView = new List([Docs.TreeDocument([], { title: "Presentation" })]); } CurrentUserUtils.UserDocument.activeWorkspace = doc; } @@ -203,7 +204,7 @@ export class MainView extends React.Component { zoomToScale={emptyFunction} getScale={returnOne} />; - let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; + let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, listSpec(Doc))) : undefined; console.log("GETTING mainContent()"); console.log(castRes instanceof Promise); console.log(castRes); @@ -211,7 +212,7 @@ export class MainView extends React.Component { {({ measureRef }) =>
{content} - {castRes ? : null} + {castRes ? : null}
} ; diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 6cf5fad7e..ff5c6df9c 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -13,18 +13,22 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_ import PresentationElement, { buttonIndex } from "./PresentationElement"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight, faArrowLeft, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { Docs } from "../../documents/Documents"; library.add(faArrowLeft); library.add(faArrowRight); library.add(faPlay); library.add(faStop); +library.add(faPlus); +library.add(faTimes); export interface PresViewProps { - Document: Doc; + Documents: List; } -interface PresListProps extends PresViewProps { +interface PresListProps { + mainDocument: Doc; deleteDocument(index: number): void; gotoDocument(index: number, fromDoc: number): Promise; groupMappings: Map; @@ -85,15 +89,17 @@ class PresentationViewList extends React.Component { }); } + + render() { - const children = DocListCast(this.props.Document.data); + const children = DocListCast(this.props.mainDocument.data); this.initializeGroupIds(children); this.initializeScaleViews(children); this.props.setChildrenDocs(children); return (
- {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)} + {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.mainDocument} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)}
); } @@ -115,17 +121,32 @@ export class PresentationView extends React.Component { //back-up so that presentation stays the way it's when refreshed @observable presGroupBackUp: Doc = new Doc(); @observable presButtonBackUp: Doc = new Doc(); + @observable curPresentation: Doc = new Doc(); + @observable presentationsMapping: Map = new Map(); + @observable selectedPresentation: HTMLSelectElement = new HTMLSelectElement(); + + + //initilize class variables + constructor(props: PresViewProps) { + super(props); + PresentationView.Instance = this; + } + async componentWillMount() { + let docAtZero = await this.props.Documents[0]; + runInAction(() => this.curPresentation = docAtZero); + } + componentDidMount() { //getting both backUp documents - let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc); - let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc); + let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc); + let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc); //if instantiated before if (castedGroupBackUp instanceof Promise) { castedGroupBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); - this.props.Document.presGroupBackUp = toAssign; + this.curPresentation.presGroupBackUp = toAssign; runInAction(() => this.presGroupBackUp = toAssign); if (doc) { if (toAssign[Id] === doc[Id]) { @@ -138,7 +159,7 @@ export class PresentationView extends React.Component { runInAction(() => { let toAssign = new Doc(); this.presGroupBackUp = toAssign; - this.props.Document.presGroupBackUp = toAssign; + this.curPresentation.presGroupBackUp = toAssign; }); @@ -148,7 +169,7 @@ export class PresentationView extends React.Component { if (castedButtonBackUp instanceof Promise) { castedButtonBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); - this.props.Document.presButtonBackUp = toAssign; + this.curPresentation.presButtonBackUp = toAssign; runInAction(() => this.presButtonBackUp = toAssign); }); @@ -157,14 +178,14 @@ export class PresentationView extends React.Component { runInAction(() => { let toAssign = new Doc(); this.presButtonBackUp = toAssign; - this.props.Document.presButtonBackUp = toAssign; + this.curPresentation.presButtonBackUp = toAssign; }); } //storing the presentation status,ie. whether it was stopped or playing - let presStatusBackUp = BoolCast(this.props.Document.presStatus, null); + let presStatusBackUp = BoolCast(this.curPresentation.presStatus, null); runInAction(() => this.presStatus = presStatusBackUp); } @@ -188,9 +209,9 @@ export class PresentationView extends React.Component { //observable means render is re-called every time variable is changed @observable collapsed: boolean = false; - closePresentation = action(() => this.props.Document.width = 0); + closePresentation = action(() => this.curPresentation.width = 0); next = async () => { - const current = NumCast(this.props.Document.selectedDoc); + const current = NumCast(this.curPresentation.selectedDoc); //asking to get document at current index let docAtCurrentNext = await this.getDocAtIndex(current + 1); if (docAtCurrentNext === undefined) { @@ -213,7 +234,7 @@ export class PresentationView extends React.Component { } back = async () => { - const current = NumCast(this.props.Document.selectedDoc); + const current = NumCast(this.curPresentation.selectedDoc); //requesting for the doc at current index let docAtCurrent = await this.getDocAtIndex(current); if (docAtCurrent === undefined) { @@ -379,7 +400,7 @@ export class PresentationView extends React.Component { * Async function that supposedly return the doc that is located at given index. */ getDocAtIndex = async (index: number) => { - const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); if (!list) { return undefined; } @@ -387,7 +408,7 @@ export class PresentationView extends React.Component { return undefined; } - this.props.Document.selectedDoc = index; + this.curPresentation.selectedDoc = index; //awaiting async call to finish to get Doc instance const doc = await list[index]; return doc; @@ -395,21 +416,21 @@ export class PresentationView extends React.Component { @action public RemoveDoc = (index: number) => { - const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); if (value) { value.splice(index, 1); } } @action public gotoDocument = async (index: number, fromDoc: number) => { - const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); + const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); if (!list) { return; } if (index < 0 || index >= list.length) { return; } - this.props.Document.selectedDoc = index; + this.curPresentation.selectedDoc = index; if (!this.presStatus) { this.presStatus = true; @@ -425,11 +446,7 @@ export class PresentationView extends React.Component { } - //initilize class variables - constructor(props: PresViewProps) { - super(props); - PresentationView.Instance = this; - } + /** * Adds a document to the presentation view @@ -437,14 +454,14 @@ export class PresentationView extends React.Component { @action public PinDoc(doc: Doc) { //add this new doc to props.Document - const data = Cast(this.props.Document.data, listSpec(Doc)); + const data = Cast(this.curPresentation.data, listSpec(Doc)); if (data) { data.push(doc); } else { - this.props.Document.data = new List([doc]); + this.curPresentation.data = new List([doc]); } - this.props.Document.width = 300; + this.curPresentation.width = 300; } @action @@ -468,10 +485,10 @@ export class PresentationView extends React.Component { } else { this.presStatus = true; this.startPresentation(0); - const current = NumCast(this.props.Document.selectedDoc); + const current = NumCast(this.curPresentation.selectedDoc); this.gotoDocument(0, current); } - this.props.Document.presStatus = this.presStatus; + this.curPresentation.presStatus = this.presStatus; } @action @@ -484,7 +501,7 @@ export class PresentationView extends React.Component { //doc.presentId = Utils.GenerateGuid(); doc.opacity = 1; }); - this.props.Document.selectedDoc = 0; + this.curPresentation.selectedDoc = 0; if (this.childrenDocs.length === 0) { return; } @@ -518,23 +535,51 @@ export class PresentationView extends React.Component { } + @action + addNewPresentation = () => { + let title = "Presentation " + (this.props.Documents.length + 1); + let newPresentationDoc = Docs.TreeDocument([], { title: title }); + this.props.Documents.push(newPresentationDoc); + this.curPresentation = newPresentationDoc; + } + + @action + getSelectedPresentation = (e: React.ChangeEvent) => { + this.curPresentation = this.presentationsMapping.get(e.target.value)!; + } + + render() { - let titleStr = StrCast(this.props.Document.title); - let width = NumCast(this.props.Document.width); + let titleStr = StrCast(this.curPresentation.title); + let width = NumCast(this.curPresentation.width); + let presentationList = DocListCast(this.props.Documents); + + + console.log("width: ", width); + console.log("title : ", titleStr); //TODO: next and back should be icons return (
-
{titleStr}
- + {/*
{titleStr}
*/} + + + +
{this.renderPlayPauseButton()}
- +
); } -- cgit v1.2.3-70-g09d2 From 4ffcff69a2fc767c6a03d46d7296b6a8c7ffd281 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 18 Jun 2019 19:13:45 -0400 Subject: Presentations Listed, Option to Change Added, and --- .../views/presentationview/PresentationElement.tsx | 28 ++++++++- .../views/presentationview/PresentationView.tsx | 69 +++++++++++++++++++--- 2 files changed, 85 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 00dc07921..8ec6348f2 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -56,7 +56,13 @@ export enum buttonIndex { @observer export default class PresentationElement extends React.Component { - @observable selectedButtons: boolean[] = new Array(6); + @observable selectedButtons: boolean[]; + + + constructor(props: PresentationElementProps) { + super(props); + this.selectedButtons = new Array(6); + } /** * Getter to get the status of the buttons. @@ -67,6 +73,16 @@ export default class PresentationElement extends React.Component { + //get the list that stores docs that keep track of buttons let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); if (!castedList) { @@ -74,17 +90,21 @@ export default class PresentationElement extends React.Component this.selectedButtons = selectedButtonOfDoc); + console.log("New Selected Buttons: ", this.selectedButtons); } } - } /** @@ -337,6 +357,8 @@ export default class PresentationElement extends React.Component { this.initializeGroupIds(children); this.initializeScaleViews(children); this.props.setChildrenDocs(children); + console.log(this.props.mainDocument, " re-rendering"); return (
@@ -123,7 +124,9 @@ export class PresentationView extends React.Component { @observable presButtonBackUp: Doc = new Doc(); @observable curPresentation: Doc = new Doc(); @observable presentationsMapping: Map = new Map(); - @observable selectedPresentation: HTMLSelectElement = new HTMLSelectElement(); + @observable presentationsKeyMapping: Map = new Map(); + @observable selectedPresentation: HTMLSelectElement | undefined; + @observable currentSelectedPresValue: string | undefined; //initilize class variables @@ -134,12 +137,32 @@ export class PresentationView extends React.Component { async componentWillMount() { + this.props.Documents.forEach(async (doc, index: number) => { + let curDoc: Doc = await doc; + let newGuid = Utils.GenerateGuid(); + this.presentationsKeyMapping.set(curDoc, newGuid); + this.presentationsMapping.set(newGuid, curDoc); + if (index === 0) { + runInAction(() => this.currentSelectedPresValue = newGuid); + runInAction(() => this.curPresentation = curDoc); + } + }); + } + + async componentDidMount() { + let docAtZero = await this.props.Documents[0]; runInAction(() => this.curPresentation = docAtZero); + + this.setPresentationBackUps(); + + } - componentDidMount() { + + setPresentationBackUps = async () => { //getting both backUp documents + let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc); let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc); //if instantiated before @@ -154,7 +177,12 @@ export class PresentationView extends React.Component { } } }); + //if never instantiated a store doc yet + } else if (castedGroupBackUp instanceof Doc) { + let castedDoc: Doc = await castedGroupBackUp; + runInAction(() => this.presGroupBackUp = castedDoc); + this.retrieveGroupMappings(); } else { runInAction(() => { let toAssign = new Doc(); @@ -170,10 +198,16 @@ export class PresentationView extends React.Component { castedButtonBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); this.curPresentation.presButtonBackUp = toAssign; + console.log("Called the promise one!!"); runInAction(() => this.presButtonBackUp = toAssign); }); //if never instantiated a store doc yet + } else if (castedButtonBackUp instanceof Doc) { + let castedDoc: Doc = await castedButtonBackUp; + runInAction(() => this.presButtonBackUp = castedDoc); + console.log("Called the important action"); + } else { runInAction(() => { let toAssign = new Doc(); @@ -541,11 +575,30 @@ export class PresentationView extends React.Component { let newPresentationDoc = Docs.TreeDocument([], { title: title }); this.props.Documents.push(newPresentationDoc); this.curPresentation = newPresentationDoc; + let newGuid = Utils.GenerateGuid(); + this.presentationsMapping.set(newGuid, newPresentationDoc); + this.presentationsKeyMapping.set(newPresentationDoc, newGuid); + this.currentSelectedPresValue = newGuid; + this.setPresentationBackUps(); + + // if (this.selectedPresentation) { + // this.selectedPresentation.selectedIndex = 1; + // console.log("Selected Pres: ", this.selectedPresentation); + // console.log("New value: ", this.selectedPresentation.value); + // console.log("New Index: ", this.selectedPresentation.selectedIndex); + + + // } + } @action getSelectedPresentation = (e: React.ChangeEvent) => { - this.curPresentation = this.presentationsMapping.get(e.target.value)!; + let selectedGuid = e.target.value; + this.curPresentation = this.presentationsMapping.get(selectedGuid)!; + this.currentSelectedPresValue = selectedGuid; + this.setPresentationBackUps(); + } @@ -555,19 +608,17 @@ export class PresentationView extends React.Component { let presentationList = DocListCast(this.props.Documents); - console.log("width: ", width); - console.log("title : ", titleStr); //TODO: next and back should be icons return (
{/*
{titleStr}
*/} - this.selectedPresentation = e}> {presentationList.map((doc: Doc, index: number) => { - let newGuid = Utils.GenerateGuid(); - this.presentationsMapping.set(newGuid, doc); - return ; + let mappedGuid = this.presentationsKeyMapping.get(doc); + let docGuid: string = mappedGuid ? mappedGuid.toString() : ""; + return ; })} -- cgit v1.2.3-70-g09d2 From fb62f3b2e39bbe2dd3da5eaffedbaa8e60f06dbb Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 19 Jun 2019 12:35:54 -0400 Subject: Grouping for different presentations fixed --- .../views/presentationview/PresentationView.tsx | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 01cddbc45..2ebbb84ea 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -233,6 +233,11 @@ export class PresentationView extends React.Component { castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { let castedGrouping = await DocListCastAsync(groupDoc.grouping); let castedKey = StrCast(groupDoc.presentIdStore, null); + if (castedGrouping) { + castedGrouping.forEach((doc: Doc) => { + doc.presentId = castedKey; + }); + } if (castedGrouping !== undefined && castedKey !== undefined) { this.groupMappings.set(castedKey, castedGrouping); } @@ -481,6 +486,38 @@ export class PresentationView extends React.Component { } + resetGroupIds = async () => { + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs !== undefined) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + if (castedGrouping) { + castedGrouping.forEach((doc: Doc) => { + doc.presentId = Utils.GenerateGuid(); + }); + } + // let castedKey = StrCast(groupDoc.presentIdStore, null); + // if (castedGrouping !== undefined && castedKey !== undefined) { + // this.groupMappings.set(castedKey, castedGrouping); + // } + }); + } + } + + // reloadGroupIds = async () => { + // let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + // if (castedGroupDocs !== undefined) { + // castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + // let castedGrouping = await DocListCastAsync(groupDoc.grouping); + // let castedKey = StrCast(groupDoc.presentIdStore, null); + // if (castedGrouping !== undefined && castedKey !== undefined) { + // this.groupMappings.set(castedKey, castedGrouping); + // } + // }); + // } + // } + + /** * Adds a document to the presentation view @@ -578,6 +615,7 @@ export class PresentationView extends React.Component { let newGuid = Utils.GenerateGuid(); this.presentationsMapping.set(newGuid, newPresentationDoc); this.presentationsKeyMapping.set(newPresentationDoc, newGuid); + this.resetGroupIds(); this.currentSelectedPresValue = newGuid; this.setPresentationBackUps(); @@ -596,6 +634,7 @@ export class PresentationView extends React.Component { getSelectedPresentation = (e: React.ChangeEvent) => { let selectedGuid = e.target.value; this.curPresentation = this.presentationsMapping.get(selectedGuid)!; + this.resetGroupIds(); this.currentSelectedPresValue = selectedGuid; this.setPresentationBackUps(); -- cgit v1.2.3-70-g09d2 From a288a2fd0a30a3a16dd01bc4e12dcf6bc117c766 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 19 Jun 2019 15:25:24 -0400 Subject: Navigation and Zoom Option For Manual Selection Added and New Presentation TItle Naming Added Now, You can manually click on navigate or zoom and navigate to that document if current was their index. A way to manually disregard groups, and just navigate to that doc. --- .../views/presentationview/PresentationElement.tsx | 11 ++- .../views/presentationview/PresentationView.tsx | 89 +++++++++++++++------- 2 files changed, 70 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 8ec6348f2..a74cbbd65 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -98,10 +98,8 @@ export default class PresentationElement extends React.Component this.selectedButtons = selectedButtonOfDoc); - console.log("New Selected Buttons: ", this.selectedButtons); } } @@ -325,6 +323,10 @@ export default class PresentationElement extends React.Component { + + /** * Method that initializes presentation ids for the * docs that is in the presentation, when presentation list * gets re-rendered. It makes sure to not assign ids to the * docs that are in the group, so that mapping won't be disrupted. */ + @action initializeGroupIds = async (docList: Doc[]) => { docList.forEach(async (doc: Doc, index: number) => { @@ -89,14 +92,11 @@ class PresentationViewList extends React.Component { }); } - - render() { const children = DocListCast(this.props.mainDocument.data); this.initializeGroupIds(children); this.initializeScaleViews(children); this.props.setChildrenDocs(children); - console.log(this.props.mainDocument, " re-rendering"); return (
@@ -125,8 +125,10 @@ export class PresentationView extends React.Component { @observable curPresentation: Doc = new Doc(); @observable presentationsMapping: Map = new Map(); @observable presentationsKeyMapping: Map = new Map(); - @observable selectedPresentation: HTMLSelectElement | undefined; @observable currentSelectedPresValue: string | undefined; + @observable PresTitleInputOpen: boolean = false; + @observable titleInputElement: HTMLInputElement | undefined; + //@observable presTitle: string = "Presentation"; //initilize class variables @@ -156,7 +158,6 @@ export class PresentationView extends React.Component { this.setPresentationBackUps(); - } @@ -198,7 +199,6 @@ export class PresentationView extends React.Component { castedButtonBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); this.curPresentation.presButtonBackUp = toAssign; - console.log("Called the promise one!!"); runInAction(() => this.presButtonBackUp = toAssign); }); @@ -206,7 +206,6 @@ export class PresentationView extends React.Component { } else if (castedButtonBackUp instanceof Doc) { let castedDoc: Doc = await castedButtonBackUp; runInAction(() => this.presButtonBackUp = castedDoc); - console.log("Called the important action"); } else { runInAction(() => { @@ -551,7 +550,7 @@ export class PresentationView extends React.Component { @action startOrResetPres = () => { if (this.presStatus) { - this.presStatus = false; + //this.presStatus = false; this.resetPresentation(); } else { this.presStatus = true; @@ -566,18 +565,28 @@ export class PresentationView extends React.Component { resetPresentation = () => { //this.groupMappings = new Map(); //let selectedButtons: boolean[]; - this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { - //selectedButtons = component.selected; - //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); - //doc.presentId = Utils.GenerateGuid(); + // this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { + // //selectedButtons = component.selected; + // //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); + // //doc.presentId = Utils.GenerateGuid(); + // doc.opacity = 1; + // doc.viewScale = 1; + // }); + + + 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; } DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); - this.childrenDocs[0].viewScale = 1; + + // this.childrenDocs[0].viewScale = 1; } @@ -607,18 +616,21 @@ export class PresentationView extends React.Component { } @action - addNewPresentation = () => { - let title = "Presentation " + (this.props.Documents.length + 1); - let newPresentationDoc = Docs.TreeDocument([], { title: title }); + addNewPresentation = (presTitle: string) => { + //let title = "Presentation " + (this.props.Documents.length + 1); + let newPresentationDoc = Docs.TreeDocument([], { title: presTitle }); this.props.Documents.push(newPresentationDoc); this.curPresentation = newPresentationDoc; let newGuid = Utils.GenerateGuid(); this.presentationsMapping.set(newGuid, newPresentationDoc); this.presentationsKeyMapping.set(newPresentationDoc, newGuid); this.resetGroupIds(); + this.resetPresentation(); this.currentSelectedPresValue = newGuid; this.setPresentationBackUps(); + + // if (this.selectedPresentation) { // this.selectedPresentation.selectedIndex = 1; // console.log("Selected Pres: ", this.selectedPresentation); @@ -635,16 +647,44 @@ export class PresentationView extends React.Component { let selectedGuid = e.target.value; this.curPresentation = this.presentationsMapping.get(selectedGuid)!; this.resetGroupIds(); + this.resetPresentation(); this.currentSelectedPresValue = selectedGuid; this.setPresentationBackUps(); + + } + + renderSelectOrPresSelection = () => { + let presentationList = DocListCast(this.props.Documents); + if (this.PresTitleInputOpen) { + return this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; + } else { + return ; + } + } + + @action + submitPresentationTitle = (e: React.KeyboardEvent) => { + if (e.keyCode === 13) { + let presTitle = this.titleInputElement!.value; + this.titleInputElement!.value = ""; + this.PresTitleInputOpen = false; + if (presTitle === "") { + presTitle = "Presentation"; + } + this.addNewPresentation(presTitle); + } } render() { - let titleStr = StrCast(this.curPresentation.title); let width = NumCast(this.curPresentation.width); - let presentationList = DocListCast(this.props.Documents); @@ -652,16 +692,11 @@ export class PresentationView extends React.Component { return (
- {/*
{titleStr}
*/} - + {this.renderSelectOrPresSelection()} - +
-- cgit v1.2.3-70-g09d2 From 4c1383e47f2203a00bc7f3d73c209f3149d6a772 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 19 Jun 2019 15:53:05 -0400 Subject: ... --- src/client/views/presentationview/PresentationElement.tsx | 2 +- src/client/views/presentationview/PresentationView.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index a74cbbd65..a84bbbf3c 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -56,7 +56,7 @@ export enum buttonIndex { @observer export default class PresentationElement extends React.Component { - @observable selectedButtons: boolean[]; + @observable private selectedButtons: boolean[]; constructor(props: PresentationElementProps) { diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 97ec4e2fa..ad3a4bffe 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -453,10 +453,11 @@ export class PresentationView extends React.Component { } @action - public RemoveDoc = (index: number) => { + public RemoveDoc = async (index: number) => { const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); if (value) { - value.splice(index, 1); + let removedDoc = await value.splice(index, 1)[0]; + this.presElementsMappings.delete(removedDoc); } } @action -- cgit v1.2.3-70-g09d2 From 6fc6054dc7aea144fd967a8cb3fe7d8fe5ec6d6d Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 19 Jun 2019 19:13:30 -0400 Subject: Width of the presentations fixed, removal of presentations option added, backUP group and normal groups updated when a doc is removed from presentation by removing it from both --- .../views/presentationview/PresentationView.tsx | 71 +++++++++++++++++----- 1 file changed, 55 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index ad3a4bffe..2b3f5e199 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -13,7 +13,7 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_ import PresentationElement, { buttonIndex } from "./PresentationElement"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus } from '@fortawesome/free-solid-svg-icons'; import { Docs } from "../../documents/Documents"; library.add(faArrowLeft); @@ -22,6 +22,7 @@ library.add(faPlay); library.add(faStop); library.add(faPlus); library.add(faTimes); +library.add(faMinus); export interface PresViewProps { Documents: List; @@ -100,7 +101,7 @@ class PresentationViewList extends React.Component { return (
- {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.mainDocument} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)} + {children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={doc[Id]} mainDocument={this.props.mainDocument} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)}
); } @@ -458,6 +459,40 @@ export class PresentationView extends React.Component { if (value) { let removedDoc = await value.splice(index, 1)[0]; this.presElementsMappings.delete(removedDoc); + + let removedDocPresentId = StrCast(removedDoc.presentId); + if (this.groupMappings.has(removedDocPresentId)) { + let removedDocsGroup = this.groupMappings.get(removedDocPresentId); + if (removedDocsGroup) { + removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1); + if (removedDocsGroup.length === 0) { + this.groupMappings.delete(removedDocPresentId); + } + } + } + let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); + if (castedList) { + castedList.splice(index, 1); + } + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedKey = StrCast(groupDoc.presentIdStore, null); + if (castedKey === removedDocPresentId) { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + if (castedGrouping) { + castedGrouping.splice(castedGrouping.indexOf(removedDoc), 1); + if (castedGrouping.length === 0) { + castedGroupDocs!.splice(castedGroupDocs!.indexOf(groupDoc), 1); + } + } + } + + }); + + } + + } } @action @@ -532,7 +567,7 @@ export class PresentationView extends React.Component { this.curPresentation.data = new List([doc]); } - this.curPresentation.width = 300; + this.curPresentation.width = 400; } @action @@ -630,17 +665,6 @@ export class PresentationView extends React.Component { this.currentSelectedPresValue = newGuid; this.setPresentationBackUps(); - - - // if (this.selectedPresentation) { - // this.selectedPresentation.selectedIndex = 1; - // console.log("Selected Pres: ", this.selectedPresentation); - // console.log("New value: ", this.selectedPresentation.value); - // console.log("New Index: ", this.selectedPresentation.selectedIndex); - - - // } - } @action @@ -664,7 +688,7 @@ export class PresentationView extends React.Component { {presentationList.map((doc: Doc, index: number) => { let mappedGuid = this.presentationsKeyMapping.get(doc); let docGuid: string = mappedGuid ? mappedGuid.toString() : ""; - return ; + return ; })} ; } @@ -683,10 +707,24 @@ export class PresentationView extends React.Component { } } + @action + removePresentation = () => { + if (this.presentationsMapping.size !== 1) { + let presentationList = Cast(this.props.Documents, listSpec(Doc)); + let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!); + this.presentationsKeyMapping.delete(removedDoc!); + this.presentationsMapping.delete(this.currentSelectedPresValue!); + let remainingPresentations = this.presentationsMapping.values(); + let nextDoc = remainingPresentations.next().value; + this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); + presentationList!.splice(presentationList!.indexOf(removedDoc!), 1); + } + } + render() { - let width = NumCast(this.curPresentation.width); + let width = NumCast(this.curPresentation.width); //TODO: next and back should be icons @@ -698,6 +736,7 @@ export class PresentationView extends React.Component { +
-- cgit v1.2.3-70-g09d2 From 711abbeba69e4d9afc634b8edf019b12b6dff915 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Thu, 20 Jun 2019 12:54:41 -0400 Subject: Documentation and reset Presentation at removal fixed --- .../views/presentationview/PresentationElement.tsx | 3 +- .../views/presentationview/PresentationView.tsx | 123 +++++++++++++-------- 2 files changed, 79 insertions(+), 47 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index a84bbbf3c..b12dfd9d5 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -12,7 +12,6 @@ import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fort import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; -import { DocumentManager } from "../../util/DocumentManager"; @@ -72,11 +71,13 @@ export default class PresentationElement extends React.Component { //back-up so that presentation stays the way it's when refreshed @observable presGroupBackUp: Doc = new Doc(); @observable presButtonBackUp: Doc = new Doc(); + + //Keeping track of the doc for the current presentation @observable curPresentation: Doc = new Doc(); + //Mapping of guids to presentations. @observable presentationsMapping: Map = new Map(); + //Mapping of presentations to guid, so that select option values can be given. @observable presentationsKeyMapping: Map = 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 presTitle: string = "Presentation"; - //initilize class variables constructor(props: PresViewProps) { @@ -138,13 +143,17 @@ export class PresentationView extends React.Component { PresentationView.Instance = this; } - + //The first lifecycle function that gets called to set up the current presentation. async componentWillMount() { this.props.Documents.forEach(async (doc, index: number) => { + + //For each presentation received from mainContainer, a mapping is created. let curDoc: Doc = await doc; let newGuid = Utils.GenerateGuid(); this.presentationsKeyMapping.set(curDoc, newGuid); this.presentationsMapping.set(newGuid, curDoc); + + //The Presentation at first index gets set as default start presentation if (index === 0) { runInAction(() => this.currentSelectedPresValue = newGuid); runInAction(() => this.curPresentation = curDoc); @@ -152,8 +161,9 @@ export class PresentationView extends React.Component { }); } + //Second lifecycle function that gets called when component mounts. It makes sure to + //get the back-up information from previous session for the current presentation. async componentDidMount() { - let docAtZero = await this.props.Documents[0]; runInAction(() => this.curPresentation = docAtZero); @@ -162,6 +172,10 @@ export class PresentationView extends React.Component { } + /** + * The function that retrieves the backUps for the current Presentation if present, + * otherwise initializes. + */ setPresentationBackUps = async () => { //getting both backUp documents @@ -195,7 +209,6 @@ export class PresentationView extends React.Component { } //if instantiated before - if (castedButtonBackUp instanceof Promise) { castedButtonBackUp.then(doc => { let toAssign = doc ? doc : new Doc(); @@ -304,12 +317,14 @@ export class PresentationView extends React.Component { // 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 (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { - let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); - if (prevScale !== undefined) { - if (prevScale !== curScale) { - DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + if (current > 0) { + if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { + let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); + if (prevScale !== undefined) { + if (prevScale !== curScale) { + DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + } } } } @@ -453,14 +468,22 @@ export class PresentationView extends React.Component { return doc; } + /** + * 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); let removedDocPresentId = StrCast(removedDoc.presentId); + + //Removing it from local mapping of the groups if (this.groupMappings.has(removedDocPresentId)) { let removedDocsGroup = this.groupMappings.get(removedDocPresentId); if (removedDocsGroup) { @@ -470,10 +493,14 @@ export class PresentationView extends React.Component { } } } + + //removing it from the backUp of selected Buttons let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); if (castedList) { castedList.splice(index, 1); } + + //removing it from the backup of groups let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); if (castedGroupDocs) { castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { @@ -495,6 +522,9 @@ export class PresentationView extends React.Component { } } + + //The function that is called when a document is clicked or reached through next or back. + //it'll also execute the necessary actions if presentation is playing. @action public gotoDocument = async (index: number, fromDoc: number) => { const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); @@ -520,7 +550,8 @@ export class PresentationView extends React.Component { } - + //Function that is called to resetGroupIds, so that documents get new groupIds at + //first load, when presentation is changed. resetGroupIds = async () => { let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); if (castedGroupDocs !== undefined) { @@ -531,29 +562,10 @@ export class PresentationView extends React.Component { doc.presentId = Utils.GenerateGuid(); }); } - // let castedKey = StrCast(groupDoc.presentIdStore, null); - // if (castedGrouping !== undefined && castedKey !== undefined) { - // this.groupMappings.set(castedKey, castedGrouping); - // } }); } } - // reloadGroupIds = async () => { - // let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - // if (castedGroupDocs !== undefined) { - // castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - // let castedGrouping = await DocListCastAsync(groupDoc.grouping); - // let castedKey = StrCast(groupDoc.presentIdStore, null); - // if (castedGrouping !== undefined && castedKey !== undefined) { - // this.groupMappings.set(castedKey, castedGrouping); - // } - // }); - // } - // } - - - /** * Adds a document to the presentation view **/ @@ -570,11 +582,14 @@ export class PresentationView extends React.Component { this.curPresentation.width = 400; } + //Function that sets the store of the children docs. @action setChildrenDocs = (docList: Doc[]) => { 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 ; @@ -583,10 +598,10 @@ export class PresentationView extends React.Component { } } + //The function that starts or resets presentaton functionally, depending on status flag. @action startOrResetPres = () => { if (this.presStatus) { - //this.presStatus = false; this.resetPresentation(); } else { this.presStatus = true; @@ -597,19 +612,10 @@ export class PresentationView extends React.Component { 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.groupMappings = new Map(); - //let selectedButtons: boolean[]; - // this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { - // //selectedButtons = component.selected; - // //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false); - // //doc.presentId = Utils.GenerateGuid(); - // doc.opacity = 1; - // doc.viewScale = 1; - // }); - - this.childrenDocs.forEach((doc: Doc) => { doc.opacity = 1; doc.viewScale = 1; @@ -621,11 +627,11 @@ export class PresentationView extends React.Component { return; } DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); - - // this.childrenDocs[0].viewScale = 1; - } + + //The function that starts the presentation, also checking if actions should be applied + //directly at start. startPresentation = (startIndex: number) => { let selectedButtons: boolean[]; this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { @@ -651,6 +657,11 @@ export class PresentationView extends React.Component { } + /** + * The function that is called to add a new presentation to the presentationView. + * It sets up te mappings and local copies of it. Resets the groupings and presentation. + * Makes the new presentation current selected, and retrieve the back-Ups if present. + */ @action addNewPresentation = (presTitle: string) => { //let title = "Presentation " + (this.props.Documents.length + 1); @@ -667,6 +678,11 @@ export class PresentationView extends React.Component { } + /** + * The function that is called to change the current selected presentation. + * Changes the presentation, also resetting groupings and presentation in process. + * Plus retrieving the backUps for the newly selected presentation. + */ @action getSelectedPresentation = (e: React.ChangeEvent) => { let selectedGuid = e.target.value; @@ -679,6 +695,9 @@ export class PresentationView extends React.Component { } + /** + * The function that is called to render either select for presentations, or title inputting. + */ renderSelectOrPresSelection = () => { let presentationList = DocListCast(this.props.Documents); if (this.PresTitleInputOpen) { @@ -694,6 +713,10 @@ export class PresentationView extends React.Component { } } + /** + * 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) { @@ -707,6 +730,10 @@ export class PresentationView extends React.Component { } } + /** + * The function that is called to remove a presentation from all its copies, and the main Container's + * list. Sets up the next presentation as current. + */ @action removePresentation = () => { if (this.presentationsMapping.size !== 1) { @@ -716,7 +743,11 @@ export class PresentationView extends React.Component { this.presentationsMapping.delete(this.currentSelectedPresValue!); let remainingPresentations = this.presentationsMapping.values(); let nextDoc = remainingPresentations.next().value; + this.curPresentation = nextDoc; + this.resetGroupIds(); + this.resetPresentation(); this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); + this.setPresentationBackUps(); presentationList!.splice(presentationList!.indexOf(removedDoc!), 1); } } -- cgit v1.2.3-70-g09d2 From e88538bb8af2ba648da2326d0f6edd3e0186766e Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Thu, 20 Jun 2019 15:45:07 -0400 Subject: Title changing to presentations added --- .../views/presentationview/PresentationView.tsx | 38 +++++++++++++++++----- 1 file changed, 30 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 474001523..905117cd1 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -13,7 +13,7 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_ import PresentationElement, { buttonIndex } from "./PresentationElement"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons'; import { Docs } from "../../documents/Documents"; library.add(faArrowLeft); @@ -23,6 +23,8 @@ library.add(faStop); library.add(faPlus); library.add(faTimes); library.add(faMinus); +library.add(faEdit); + export interface PresViewProps { Documents: List; @@ -136,6 +138,7 @@ export class PresentationView extends React.Component { @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; //initilize class variables constructor(props: PresViewProps) { @@ -664,7 +667,6 @@ export class PresentationView extends React.Component { */ @action addNewPresentation = (presTitle: string) => { - //let title = "Presentation " + (this.props.Documents.length + 1); let newPresentationDoc = Docs.TreeDocument([], { title: presTitle }); this.props.Documents.push(newPresentationDoc); this.curPresentation = newPresentationDoc; @@ -700,7 +702,7 @@ export class PresentationView extends React.Component { */ renderSelectOrPresSelection = () => { let presentationList = DocListCast(this.props.Documents); - if (this.PresTitleInputOpen) { + if (this.PresTitleInputOpen || this.PresTitleChangeOpen) { return this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; } else { return