aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/presentationview/PresentationView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/presentationview/PresentationView.tsx')
-rw-r--r--src/client/views/presentationview/PresentationView.tsx85
1 files changed, 50 insertions, 35 deletions
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index ea85a8c6a..bea70f00b 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -16,7 +16,6 @@ import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, fa
import { Docs } from "../../documents/Documents";
import { undoBatch, UndoManager } from "../../util/UndoManager";
import PresentationViewList from "./PresentationList";
-import { ContextMenu } from "../ContextMenu";
import PresModeMenu from "./PresentationModeMenu";
import { CollectionDockingView } from "../collections/CollectionDockingView";
@@ -36,6 +35,7 @@ export interface PresViewProps {
}
const expandedWidth = 400;
+const presMinWidth = 300;
@observer
export class PresentationView extends React.Component<PresViewProps> {
@@ -375,7 +375,7 @@ export class PresentationView extends React.Component<PresViewProps> {
//awaiting jump so that new scale can be found, since jumping is async
await DocumentManager.Instance.jumpToDocument(curDoc, true);
} else {
- await DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined));
+ await DocumentManager.Instance.jumpToDocument(curDoc, true, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined));
}
let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
@@ -408,6 +408,10 @@ export class PresentationView extends React.Component<PresViewProps> {
}
+ /**
+ * This function checks if right option is clicked on a presentation element, if not it does open it as a tab
+ * with help of CollectionDockingView.
+ */
jumpToTabOrRight = (curDocButtons: boolean[], curDoc: Doc) => {
if (curDocButtons[buttonIndex.OpenRight]) {
DocumentManager.Instance.jumpToDocument(curDoc, false);
@@ -460,22 +464,6 @@ export class PresentationView extends React.Component<PresViewProps> {
}
}
- //removing it from the backUp of selected Buttons
- // let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
- // if (castedList) {
- // castedList.forEach(async (doc, indexOfDoc) => {
- // let curDoc = await doc;
- // let curDocId = StrCast(curDoc.docId);
- // if (curDocId === removedDoc[Id]) {
- // if (castedList) {
- // castedList.splice(indexOfDoc, 1);
- // return;
- // }
- // }
- // });
-
- // }
- //removing it from the backUp of selected Buttons
let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
if (castedList) {
@@ -513,13 +501,16 @@ export class PresentationView extends React.Component<PresViewProps> {
}
}
+ /**
+ * An alternative remove method that removes a doc from presentation by its actual
+ * reference.
+ */
public removeDocByRef = (doc: Doc) => {
let indexOfDoc = this.childrenDocs.indexOf(doc);
const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
if (value) {
value.splice(indexOfDoc, 1)[0];
}
- //this.RemoveDoc(indexOfDoc, true);
if (indexOfDoc !== - 1) {
return true;
}
@@ -618,6 +609,11 @@ export class PresentationView extends React.Component<PresViewProps> {
this.curPresentation.presStatus = this.presStatus;
}
+ /**
+ * This method is called to find the start document of presentation. So
+ * that when user presses on play, the correct presentation element will be
+ * selected.
+ */
findStartDocument = async () => {
let docAtZero = await this.getDocAtIndex(0);
if (docAtZero === undefined) {
@@ -848,10 +844,11 @@ export class PresentationView extends React.Component<PresViewProps> {
this.curPresentation.title = newTitle;
}
- addPressElem = (keyDoc: Doc, elem: PresentationElement) => {
- this.presElementsMappings.set(keyDoc, elem);
- }
-
+ /**
+ * On pointer down element that is catched on resizer of te
+ * presentation view. Sets up the event listeners to change the size with
+ * mouse move.
+ */
_downsize = 0;
onPointerDown = (e: React.PointerEvent) => {
this._downsize = e.clientX;
@@ -862,31 +859,41 @@ export class PresentationView extends React.Component<PresViewProps> {
e.stopPropagation();
e.preventDefault();
}
+ /**
+ * Changes the size of the presentation view, with mouse move.
+ * Minimum size is set to 300, so that every button is visible.
+ */
@action
onPointerMove = (e: PointerEvent) => {
- this.curPresentation.width = Math.max(window.innerWidth - e.clientX, 300);
+ this.curPresentation.width = Math.max(window.innerWidth - e.clientX, presMinWidth);
}
+
+ /**
+ * The method that is called on pointer up event. It checks if the button is just
+ * clicked so that presentation view will be closed. The way it's done is to check
+ * for minimal pixel change like 4, and accept it as it's just a click on top of the dragger.
+ */
@action
onPointerUp = (e: PointerEvent) => {
if (Math.abs(e.clientX - this._downsize) < 4) {
let presWidth = NumCast(this.curPresentation.width);
- if (presWidth - 300 !== 0) {
+ if (presWidth - presMinWidth !== 0) {
this.curPresentation.width = 0;
}
+ if (presWidth === 0) {
+ this.curPresentation.width = presMinWidth;
+ }
}
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
}
- togglePresView = (e: React.MouseEvent) => {
- e.stopPropagation();
- e.preventDefault();
- let width = NumCast(this.curPresentation.width);
- if (width === 0) {
- this.curPresentation.width = 300;
- }
- }
+ /**
+ * This function is a setter that opens up the
+ * presentation mode, by setting it's render flag
+ * to true. It also closes the presentation view.
+ */
@action
openPresMode = () => {
if (!this.presMode) {
@@ -895,15 +902,23 @@ export class PresentationView extends React.Component<PresViewProps> {
}
}
+ /**
+ * This function closes the presentation mode by setting its
+ * render flag to false. It also opens up the presentation view.
+ * By setting it to it's minimum size.
+ */
@action
closePresMode = () => {
if (this.presMode) {
this.presMode = false;
- this.curPresentation.width = 300;
+ this.curPresentation.width = presMinWidth;
}
}
+ /**
+ * Function that is called to render the presentation mode, depending on its flag.
+ */
renderPresMode = () => {
if (this.presMode) {
return <PresModeMenu next={this.next} back={this.back} startOrResetPres={this.startOrResetPres} presStatus={this.presStatus} closePresMode={this.closePresMode} />;
@@ -968,7 +983,7 @@ export class PresentationView extends React.Component<PresViewProps> {
</div>
<div className="mainView-libraryHandle"
style={{ cursor: "ew-resize", right: `${width - 10}px`, backgroundColor: "white", opacity: this.opacity, transition: "0.7s opacity ease" }}
- onPointerDown={this.onPointerDown} onClick={this.togglePresView}>
+ onPointerDown={this.onPointerDown}>
<span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
</div>
{this.renderPresMode()}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 03:18:51 +0000