added progressivize features

6 files changed, 328 insertions, 91 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 92aee3776..fad90ca32 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -13,16 +13,54 @@
 }
 
 .collectionfreeformview-viewdef {
-    > .collectionFreeFormDocumentView-container {
+    >.collectionFreeFormDocumentView-container {
         pointer-events: none;
+
         .contentFittingDocumentDocumentView-previewDoc {
             pointer-events: all;
         }
     }
+
+    svg.presPaths {
+        position: absolute;
+        z-index: 100000;
+        overflow: visible;
+    }
+
+    svg.presPaths-hidden {
+        display: none;
+    }
 }
 
 .collectionfreeformview-none {
     touch-action: none;
+
+    svg.presPaths {
+        position: absolute;
+        z-index: 100000;
+        overflow: visible;
+    }
+
+    svg.presPaths-hidden {
+        display: none;
+    }
+}
+
+.progressivizeButton {
+    position: absolute;
+    display: flex;
+    transform: translate(-105%, 0);
+    align-items: center;
+    border: black solid 1px;
+    border-radius: 3px;
+    justify-content: center;
+    width: 30;
+    height: 20;
+    background-color: #c8c8c8;
+}
+
+.progressivizeButton:hover {
+    background-color: #aedef8;
 }
 
 .collectionFreeform-customText {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 98be2dc03..ded410a9c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,7 +1,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye } from "@fortawesome/free-regular-svg-icons";
 import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { computedFn } from "mobx-utils";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc";
@@ -46,6 +46,7 @@ import "./CollectionFreeFormView.scss";
 import MarqueeOptionsMenu from "./MarqueeOptionsMenu";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
+import { PresBox } from "../../nodes/PresBox";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
 
@@ -1350,6 +1351,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             <CollectionFreeFormViewPannableContents
                 centeringShiftX={this.centeringShiftX}
                 centeringShiftY={this.centeringShiftY}
+                presPaths={BoolCast(this.Document.presPathView)}
+                progressivize={BoolCast(this.Document.editProgressivize)}
                 transition={Cast(this.layoutDoc._viewTransition, "string", null)}
                 viewDefDivClick={this.props.viewDefDivClick}
                 zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
@@ -1432,11 +1435,44 @@ interface CollectionFreeFormViewPannableContentsProps {
     viewDefDivClick?: ScriptField;
     children: () => JSX.Element[];
     transition?: string;
+    presPaths?: boolean;
+    progressivize?: boolean;
 }
 
 @observer
 class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
+    @computed get progressivize() {
+        if (this.props.progressivize) {
+            console.log("should render");
+            return (
+                <>
+                    {PresBox.Instance.progressivizeChildDocs}
+                </>
+            );
+        }
+    }
+
+    @computed get presPaths() {
+        const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden");
+        if (this.props.presPaths) {
+            return (
+                <svg className={presPaths}>
+                    <defs>
+                        <marker id="arrow" markerWidth="10" overflow="visible" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+                            <path d="M0,0 L0,6 L9,3 z" fill="#69a6db" />
+                        </marker>
+                        <marker id={`dot`} orient="auto" overflow="visible">
+                            <circle r={3} fill="#69a6db" />
+                        </marker>
+                    </defs>;
+                    {PresBox.Instance.paths}
+                </svg>
+            );
+        }
+    }
+
     render() {
+        trace();
         const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none");
         const cenx = this.props.centeringShiftX();
         const ceny = this.props.centeringShiftY();
@@ -1449,6 +1485,8 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
                 transition: this.props.transition
             }}>
             {this.props.children()}
+            {this.presPaths}
+            {this.progressivize}
         </div>;
     }
 }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a3020f912..52a7d4ebf 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -15,6 +15,8 @@ import { numberRange } from "../../../Utils";
 import { ComputedField } from "../../../fields/ScriptField";
 import { listSpec } from "../../../fields/Schema";
 import { DocumentType } from "../../documents/DocumentTypes";
