added progressivize option for presentaitons

3 files changed, 27 insertions, 76 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3e4833052..3efbb9f03 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faTrashAlt, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+    faTasks, faTrashAlt, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
@@ -50,7 +50,6 @@ import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { ScriptField } from '../../fields/ScriptField';
 import { TimelineMenu } from './animationtimeline/TimelineMenu';
-import { DragManager } from '../util/DragManager';
 import { SnappingManager } from '../util/SnappingManager';
 
 @observer
@@ -114,78 +113,12 @@ export class MainView extends React.Component {
             }
         }
 
-        library.add(faTrashAlt);
-        library.add(faAngleRight);
-        library.add(faBell);
-        library.add(faTrash);
-        library.add(faCamera);
-        library.add(faExpand);
-        library.add(faCaretDown);
-        library.add(faCaretUp);
-        library.add(faCaretLeft);
-        library.add(faCaretRight);
-        library.add(faCaretSquareDown);
-        library.add(faCaretSquareRight);
-        library.add(faArrowsAltH);
-        library.add(faPlus, faMinus);
-        library.add(faTerminal);
-        library.add(faToggleOn);
-        library.add(faLocationArrow);
-        library.add(faSearch);
-        library.add(fileSolid);
-        library.add(faFileDownload);
-        library.add(faStop);
-        library.add(faCalculator);
-        library.add(faWindowMaximize);
-        library.add(faFileAlt);
-        library.add(faAddressCard);
-        library.add(faQuestionCircle);
-        library.add(faStickyNote);
-        library.add(faFont);
-        library.add(faExclamation);
-        library.add(faPortrait);
-        library.add(faCat);
-        library.add(faFilePdf);
-        library.add(faObjectGroup);
-        library.add(faTv);
-        library.add(faGlobeAsia);
-        library.add(faUndoAlt);
-        library.add(faRedoAlt);
-        library.add(faMousePointer);
-        library.add(faPen);
-        library.add(faHighlighter);
-        library.add(faEraser);
-        library.add(faFileAudio);
-        library.add(faPenNib);
-        library.add(faMicrophone);
-        library.add(faFilm);
-        library.add(faMusic);
-        library.add(faTree);
-        library.add(faPlay);
-        library.add(faCompressArrowsAlt);
-        library.add(faPause);
-        library.add(faClone);
-        library.add(faCut);
-        library.add(faCommentAlt);
-        library.add(faThumbtack);
-        library.add(faLongArrowAltRight);
-        library.add(faCheck);
-        library.add(faFilter);
-        library.add(faBullseye);
-        library.add(faArrowLeft);
-        library.add(faArrowRight);
-        library.add(faArrowDown);
-        library.add(faArrowUp);
-        library.add(faCloudUploadAlt);
-        library.add(faBolt);
-        library.add(faVideo);
-        library.add(faChevronRight);
-        library.add(faEllipsisV);
-        library.add(faMusic);
-        library.add(faPhone);
-        library.add(faClipboard);
-        library.add(faStamp);
-        library.add(faExternalLinkAlt);
+        library.add(faTasks, faTrashAlt, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+            faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, fileSolid,
+            faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
+            faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
+            faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
+            faThumbtack, faTree, faTv, faUndoAlt, faVideo);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index f4b83dd53..e12ab3f9f 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -348,5 +348,6 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d
     if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 50 : 46;
     if (field === 'presStatus') return container.presStatus;
     if (field === '_itemIndex') return container._itemIndex;
+    if (field === 'presBox') return container;
     return undefined;
 });
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 26c8aa80a..0ce40f116 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -4,9 +4,9 @@ import { observer } from "mobx-react";
 import { Doc, DataSym, DocListCast } from "../../../fields/Doc";
 import { documentSchema } from '../../../fields/documentSchemas';
 import { Id } from "../../../fields/FieldSymbols";
-import { createSchema, makeInterface } from '../../../fields/Schema';
+import { createSchema, makeInterface, listSpec } from '../../../fields/Schema';
 import { Cast, NumCast, BoolCast, ScriptCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, returnZero } from "../../../Utils";
+import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, returnZero, numberRange } from "../../../Utils";
 import { Transform } from "../../util/Transform";
 import { CollectionViewType } from '../collections/CollectionView';
 import { ViewBoxBaseComponent } from '../DocComponent';
@@ -14,6 +14,7 @@ import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
 import React = require("react");
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -43,6 +44,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox.  We could store this on the presentation elemnt template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up
     @computed get presStatus() { return BoolCast(this.lookupField("presStatus")); }
     @computed get itemIndex() { return NumCast(this.lookupField("_itemIndex")); }
+    @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); }
     @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; }
 
     componentDidMount() {
@@ -93,6 +95,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         }
     }
 
+    @action
+    progressivize = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.rootDoc.presProgressivize = !this.rootDoc.presProgressivize;
+        const rootTarget = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        if (this.rootDoc.presProgressivize && !rootTarget?.lastTimecode) {
+            const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]);
+            rootTarget.currentTimecode = 0;
+            CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, this.presBox);
+            docs.forEach((d, i) => numberRange(docs.length - i).forEach(f => Cast(d["opacity-indexed"], listSpec("number"), [])[f + i] = 1));
+            rootTarget.lastTimecode = docs.length;
+        }
+    }
+
     /**
      * The function that is called on click to turn fading document after presented option on/off.
      * It also makes sure that the option swithches from hide-after to this one, since both
@@ -210,6 +226,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <button title="Fade After" className={pbi + (this.rootDoc.presFadeButton ? "-selected" : "")} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button>
+                    <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Expand Inline" className={pbi + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; }}><FontAwesomeIcon icon={"arrow-down"} onPointerDown={e => e.stopPropagation()} /></button>
                 </div>
                 {this.renderEmbeddedInline}