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 --- .../views/presentationview/PresentationElement.tsx | 115 +++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 src/client/views/presentationview/PresentationElement.tsx (limited to 'src/client/views/presentationview/PresentationElement.tsx') 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 -- 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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/client/views/presentationview/PresentationElement.tsx') 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 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/client/views/presentationview/PresentationElement.tsx') 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 e18662f2fa9e1d3dd1b0eb3b5531092258d05972 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Mon, 24 Jun 2019 12:42:44 -0400 Subject: Refactoring --- .../views/presentationview/PresentationElement.tsx | 1 - .../views/presentationview/PresentationList.tsx | 89 ++++++++++++++++++++++ .../views/presentationview/PresentationView.tsx | 87 +-------------------- 3 files changed, 90 insertions(+), 87 deletions(-) create mode 100644 src/client/views/presentationview/PresentationList.tsx (limited to 'src/client/views/presentationview/PresentationElement.tsx') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index b12dfd9d5..07cdcd43a 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -364,7 +364,6 @@ export default class PresentationElement extends React.Component; + groupMappings: Map; + presElementsMappings: Map; + setChildrenDocs: (docList: Doc[]) => void; + presStatus: boolean; + presButtonBackUp: Doc; + presGroupBackUp: Doc; +} + + +@observer +/** + * Component that takes in a document prop and a boolean whether it's collapsed or not. + */ +export default 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 = async (docList: Doc[]) => { + docList.forEach(async (doc: Doc, index: number) => { + let docGuid = StrCast(doc.presentId, null); + //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); + if (storedGuid) { + storedGuids.push(storedGuid); + } + + }); + } + if (!this.props.groupMappings.has(docGuid) && !storedGuids.includes(docGuid)) { + doc.presentId = Utils.GenerateGuid(); + } + }); + } + + /** + * 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.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={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} />)} +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 83ca7dbe0..50defa197 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -9,13 +9,13 @@ 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, { buttonIndex } from "./PresentationElement"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons'; import { Docs } from "../../documents/Documents"; import { undoBatch, UndoManager } from "../../util/UndoManager"; +import PresentationViewList from "./PresentationList"; library.add(faArrowLeft); library.add(faArrowRight); @@ -31,86 +31,6 @@ export interface PresViewProps { Documents: List; } -interface PresListProps { - mainDocument: Doc; - deleteDocument(index: number): void; - gotoDocument(index: number, fromDoc: number): Promise; - groupMappings: Map; - presElementsMappings: Map; - setChildrenDocs: (docList: Doc[]) => void; - presStatus: boolean; - presButtonBackUp: Doc; - presGroupBackUp: Doc; -} - - -@observer -/** - * Component that takes in a document prop and a boolean whether it's collapsed or not. - */ -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 = async (docList: Doc[]) => { - docList.forEach(async (doc: Doc, index: number) => { - let docGuid = StrCast(doc.presentId, null); - //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); - if (storedGuid) { - storedGuids.push(storedGuid); - } - - }); - } - if (!this.props.groupMappings.has(docGuid) && !storedGuids.includes(docGuid)) { - doc.presentId = Utils.GenerateGuid(); - } - }); - } - - /** - * 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.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={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} />)} -
- ); - } -} - - @observer export class PresentationView extends React.Component { public static Instance: PresentationView; @@ -247,7 +167,6 @@ export class PresentationView extends React.Component { retrieveGroupMappings = async () => { let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); if (castedGroupDocs !== undefined) { - //runInAction(() => this.groupMappings = new Map()); castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { let castedGrouping = await DocListCastAsync(groupDoc.grouping); let castedKey = StrCast(groupDoc.presentIdStore, null); @@ -562,13 +481,11 @@ export class PresentationView extends React.Component { if (castedGroupDocs !== undefined) { castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { let castedGrouping = await DocListCastAsync(groupDoc.grouping); - // UndoManager.RunInBatch(() => { if (castedGrouping) { castedGrouping.forEach((doc: Doc) => { doc.presentId = Utils.GenerateGuid(); }); } - // }, "guid assignment"); }); } runInAction(() => this.groupMappings = new Map()); @@ -839,8 +756,6 @@ export class PresentationView extends React.Component { let width = NumCast(this.curPresentation.width); - - //TODO: next and back should be icons return (
-- cgit v1.2.3-70-g09d2 From 3605690fb0778ab5a5c8f56c8a3e0c65206a9cb2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 26 Jun 2019 22:22:55 -0400 Subject: icon --- src/client/views/presentationview/PresentationElement.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views/presentationview/PresentationElement.tsx') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 43cb9cb86..4afc0210f 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -9,6 +9,7 @@ import { Utils } from "../../../Utils"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faFile as fileSolid, faFileDownload, 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"; @@ -17,7 +18,7 @@ library.add(faArrowUp); library.add(fileSolid); library.add(faLocationArrow); library.add(faSearch); -library.add(faFileDownload); +library.add(fileRegular); interface PresentationElementProps { mainDocument: Doc; -- cgit v1.2.3-70-g09d2 From 13fcbc4c500fec36e69cac4fc3c0ca6822322809 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 30 Jun 2019 16:04:52 -0400 Subject: Fixed errors and linter warnings --- src/client/util/TooltipTextMenu.tsx | 70 ++++++---------------- .../views/collections/CollectionStackingView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 3 +- src/client/views/pdf/Annotation.tsx | 6 +- src/client/views/pdf/PDFViewer.tsx | 2 +- .../views/presentationview/PresentationElement.tsx | 3 +- src/client/views/search/FilterBox.tsx | 7 ++- src/client/views/search/SearchItem.tsx | 15 +++-- src/new_fields/Doc.ts | 3 +- 9 files changed, 37 insertions(+), 74 deletions(-) (limited to 'src/client/views/presentationview/PresentationElement.tsx') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 390bb2f44..9f8d0b2f6 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -1,57 +1,37 @@ -import { action, IReactionDisposer, reaction } from "mobx"; -import { Dropdown, DropdownSubmenu, MenuItem, MenuItemSpec, renderGrouped, icons, } from "prosemirror-menu"; //no import css -import { baseKeymap, lift, deleteSelection } from "prosemirror-commands"; -import { history, redo, undo } from "prosemirror-history"; -import { keymap } from "prosemirror-keymap"; -import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state"; +import { action } from "mobx"; +import { Dropdown, MenuItem, icons, } from "prosemirror-menu"; //no import css +import { EditorState, NodeSelection, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; import { Schema, NodeType, MarkType, Mark, ResolvedPos } from "prosemirror-model"; -import { Node as ProsNode } from "prosemirror-model" -import React = require("react"); +import { Node as ProsNode } from "prosemirror-model"; import "./TooltipTextMenu.scss"; -const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); +const { toggleMark, setBlockType } = require("prosemirror-commands"); import { library } from '@fortawesome/fontawesome-svg-core'; -import { wrapInList, bulletList, liftListItem, listItem, } from 'prosemirror-schema-list'; -import { liftTarget, RemoveMarkStep, AddMarkStep } from 'prosemirror-transform'; -import { - faListUl, faGrinTongueSquint, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { wrapInList, liftListItem, } from 'prosemirror-schema-list'; +import { faListUl } from '@fortawesome/free-solid-svg-icons'; import { FieldViewProps } from "../views/nodes/FieldView"; -import { throwStatement } from "babel-types"; const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js"); -import { View } from "@react-pdf/renderer"; import { DragManager } from "./DragManager"; import { Doc, Opt, Field } from "../../new_fields/Doc"; import { DocServer } from "../DocServer"; -import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { DocumentManager } from "./DocumentManager"; import { Id } from "../../new_fields/FieldSymbols"; -import { Utils } from "../../Utils"; import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; -import { text } from "body-parser"; -import { type } from "os"; -// import { wrap } from "module"; - -const SVG = "http://www.w3.org/2000/svg"; //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc. export class TooltipTextMenu { public tooltip: HTMLElement; - private num_icons = 0; private view: EditorView; private fontStyles: MarkType[]; private fontSizes: MarkType[]; private listTypes: NodeType[]; private editorProps: FieldViewProps & FormattedTextBoxProps; - private state: EditorState; private fontSizeToNum: Map; private fontStylesToName: Map; private listTypeToIcon: Map; - private fontSizeIndicator: HTMLSpanElement = document.createElement("span"); private link: HTMLAnchorElement; private linkEditor?: HTMLDivElement; @@ -68,7 +48,6 @@ export class TooltipTextMenu { constructor(view: EditorView, editorProps: FieldViewProps & FormattedTextBoxProps) { this.view = view; - this.state = view.state; this.editorProps = editorProps; this.tooltip = document.createElement("div"); this.tooltip.className = "tooltipMenu"; @@ -333,7 +312,7 @@ export class TooltipTextMenu { //for a specific grouping of marks (passed in), remove all and apply the passed-in one to the selected text changeToMarkInGroup = (markType: MarkType, view: EditorView, fontMarks: MarkType[]) => { - let { empty, $cursor, ranges } = view.state.selection as TextSelection; + let { $cursor, ranges } = view.state.selection as TextSelection; let state = view.state; let dispatch = view.dispatch; @@ -345,13 +324,12 @@ export class TooltipTextMenu { dispatch(state.tr.removeStoredMark(type)); } } else { - let has = false, tr = state.tr; + let has = false; for (let i = 0; !has && i < ranges.length; i++) { let { $from, $to } = ranges[i]; has = state.doc.rangeHasMark($from.pos, $to.pos, type); } for (let i of ranges) { - let { $from, $to } = i; if (has) { toggleMark(type)(view.state, view.dispatch, view); } @@ -373,7 +351,7 @@ export class TooltipTextMenu { } //remove all node typeand apply the passed-in one to the selected text - changeToNodeType(nodeType: NodeType | undefined, view: EditorView, allNodes: NodeType[]) { + changeToNodeType(nodeType: NodeType | undefined, view: EditorView) { //remove old liftListItem(schema.nodes.list_item)(view.state, view.dispatch); if (nodeType) { //add new @@ -390,7 +368,7 @@ export class TooltipTextMenu { execEvent: "", class: "menuicon", css: css, - enable(state) { return true; }, + enable() { return true; }, run() { changeToMarkInGroup(markType, view, groupMarks); } @@ -405,7 +383,7 @@ export class TooltipTextMenu { css: "color:white;", class: "summarize", execEvent: "", - run: (state, dispatch, view) => { + run: (state, dispatch) => { TooltipTextMenu.insertStar(state, dispatch); } @@ -420,7 +398,7 @@ export class TooltipTextMenu { execEvent: "", css: "color:white;", class: "summarize", - run: (state, dispatch, view) => { + run: () => { this.collapseToolTip(); } }); @@ -499,7 +477,7 @@ export class TooltipTextMenu { execEvent: "", class: "menuicon", css: css, - enable(state) { return true; }, + enable() { return true; }, run() { changeToNodeInGroup(nodeType, view, groupNodes); } @@ -586,17 +564,6 @@ export class TooltipTextMenu { //return; } - //let linksInSelection = this.activeMarksOnSelection([schema.marks.link]); - // if (linksInSelection.length > 0) { - // let attributes = this.getMarksInSelection(this.view.state, [schema.marks.link])[0].attrs; - // this.link.href = attributes.href; - // this.link.textContent = attributes.title; - // this.link.style.visibility = "visible"; - // } else this.link.style.visibility = "hidden"; - - // Otherwise, reposition it and update its content - //this.tooltip.style.display = ""; - let { from, to } = state.selection; //UPDATE LIST ITEM DROPDOWN @@ -641,17 +608,16 @@ export class TooltipTextMenu { //finds all active marks on selection in given group activeMarksOnSelection(markGroup: MarkType[]) { //current selection - let { empty, $cursor, ranges } = this.view.state.selection as TextSelection; + let { empty, ranges } = this.view.state.selection as TextSelection; let state = this.view.state; let dispatch = this.view.dispatch; let activeMarks: MarkType[]; if (!empty) { activeMarks = markGroup.filter(mark => { if (dispatch) { - let has = false, tr = state.tr; + let has = false; for (let i = 0; !has && i < ranges.length; i++) { let { $from, $to } = ranges[i]; - let hasmark: boolean = state.doc.rangeHasMark($from.pos, $to.pos, mark); return state.doc.rangeHasMark($from.pos, $to.pos, mark); } } @@ -662,9 +628,7 @@ export class TooltipTextMenu { const pos = this.view.state.selection.$from; const ref_node: ProsNode = this.reference_node(pos); if (ref_node !== null && ref_node !== this.view.state.doc) { - let text_node_type: NodeType; if (ref_node.isText) { - text_node_type = ref_node.type; } else { return []; @@ -699,7 +663,7 @@ export class TooltipTextMenu { else if (pos.pos > 0) { let skip = false; for (let i: number = pos.pos - 1; i > 0; i--) { - this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode, pos: number, parent: ProsNode, index: number) => { + this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode) => { if (node.isLeaf && !skip) { ref_node = node; skip = true; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 088a9bae8..b10907937 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -78,7 +78,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { style={{ width: width(), height: height() }} > { } let keyList: string[] = keys.reduce((l, key) => { let listspec = DocListCast(this.resolvedDataDoc[key]); - if (listspec && listspec.length) - return [...l, key]; + if (listspec && listspec.length) return [...l, key]; return l; }, [] as string[]); keys.map(key => Cast(this.resolvedDataDoc[key], Doc) instanceof Doc && keyList.push(key)); diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 74f4be51a..73fca229b 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -10,9 +10,9 @@ import PDFMenu from "./PDFMenu"; import { DocumentManager } from "../../util/DocumentManager"; interface IAnnotationProps { - anno: Doc, - index: number, - parent: Viewer + anno: Doc; + index: number; + parent: Viewer; } export default class Annotation extends React.Component { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 6fab390d4..bb148e738 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -426,7 +426,7 @@ export class Viewer extends React.Component { } renderAnnotation = (anno: Doc, index: number): JSX.Element => { - return + return ; } @action diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 4afc0210f..d63c0b066 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -13,12 +13,11 @@ import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; - library.add(faArrowUp); library.add(fileSolid); library.add(faLocationArrow); +library.add(fileRegular as any); library.add(faSearch); -library.add(fileRegular); interface PresentationElementProps { mainDocument: Doc; diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index c39ec1145..8bbbf3012 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -65,9 +65,9 @@ export class FilterBox extends React.Component { setupAccordion() { $('document').ready(function () { - var acc = document.getElementsByClassName('filter-header'); - - for (var i = 0; i < acc.length; i++) { + const acc = document.getElementsByClassName('filter-header'); + // tslint:disable-next-line: prefer-for-of + for (let i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function (this: HTMLElement) { this.classList.toggle("active"); @@ -96,6 +96,7 @@ export class FilterBox extends React.Component { $('document').ready(function () { var acc = document.getElementsByClassName('filter-header'); + // tslint:disable-next-line: prefer-for-of for (var i = 0; i < acc.length; i++) { let classList = acc[i].classList; if (classList.contains("active")) { diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index b72f8c814..f8a0c7b16 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -83,9 +83,8 @@ export class SelectorContextMenu extends React.Component {
{doc.col.title} -
- } - )} +
; + })}
); } @@ -111,7 +110,7 @@ export class SearchItem extends React.Component { if (layoutresult.indexOf(DocTypes.COL) !== -1) { renderDoc = Doc.MakeDelegate(renderDoc); let bounds = DocListCast(renderDoc.data).reduce((bounds, doc) => { - var [sptX, sptY] = [NumCast(doc.x), NumCast(doc.y)] + var [sptX, sptY] = [NumCast(doc.x), NumCast(doc.y)]; let [bptX, bptY] = [sptX + doc[WidthSym](), sptY + doc[HeightSym]()]; return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), @@ -124,7 +123,7 @@ export class SearchItem extends React.Component { let returnYDimension = () => this._displayDim; let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension()); return
{ this._useIcons = !this._useIcons; this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE) })} + onPointerDown={action(() => { this._useIcons = !this._useIcons; this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); })} onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} onPointerLeave={action(() => this._displayDim = 50)} > { ContainingCollectionView={undefined} ContentScaling={scale} /> -
+
; } let button = layoutresult.indexOf(DocTypes.PDF) !== -1 ? faFilePdf : @@ -160,7 +159,7 @@ export class SearchItem extends React.Component { layoutresult.indexOf(DocTypes.HIST) !== -1 ? faChartBar : layoutresult.indexOf(DocTypes.WEB) !== -1 ? faGlobeAsia : faCaretUp; - return
{ this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE) })} > + return
{ this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
; } @@ -189,7 +188,7 @@ export class SearchItem extends React.Component { } @action - pointerDown = (e: React.PointerEvent) => SearchBox.Instance.openSearch(e); + pointerDown = (e: React.PointerEvent) => SearchBox.Instance.openSearch(e) highlightDoc = (e: React.PointerEvent) => { if (this.props.doc.type === DocTypes.LINK) { diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index e76e94d63..734a90731 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -293,11 +293,12 @@ export namespace Doc { if (expandedTemplateLayout instanceof Doc) { return expandedTemplateLayout; } - if (expandedTemplateLayout === undefined) + if (expandedTemplateLayout === undefined) { setTimeout(() => { templateLayoutDoc["_expanded_" + dataDoc[Id]] = Doc.MakeDelegate(templateLayoutDoc); (templateLayoutDoc["_expanded_" + dataDoc[Id]] as Doc).title = templateLayoutDoc.title + " applied to " + dataDoc.title; }, 0); + } return templateLayoutDoc; } -- cgit v1.2.3-70-g09d2 From 575ee72cd6ddd65d6c02c6f50a3266f632b1b858 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 4 Jul 2019 00:17:15 -0400 Subject: highlights current workspace in treeview --- src/client/views/collections/CollectionDockingView.tsx | 2 ++ src/client/views/collections/CollectionTreeView.tsx | 3 ++- src/client/views/nodes/DocumentView.tsx | 4 ++-- src/client/views/presentationview/PresentationElement.tsx | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) (limited to 'src/client/views/presentationview/PresentationElement.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 8b6f5b6a6..c5f8fb728 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -240,6 +240,7 @@ export class CollectionDockingView extends React.Component this.setupGoldenLayout(), 1); + this.props.Document.workspaceBrush = true; } this._ignoreStateChange = ""; }, { fireImmediately: true }); @@ -249,6 +250,7 @@ export class CollectionDockingView extends React.Component void = () => { try { + this.props.Document.workspaceBrush = false; this._goldenLayout.unbind('itemDropped', this.itemDropped); this._goldenLayout.unbind('tabCreated', this.tabCreated); this._goldenLayout.unbind('stackCreated', this.stackCreated); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 622ba37d1..3db786043 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -217,7 +217,8 @@ class TreeView extends React.Component { return <>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 69dc31fec..f751a45fe 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -589,9 +589,9 @@ export class DocumentView extends DocComponent(Docu style={{ outlineColor: "maroon", outlineStyle: "dashed", - outlineWidth: (BoolCast(this.props.Document.libraryBrush) || BoolCast(this.props.Document.protoBrush)) && !NumCast(this.props.Document.borderRounding) ? + outlineWidth: BoolCast(this.props.Document.libraryBrush) && !NumCast(this.props.Document.borderRounding) ? `${this.props.ScreenToLocalTransform().Scale}px` : "0px", - border: (BoolCast(this.props.Document.libraryBrush) || BoolCast(this.props.Document.protoBrush)) && NumCast(this.props.Document.borderRounding) ? + border: BoolCast(this.props.Document.libraryBrush) && NumCast(this.props.Document.borderRounding) ? `dashed maroon ${this.props.ScreenToLocalTransform().Scale}px` : undefined, borderRadius: "inherit", background: backgroundColor, diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index d63c0b066..6896ee452 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -377,7 +377,7 @@ export default class PresentationElement extends React.Component { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}> -- cgit v1.2.3-70-g09d2