diff options
| -rw-r--r-- | src/client/views/presentationview/PresentationElement.tsx | 46 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresentationView.tsx | 47 |
2 files changed, 91 insertions, 2 deletions
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<PresentationElementProps> { @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<PresentationEle doc.presentId = aboveGuid; }); p.groupMappings.delete(docGuid); + //the case where doc was not in group } else { if (!aboveArray.includes(document)) { aboveArray.push(document); @@ -77,9 +94,12 @@ export default class PresentationElement extends React.Component<PresentationEle } } + //the case where above-doc was not in group } else { let newAboveArray: Doc[] = []; newAboveArray.push(p.allListElements[index - 1]); + + //the case where doc is in group if (p.groupMappings.has(docGuid)) { let docsArray = p.groupMappings.get(docGuid)!; docsArray.forEach((doc: Doc) => { @@ -87,6 +107,8 @@ export default class PresentationElement extends React.Component<PresentationEle doc.presentId = aboveGuid; }); p.groupMappings.delete(docGuid); + + //the case where doc is not in a group } else { newAboveArray.push(document); @@ -95,6 +117,8 @@ export default class PresentationElement extends React.Component<PresentationEle } document.presentId = aboveGuid; + + //when grouping is turned off } else { let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!; let targetIndex = curArray.indexOf(document); @@ -112,6 +136,9 @@ export default class PresentationElement extends React.Component<PresentationEle } + /** + * Function that is called on click to change the group status of a docus, by turning the option on/off. + */ @action changeGroupStatus = () => { if (this.selectedButtons[buttonIndex.Group]) { @@ -121,6 +148,10 @@ export default class PresentationElement extends React.Component<PresentationEle } } + /** + * The function that is called on click to turn Hiding document till press option on/off. + * It also sets the beginning and end opacitys. + */ @action onHideDocumentUntilPressClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -136,6 +167,11 @@ export default class PresentationElement extends React.Component<PresentationEle } } + /** + * The function that is called on click to turn Hiding document after presented option on/off. + * It also makes sure that the option swithches from fade-after to this one, since both + * can't coexist. + */ @action onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -149,6 +185,11 @@ export default class PresentationElement extends React.Component<PresentationEle } } + /** + * The function that is called on click to turn fading document after presented option on/off. + * It also makes sure that the option swithches from hide-after to this one, since both + * can't coexist. + */ @action onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -162,6 +203,9 @@ export default class PresentationElement extends React.Component<PresentationEle } } + /** + * The function that is called on click to turn navigation option of docs on/off. + */ @action onNavigateDocumentClick = (e: React.MouseEvent) => { 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<PresListProps> { + /** + * 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<PresListProps> { export class PresentationView extends React.Component<PresViewProps> { public static Instance: PresentationView; - @observable groupedMembers: Doc[][] = []; + //Mapping from presentation ids to a list of doc that represent a group @observable groupMappings: Map<String, Doc[]> = new Map(); + //mapping from docs to their rendered component @observable presElementsMappings: Map<Doc, PresentationElement> = new Map(); + //variable that holds all the docs in the presentation @observable childrenDocs: Doc[] = []; //observable means render is re-called every time variable is changed @@ -76,16 +85,21 @@ export class PresentationView extends React.Component<PresViewProps> { 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<PresViewProps> { } 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<PresViewProps> { 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<PresViewProps> { }); } + /** + * 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<PresViewProps> { }); } + /** + * 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<PresViewProps> { } } + //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<PresViewProps> { 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<PresViewProps> { } this.props.Document.selectedDoc = index; + //awaiting async call to finish to get Doc instance const doc = await list[index]; return doc; } |