+// @ts-ignore
+import Zoom from 'react-reveal/Zoom';
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined;
@@ -112,10 +114,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
     public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
         docs.forEach((doc, i) => {
+            if (!doc.appearFrame) doc.appearFrame = i;
             const curTimecode = progressivize ? i : timecode;
             const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
-            const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1));
+            const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1));
+            const oarray = new List<number>();
+            oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
+            oarray.fill(1, NumCast(doc.appearFrame), timecode);
+            console.log(oarray);
             xlist[curTimecode] = NumCast(doc.x);
             ylist[curTimecode] = NumCast(doc.y);
             doc["x-indexed"] = xlist;
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 07e53fa94..4d1518b61 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -125,12 +125,14 @@
 
     .toolbar-slider {
         position: relative;
+        align-self: center;
+        justify-self: left;
         -webkit-appearance: none;
         transform: rotateY(180deg);
         background-color: #40B3D8;
-        margin-top: 1px;
+        margin-top: 5px;
         width: 100%;
-        max-width: 100px;
+        max-width: 120px;
         height: 2.5px;
         left: 0px;
     }
@@ -153,16 +155,19 @@
         display: grid;
         justify-content: space-between;
         width: 100%;
+        height: max-content;
+        max-width: 120px;
         grid-template-columns: auto auto auto;
-        grid-template-rows: auto;
+        grid-template-rows: max-content;
         font-weight: 100;
-        margin-top: 5px;
+        /* margin-top: 5px; */
         font-size: 8px;
     }
 
     .slider-value {
-        font-size: 10;
-        position: relative;
+        top: -20;
+        color: #2f86a2;
+        position: absolute;
     }
 
     .slider-value.none,
@@ -197,29 +202,18 @@
 
     .ribbon-final-box {
         align-self: flex-start;
+        justify-self: center;
         display: grid;
         grid-template-rows: auto auto;
         padding-left: 10px;
         padding-right: 10px;
         letter-spacing: normal;
-        width: max-content;
+        min-width: max-content;
+        width: 100%;
         font-size: 13;
         font-weight: 600;
         position: relative;
 
-        .selectedList {
-            display: block;
-            min-width: 50;
-            max-width: 120;
-            height: 70;
-            overflow-y: scroll;
-
-            .selectedList-items {
-                font-size: 7;
-                font-weight: normal;
-            }
-        }
-
 
         .ribbon-final-button {
             position: relative;
@@ -241,41 +235,61 @@
         }
     }
 
+    .selectedList {
+        display: block;
+        min-width: 50;
+        max-width: 120;
+        height: 70;
+        overflow-y: scroll;
+
+        .selectedList-items {
+            font-size: 7;
+            font-weight: normal;
+        }
+    }
+
+    .ribbon-button {
+        font-size: 10;
+        font-weight: 200;
+        height: 25;
+        border: solid 1px black;
+        display: flex;
+        border-radius: 10px;
+        margin-right: 5px;
+        width: max-content;
+        justify-content: center;
+        align-items: center;
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .ribbon-button.active {
+        background-color: #5B9FDD;
+    }
+
+    .ribbon-button:hover {
+        background-color: lightgrey;
+    }
+
+    svg.svg-inline--fa.fa-thumbtack.fa-w-12.toolbar-thumbtack {
+        right: 40;
+        position: absolute;
+        transform: rotate(45deg);
+    }
+
     .ribbon-box {
         display: grid;
         grid-template-rows: max-content auto;
+        justify-self: center;
         padding-left: 10px;
         padding-right: 10px;
         letter-spacing: normal;
-        width: max-content;
+        width: 100%;
         font-weight: 600;
         position: relative;
         font-size: 13;
         border-right: solid 2px darkgrey;
 
-        .ribbon-button {
-            font-size: 10;
-            font-weight: 200;
-            height: 25;
-            border: solid 1px black;
-            display: flex;
-            border-radius: 10px;
-            margin-right: 5px;
-            width: max-content;
-            justify-content: center;
-            align-items: center;
-            padding-right: 10px;
-            padding-left: 10px;
-        }
-
-        .ribbon-button.active {
-            background-color: #5B9FDD;
-        }
-
-        .ribbon-button:hover {
-            background-color: lightgrey;
-        }
-
         .presBox-dropdown:hover {
             border: solid 1px #378AD8;
 
@@ -283,6 +297,7 @@
                 font-size: 10;
                 display: block;
                 padding-left: 5px;
+                padding-right: 5px;
                 margin-top: 3;
                 margin-bottom: 3;
             }
@@ -303,6 +318,7 @@
                 left: -1px;
                 z-index: 200;
                 width: 85%;
+                min-width: max-content;
                 display: block;
                 background: #FFFFFF;
                 border: 0.5px solid #979797;
@@ -341,36 +357,58 @@
                 color: black;
                 align-self: center;
                 justify-self: center;
+                margin-right: 2px;
             }
         }
     }
 }
 
 .presBox-ribbon.active {
-    display: inline-flex;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    grid-template-rows: 100%;
     height: 100px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: solid 1px black;
-}
 
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        height: 3px;
+        width: 8px;
+    }
 
