aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/presentationview
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/presentationview')
-rw-r--r--src/client/views/presentationview/PresentationElement.tsx31
-rw-r--r--src/client/views/presentationview/PresentationView.tsx93
2 files changed, 108 insertions, 16 deletions
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<void>;
allListElements: Doc[];
groupMappings: Map<String, Doc[]>;
presStatus: boolean;
@@ -300,6 +301,9 @@ export default class PresentationElement extends React.Component<PresentationEle
this.selectedButtons[buttonIndex.Navigate] = false;
} else {
+ if (this.selectedButtons[buttonIndex.Show]) {
+ this.selectedButtons[buttonIndex.Show] = false;
+ }
this.selectedButtons[buttonIndex.Navigate] = true;
}
@@ -307,6 +311,27 @@ export default class PresentationElement extends React.Component<PresentationEle
}
+ /**
+ * The function that is called on click to turn zoom option of docs on/off.
+ */
+ @action
+ onZoomDocumentClick = (e: React.MouseEvent) => {
+ 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<PresentationEle
outlineStyle: "dashed",
outlineWidth: BoolCast(p.document.libraryBrush, false) || BoolCast(p.document.protoBrush, false) ? `1px` : "0px",
}}
- onClick={e => { p.gotoDocument(p.index); e.stopPropagation(); }}>
+ onClick={e => { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}>
<strong className="presentationView-name">
{`${p.index + 1}. ${title}`}
</strong>
<button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
<br></br>
- <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
+ <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
<button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
<button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
<button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
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<void>;
groupMappings: Map<String, Doc[]>;
presElementsMappings: Map<Doc, PresentationElement>;
setChildrenDocs: (docList: Doc[]) => void;
@@ -71,9 +71,24 @@ class PresentationViewList extends React.Component<PresListProps> {
});
}
+ /**
+ * 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<PresViewProps> {
@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<PresViewProps> {
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<PresViewProps> {
//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<PresViewProps> {
//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<PresViewProps> {
* 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<PresViewProps> {
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<PresViewProps> {
//docToJump stayed same meaning, it was not in the group or was the last element in the group
if (docToJump === curDoc) {
//checking if curDoc has navigation open
- if (this.presElementsMappings.get(curDoc)!.selected[buttonIndex.Navigate]) {
- DocumentManager.Instance.jumpToDocument(curDoc);
- } else {
- 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<PresViewProps> {
}
}
@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<PresViewProps> {
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<PresViewProps> {
} 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<PresViewProps> {
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;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 15:06:46 +0000