+    ::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: rgb(101, 164, 220);
+    }
+}
+
+.dropdown-play-button {
+    font-size: 10;
+    margin-left: 10;
+    margin-right: 10;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-align: left;
+    justify-content: left;
+    border-bottom: solid 1px lightgrey;
+}
 
 .dropdown-play {
     top: 32px;
-    transform: translate(-28%, 0px);
-    /* left: 0; */
     display: none;
     border-radius: 5px;
-    width: 100px;
-    height: 100px;
+    width: max-content;
+    min-height: 20px;
+    height: max-content;
     z-index: 200;
-    background-color: black;
+    background-color: #323232;
     position: absolute;
 }
 
 .dropdown-play.active {
-    display: flex;
+    display: block;
 }
 
 .presBox-buttons {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index abf97142e..5c21f6656 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -25,6 +25,8 @@ import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
 import { child } from "serializr";
 
+
+
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
 
@@ -232,7 +234,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     //The function that starts or resets presentaton functionally, depending on status flag.
     @action
-    startOrResetPres = () => {
+    startOrResetPres = (startSlide: number) => {
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         if (this._presTimer && this.layoutDoc.presStatus === "auto") {
@@ -240,8 +242,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             this.layoutDoc.presStatus = "manual";
         } else {
             this.layoutDoc.presStatus = "auto";
-            // this.startPresentation(0);
-            // this.gotoDocument(0, this.itemIndex);
+            this.startPresentation(startSlide);
+            this.gotoDocument(startSlide, this.itemIndex);
             this._presTimer = setInterval(() => {
                 if (this.itemIndex + 1 < this.childDocs.length) this.next();
                 else {
@@ -373,8 +375,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @computed get listOfSelected() {
         const list = this._selectedArray.map((doc: Doc, index: any) => {
+            const activeItem = Cast(doc, Doc, null);
+            const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
             return (
-                <div className="selectedList-items">{index + 1}.  {doc.title}</div>
+                <div className="selectedList-items">{index + 1}.  {targetDoc.title}</div>
             );
         });
         return list;
@@ -415,13 +419,27 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @action
     keyEvents = (e: KeyboardEvent) => {
         e.stopPropagation;
+        // switch(e.keyCode) {
+        //     case 27: console.log("escape");
+        //     case 65 && (e.metaKey || e.altKey): 
+        // }
         // Escape key
         if (e.keyCode === 27) {
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = [];
             else this.layoutDoc.presStatus = "edit";
             // Ctrl-A to select all
         } else if ((e.metaKey || e.altKey) && e.keyCode === 65) {
-            this._selectedArray = this.childDocs;
+            if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
+            // left / a / up to go back
+        } else if (e.keyCode === 37 || 65 || 38) {
+            if (this.layoutDoc.presStatus !== "edit") this.back();
+            // right / d / down to go to next
+        } else if (e.keyCode === 39 || 68 || 40) {
+            if (this.layoutDoc.presStatus !== "edit") this.next();
+            // spacebar to 'present' or go to next slide
+        } else if (e.keyCode === 32) {
+            if (this.layoutDoc.presStatus !== "edit") this.next();
+            else this.layoutDoc.presStatus = "manual";
         }
     }
 
@@ -432,6 +450,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable private moreInfoTools: boolean = false;
     @observable private playTools: boolean = false;
 
+    @observable private pathBoolean: boolean = false;
+
     // For toggling transition toolbar
     @action toggleTransitionTools = () => {
         this.transitionTools = !this.transitionTools;
@@ -491,26 +511,64 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @undoBatch
     @action
-    viewLinks = async () => {
-        let docToJump = this.childDocs[0];
-        // console.log(SearchUtil.GetContextsOfDocument(presTargetDoc));
-        // console.log(DocListCast(presTargetDoc.context));
-        // console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc));
+    viewPaths = async () => {
+        const docToJump = this.childDocs[0];
         const aliasOf = await DocCastAsync(docToJump.aliasOf);
         const srcContext = aliasOf && await DocCastAsync(aliasOf.context);
-        console.log(srcContext?.title);
+        if (this.pathBoolean) {
+            console.log("true");
+            if (srcContext) {
+                this.togglePath();
+                srcContext._fitToBox = false;
+                srcContext._viewType = "freeform";
+                srcContext.presPathView = false;
+            }
+        } else {
+            console.log("false");
+            if (srcContext) {
+                this.togglePath();
+                srcContext._fitToBox = true;
+                srcContext._viewType = "freeform";
+                srcContext.presPathView = true;
+            }
+        }
+        console.log("view paths");
         const viewType = srcContext?._viewType;
         const fit = srcContext?._fitToBox;
-        if (srcContext) {
-            srcContext._fitToBox = true;
-            srcContext._viewType = "freeform";
-        }
 
         // if (!DocumentManager.Instance.getDocumentView(curPres)) {
         //     CollectionDockingView.AddRightSplit(curPres);
         // }
     }
 
+    @computed get paths() {
+        const paths = []; //List of all of the paths that need to be added
+        console.log(this.childDocs.length - 1);
+        for (let i = 0; i <= this.childDocs.length - 1; i++) {
+            const targetDoc = Cast(this.childDocs[i].presentationTargetDoc, Doc, null);
+            if (this.childDocs[i + 1] && targetDoc) {
+                const nextTargetDoc = Cast(this.childDocs[i + 1].presentationTargetDoc, Doc, null);
+                const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2);
+                const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2);
+                const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2);
+                const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2);
+                const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y;
+                paths.push(<polyline
+                    points={pathPoints}
+                    style={{
+                        opacity: 1,
+                        stroke: "#69a6db",
+                        strokeWidth: 5,
+                    }}
+                    markerStart="url(#dot)"
+                    markerEnd="url(#arrow)" />);
+            }
+        }
+        return paths;
+    }
+
+    @action togglePath = () => this.pathBoolean = !this.pathBoolean;
+
     /**
      * 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
@@ -572,13 +630,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2 }} icon={"angle-down"} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onClick={e => e.stopPropagation()}>
                                 <div className={`presBox-dropdownOption ${!activeItem.presZoomButton && !activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presZoomButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presZoomButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan</div>
                             </div>
                         </div>
-                        <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: thumbLocation + '%' }}>{transitionSpeed}s</div>
                         <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
                         <div className={`slider-headers ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`}>
+                            <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: thumbLocation + '%' }}>{transitionSpeed}s</div>
                             <div className="slider-text">Slow</div>
                             <div className="slider-text">Medium</div>
                             <div className="slider-text">Fast</div>
@@ -693,24 +751,48 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @computed get playDropdown() {
         return (
             <div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
+                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
+                    Start from current slide
+                </div>
+                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
+                    Start from first slide
+                </div>
             </div>
         );
     }
 
+    progressivizeOptions = (viewType: string) => {
+        const buttons = [];
+        buttons.push(<div className="ribbon-button" title="Progressivize child documents" onClick={this.progressivize}>Progressivize child documents</div>);
+        buttons.push(<div className="ribbon-button" title="Internal navigation" onClick={() => console.log("hide after")}>Internal navigation</div>);
+        if (viewType === "rtf") {
+            buttons.push(<div className="ribbon-button" title="Progressivize bullet points" onClick={() => console.log("hide after")}>Bullet points</div>);
+        }
+        return buttons;
+    }
+
+
+
     @computed get progressivizeDropdown() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
-        if (activeItem) {
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+
+        if (activeItem && targetDoc) {
             return (
                 <div>
                     <div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                         <div className="ribbon-box">
-                            <div title="Progressivize" className={`ribbon-button ${activeItem.presProgressivize ? "active" : ""}`} onClick={this.progressivize}>Progressivize Child Documents</div>
+                            {targetDoc.type} selected
+                            <div className="selectedList">
+                                <div className="selectedList-items">1. {targetDoc.title}</div>
+                            </div>
                         </div>
-                        <div className="ribbon-box">
-                            Other progressivize features:
-                            <div title="Progressivize" className={"ribbon-button"}>Progressivize Text Bullet Points</div>
-                            <div title="Progressivize" className={"ribbon-button"}>Internal Navigation</div>
+                        <div className="ribbon-final-box">
+                            <div className="progressivizeEdit">
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} title="Progressivize child documents" onClick={this.progressivize}>Progressivize child documents</div>
+                                <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "block" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} title="Edit progresivize" onClick={this.editProgressivize}>Edit</div>
+                            </div>
+                            <div className="ribbon-button" title="Internal navigation" onClick={() => console.log("hide after")}>Internal navigation</div>
                         </div>
                     </div>
                 </div>
@@ -719,19 +801,49 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
     @action
+    editProgressivize = (e: React.MouseEvent) => {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        targetDoc.currentFrame = targetDoc.lastFrame;
+        if (targetDoc?.editProgressivize) {
+            targetDoc.editProgressivize = false;
+        } else {
+            targetDoc.editProgressivize = true;
+        }
+    }
+
+    @action
     progressivize = (e: React.MouseEvent) => {
         e.stopPropagation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         activeItem.presProgressivize = !activeItem.presProgressivize;
-        const rootTarget = Cast(activeItem.presentationTargetDoc, Doc, null);
-        const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]);
-        if (this.rootDoc.presProgressivize) {
-            rootTarget.currentFrame = 0;
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
+        targetDoc.presProgressivize = !targetDoc.presProgressivize;
+        console.log(targetDoc.presProgressivize);
+        if (activeItem.presProgressivize) {
+            console.log("progressivize");
+            targetDoc.currentFrame = 0;
             CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true);
-            rootTarget.lastFrame = docs.length - 1;
+            targetDoc.lastFrame = docs.length - 1;
         }
     }
 
+    @computed get progressivizeChildDocs() {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
+        const tags: JSX.Element[] = [];
+        docs.forEach((doc, index) => {
+            tags.push(
+                <div className="progressivizeButton" style={{ top: NumCast(doc.y), left: NumCast(doc.x) }}>{doc.appearFrame}</div>
+            );
+        });
+        return tags;
+    }
+
+
+
     @computed get moreInfoDropdown() {
         return (<div></div>);
 
@@ -747,8 +859,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div>
                     <div className="toolbar-divider" />
-                    <div className="toolbar-button"><FontAwesomeIcon title={"View Links"} icon={"object-group"} onClick={this.toolbarTest} /></div>
-                    <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.viewLinks} /></div>
+                    <div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}><FontAwesomeIcon title={"View Paths"} icon={"object-group"} onClick={this.viewPaths} /></div>
+                    {/* <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.toolbarTest} /></div> */}
                     <div className="toolbar-divider" />
                     <div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
                         <FontAwesomeIcon icon={"rocket"} />
@@ -762,6 +874,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         <FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
                     </div>
                     <div className="toolbar-divider" />
+                    <div className="toolbar-button">
+                        <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
+                    </div>
                     <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
                         <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
                             <div className="toolbar-moreInfoBall" />
@@ -778,7 +893,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div>
                     <div className="toolbar-button">
-                        <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"thumbtack"} />
+                        <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
                     </div>
                     <div className="toolbar-button" onClick={this.toggleMoreInfo}>
                         <div className="toolbar-moreInfo">
@@ -807,10 +922,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
                 </select>
                 <div className="presBox-presentPanel">
-                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={this.startOrResetPres}>
+                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={() => this.startOrResetPres(0)}>
                         <FontAwesomeIcon icon={"clock"} /> &nbsp;
                         <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                        <div className="toolbar-divider" />
+                        <div className="toolbar-divider" style={{ marginLeft: 5 }} />
                         <FontAwesomeIcon onClick={e => { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} />
                         {this.playDropdown}
                     </div>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index f30ee2a5c..fc040f67b 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -230,7 +230,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         console.log("normal click");
                     }
                 }}
-                onPointerDown={e => e.stopPropagation()}>
+            // onPointerDown={e => e.stopPropagation()}
+            >
                 {treecontainer ? (null) : <>
                     <div className="presElementBox-number">
                         {`${this.indexInPres + 1}.`}