scrollProgressivize + viewfinder

9 files changed, 550 insertions, 146 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 237ea7675..d18eac374 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -127,6 +127,10 @@ export class DocumentManager {
         CollectionDockingView.AddRightSplit(doc);
         finished?.();
     }
+    // static openInPlace = (doc: Doc, finished?: () => void) => {
+    //     CollectionDockingView.AddTab(doc);
+    //     finished?.();
+    // }
     public jumpToDocument = async (
         targetDoc: Doc,        // document to display
         willZoom: boolean,     // whether to zoom doc to take up most of screen
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 3717a2923..3ce88292c 100644
--- a/src/client/views/.DS_Store
+++ b/src/client/views/.DS_Store
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 1895c06a1..9b14df760 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -18,6 +18,68 @@
         }
     }
 }
+
+.miniPres:hover {
+    opacity: 1;
+}
+
+.miniPres {
+    position: absolute;
+    overflow: hidden;
+    right: 10;
+    top: 10;
+    opacity: 0.1;
+    transition: all 0.4s;
+    /* border: solid 1px; */
+    color: white;
+    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+    
+    .miniPresOverlay {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto auto;
+        grid-template-rows: 100%;
+        height: 100%;
+        justify-items: center;
+        align-items: center;
+
+        .miniPres-button-text {
+            display: flex;
+            height: 30;
+            font-weight: 400;
+            min-width: 100%;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-divider {
+            width: 1px;
+            height: 80%;
+            border-right: solid 2px #5a5a5a;
+        }
+
+        .miniPres-button {
+            display: flex;
+            height: 30;
+            min-width: 30;
+            border-radius: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button:hover {
+            background-color: #5a5a5a;
+        }
+
+        .miniPres-button-text:hover {
+            background-color: #5a5a5a;
+        }
+    }
+}
+
+
 .lm_title {
     margin-top: 3px;
     border-radius: 5px;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 53b2d5254..b82a33bd8 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,6 +31,8 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { listSpec } from '../../../fields/Schema';
 import { clamp } from 'lodash';
+import { PresBox } from '../nodes/PresBox';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -838,6 +840,27 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             return false;
         }), emptyFunction, emptyFunction);
     }
+    getCurrentFrame = (): number => {
+        const presTargetDoc = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null);
+        const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
+        return currentFrame;
+    }
+    renderMiniPres() {
+        return <div className="miniPres" style={{
+            width: 400, height: 50, background: '#323232'
+        }}>
+            <div className="miniPresOverlay" >
+                <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+                <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+                <div className="miniPres-divider"></div>
+                <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div>
+                {/* <div className="miniPres-button-text">{this.getCurrentFrame}</div> */}
+                <div className="miniPres-divider"></div>
+                <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
+            </div>
+        </div>;
+    }
     renderMiniMap() {
         return <div className="miniMap" style={{
             width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor,
@@ -920,6 +943,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 ContainingCollectionView={undefined}
                 ContainingCollectionDoc={undefined} />
             {document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)}
+            {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)}
         </>;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e22b400c0..79540d19e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -214,7 +214,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             const layoutDoc = Doc.Layout(d);
             if (this.Document.currentFrame !== undefined) {
                 const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000));
-                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.opacity);
+                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.h, vals.w, vals.opacity);
             } else {
                 d.x = x + NumCast(d.x) - dropPos[0];
                 d.y = y + NumCast(d.y) - dropPos[1];
@@ -1405,7 +1405,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                     centeringShiftY={this.centeringShiftY}
                     presPaths={BoolCast(this.Document.presPathView)}
                     progressivize={BoolCast(this.Document.editProgressivize)}
-                    zoomProgressivize={BoolCast(this.Document.zoomProgressivize)}
+                    zoomProgressivize={BoolCast(this.Document.editZoomProgressivize)}
                     transition={Cast(this.layoutDoc._viewTransition, "string", null)}
                     viewDefDivClick={this.props.viewDefDivClick}
                     zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 480abdaed..5d1db6de2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -76,22 +76,30 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static getValues(doc: Doc, time: number) {
         const timecode = Math.round(time);
         return ({
+            h: Cast(doc["h-indexed"], listSpec("number"), [NumCast(doc._height)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
+            w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
             x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
             y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number),
             opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number),
         });
     }
 
-    public static setValues(time: number, d: Doc, x?: number, y?: number, opacity?: number) {
+    public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, opacity?: number) {
         const timecode = Math.round(time);
+        const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice();
+        const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice();
         const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice();
         const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice();
         const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice();
         xindexed[timecode] = x as any as number;
         yindexed[timecode] = y as any as number;
+        hindexed[timecode] = h as any as number;
+        windexed[timecode] = w as any as number;
         oindexed[timecode] = opacity as any as number;
         d["x-indexed"] = new List<number>(xindexed);
         d["y-indexed"] = new List<number>(yindexed);
+        d["h-indexed"] = new List<number>(hindexed);
+        d["w-indexed"] = new List<number>(windexed);
         d["opacity-indexed"] = new List<number>(oindexed);
     }
     public static updateKeyframe(docs: Doc[], time: number) {
@@ -99,7 +107,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         docs.forEach(doc => {
             const xindexed = Cast(doc['x-indexed'], listSpec("number"), null);
             const yindexed = Cast(doc['y-indexed'], listSpec("number"), null);
+            const hindexed = Cast(doc['h-indexed'], listSpec("number"), null);
+            const windexed = Cast(doc['w-indexed'], listSpec("number"), null);
             const opacityindexed = Cast(doc['opacity-indexed'], listSpec("number"), null);
+            hindexed?.length <= timecode + 1 && hindexed.push(undefined as any as number);
+            windexed?.length <= timecode + 1 && windexed.push(undefined as any as number);
             xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number);
             yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number);
             opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number);
@@ -118,14 +130,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         const height = new List<number>();
         const top = new List<number>();
         const left = new List<number>();
+        // width.push(100);
+        // height.push(100);
+        // top.push(0);
+        // left.push(0);
         width.push(NumCast(doc.width));
         height.push(NumCast(doc.height));
         top.push(NumCast(doc.height) / -2);
         left.push(NumCast(doc.width) / -2);
-        doc["width-indexed"] = width;
-        doc["height-indexed"] = height;
-        doc["top-indexed"] = top;
-        doc["left-indexed"] = left;
+        doc["viewfinder-width-indexed"] = width;
+        doc["viewfinder-height-indexed"] = height;
+        doc["viewfinder-top-indexed"] = top;
+        doc["viewfinder-left-indexed"] = left;
+    }
+
+    public static setupScroll(doc: Doc, scrollProgressivize: boolean = false) {
+        const scrollList = new List<number>();
+        scrollList.push(NumCast(doc._scrollTop));
+        doc["scroll-indexed"] = scrollList;
     }
 
     public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
@@ -134,6 +156,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             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 wlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
+            const hlist = 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 < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
             let oarray: List<number>;
             console.log(doc.title + "AF: " + doc.appearFrame);
@@ -143,15 +167,21 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             oarray.fill(1, NumCast(doc.appearFrame), timecode);
             // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
             // oarray.fill(1, NumCast(doc.appearFrame), timecode);
-            console.log(oarray);
+            // console.log(oarray);
+            wlist[curTimecode] = NumCast(doc._width);
+            hlist[curTimecode] = NumCast(doc._height);
             xlist[curTimecode] = NumCast(doc.x);
             ylist[curTimecode] = NumCast(doc.y);
             doc.xArray = xlist;
             doc.yArray = ylist;
             doc["x-indexed"] = xlist;
             doc["y-indexed"] = ylist;
+            doc["w-indexed"] = wlist;
+            doc["h-indexed"] = hlist;
             doc["opacity-indexed"] = oarray;
             doc.activeFrame = ComputedField.MakeFunction("self.context?.currentFrame||0");
+            doc._height = ComputedField.MakeInterpolated("h", "activeFrame");
+            doc._width = ComputedField.MakeInterpolated("w", "activeFrame");
             doc.x = ComputedField.MakeInterpolated("x", "activeFrame");
             doc.y = ComputedField.MakeInterpolated("y", "activeFrame");
             doc.opacity = ComputedField.MakeInterpolated("opacity", "activeFrame");
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 45bb4293b..b06503472 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -441,6 +441,7 @@
     padding-top: 5px;
     padding-bottom: 5px;
     border: solid 1px black;
+    // overflow: auto; 
 
     ::-webkit-scrollbar {
         -webkit-appearance: none;
@@ -450,37 +451,127 @@
 
     ::-webkit-scrollbar-thumb {
         border-radius: 2px;
-        background-color: rgb(101, 164, 220);
     }
 }
 
 .dropdown-play-button {
-    font-size: 10;
-    margin-left: 10;
-    margin-right: 10;
+    font-size: 12;
+    padding-left: 5px;
+    padding-right: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     text-align: left;
     justify-content: left;
-    border-bottom: solid 1px lightgrey;
+}
+
+.dropdown-play-button:hover {
+    background-color: lightgrey;
+}
+
+.presBox-button-left {
+    position: relative;
+    align-self: flex-start;
+    justify-self: flex-start;
+    width: 80%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.presBox-button-right {
+    position: relative;
+    text-align: center;
+    border-left: solid 1px darkgrey;
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.presBox-button-right.active {
+    background-color: #223063;
+    border: #aedcf6 solid 1px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
 }
 
 .dropdown-play {
-    top: 32px;
+    right: 0px;
+    top: calc(100% + 2px);
     display: none;
     border-radius: 5px;
     width: max-content;
     min-height: 20px;
     height: max-content;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
     z-index: 200;
-    background-color: #323232;
+    background-color: white;
+    color: black;
     position: absolute;
+    overflow: hidden;
 }
 
 .dropdown-play.active {
     display: block;
 }
 
+.layout-container {
+    overflow-x: scroll;
+    display: flex;
+    width: 100%;
+    /* max-width: 200px; */
+    min-width: 100px;
+    height: 100%;
+    // border: solid 1px;
+    /* display: block; */
+    align-self: center;
+
+    .layout:hover {
+        border: solid 2px #5c9edd;
+    }
+
+    .layout {
+        position: relative;
+        top: 10%;
+        height: 80%;
+        margin-right: 10;
+        min-width: 90px;
+        width: 90px;
+        border: solid black 1px;
+        display: grid;
+        grid-template-rows: 20px 30px;
+        align-items: center;
+        text-align: center;
+
+        .header {
+            font-size: 10;
+            font-weight: 600;
+            width: 70%;
+            height: max-content;
+            align-self: center;
+            justify-self: center;
+            border: solid 0.8px black;
+        }
+
+        .subheader {
+            font-size: 8;
+            font-weight: 400;
+            width: 70%;
+            height: 90%;
+            align-self: center;
+            justify-self: center;
+            border: solid 0.4px black;
+        }
+    }
+}
+
 .presBox-buttons {
     position: relative;
     width: 100%;
@@ -498,15 +589,19 @@
         border-radius: 5px;
         min-width: 15px;
         max-width: 100px;
+        left: 8px;
     }
 
     .presBox-presentPanel {
         display: flex;
         justify-self: end;
         width: 100%;
-
+        max-width: 300px;
+        min-width: 150px;
     }
 
+    
+
     select {
         background: #323232;
         color: white;
@@ -532,6 +627,10 @@
         display: flex;
     }
 
+    .presBox-button.active:hover {
+        background-color: #233163;
+    }
+
     .presBox-button.edit {
         display: flex;
         max-width: 25px;
@@ -542,7 +641,7 @@
         min-width: 100px;
         width: 100px;
         position: absolute;
-        right: 0px;
+        right: 8px;
 
         .present-icon {
             margin-right: 7px;
@@ -557,6 +656,7 @@
         height: 25;
         position: relative;
         display: inline-block;
+        left: 8px;
     }
 }
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index ac2288944..221f1e6a0 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -24,11 +24,11 @@ import { HighlightSpanKind } from "typescript";
 import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
 import { child } from "serializr";
-import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal';
 import { List } from "../../../fields/List";
 import { Tooltip } from "@material-ui/core";
 import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
 import { conformsTo } from "lodash";
+import { translate } from "googleapis/build/src/apis/translate";
 
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
@@ -72,11 +72,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     onPointerOver = () => {
         document.addEventListener("keydown", this.keyEvents, true);
-        // document.addEventListener("keydown", this.keyEvents, false);
     }
 
     onPointerLeave = () => {
-        // document.removeEventListener("keydown", this.keyEvents, false);
         document.removeEventListener("keydown", this.keyEvents, true);
     }
 
@@ -96,18 +94,34 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             presTargetDoc.currentFrame = curFrame + 1;
             if (presTargetDoc.zoomProgressivize) {
                 const srcContext = Cast(presTargetDoc.context, Doc, null);
-                if (srcContext) {
-                    srcContext._panX = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
-                    srcContext._panY = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]);
-                    srcContext._viewScale = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]);
-                }
-                presTargetDoc._panY = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
-                const resize = document.getElementById('resizable');
-                if (resize) {
-                    resize.style.width = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]) + 'px';
-                    resize.style.height = this.checkList(presTargetDoc, presTargetDoc["height-indexed"]) + 'px';
-                    resize.style.top = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]) + 'px';
-                    resize.style.left = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]) + 'px';
+                const srcDocView = DocumentManager.Instance.getDocumentView(srcContext);
+                if (srcContext && srcDocView) {
+                    const layoutdoc = Doc.Layout(presTargetDoc);
+                    const panelWidth: number = srcDocView.props.PanelWidth();
+                    const panelHeight: number = srcDocView.props.PanelHeight();
+                    console.log("srcDocView: " + srcDocView.props.PanelWidth());
+                    // console.log("layoutdoc._width: " + layoutdoc._width);
+                    // console.log("srcContext._width: " + srcContext._width);
+                    const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2;
+                    const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2;
+                    // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2;
+                    // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2;
+                    let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]));
+                    // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+                    // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+                    srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+                    srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+                    // srcContext._panX = newPanX
+                    // srcContext._panY = newPanY
+                    srcContext._viewScale = newScale;
+                    console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale);
+                    const resize = document.getElementById('resizable');
+                    if (resize) {
+                        resize.style.width = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) + 'px';
+                        resize.style.height = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) + 'px';
+                        resize.style.top = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + 'px';
+                        resize.style.left = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + 'px';
+                    }
                 }
             }
             // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide
@@ -322,8 +336,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (this._presTimer && this.layoutDoc.presStatus === "auto") {
-            clearInterval(this._presTimer);
+        if (this.layoutDoc.presStatus === "auto") {
+            if (this._presTimer) clearInterval(this._presTimer);
             this.layoutDoc.presStatus = "manual";
         } else {
             this.layoutDoc.presStatus = "auto";
@@ -381,28 +395,48 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
-    updateMinimize = action((e: React.ChangeEvent, mode: CollectionViewType) => {
-        if (BoolCast(this.layoutDoc.inOverlay) !== (mode === CollectionViewType.Invalid)) {
-            if (this.layoutDoc.inOverlay) {
+    updateMinimize = async () => {
+        const docToJump = this.childDocs[0];
+        const aliasOf = await DocCastAsync(docToJump.aliasOf);
+        const srcContext = aliasOf && await DocCastAsync(aliasOf.context);
+        if (srcContext) {
+            if (srcContext.miniPres) {
+                document.removeEventListener("keydown", this.keyEvents, true);
+                srcContext.miniPres = false;
                 Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
                 CollectionDockingView.AddRightSplit(this.rootDoc);
                 this.layoutDoc.inOverlay = false;
             } else {
-                const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
-                this.rootDoc.y = pt[1];////e.clientY - 25;
+                document.addEventListener("keydown", this.keyEvents, true);
+                srcContext.miniPres = true;
                 this.props.addDocTab?.(this.rootDoc, "close");
                 Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
             }
+
+
         }
-    });
+        // if (srcContext) {
+        //     Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+        //     CollectionDockingView.AddRightSplit(this.rootDoc);
+        //     this.layoutDoc.inOverlay = false;
+        // }
+        // else {
+        //         const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+        //         this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
+        //         this.rootDoc.y = pt[1];////e.clientY - 25;
+        //         this.props.addDocTab?.(this.rootDoc, "close");
+        //         Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+        //     }
+        // }
+    };
 
     @undoBatch
     viewChanged = action((e: React.ChangeEvent) => {
         //@ts-ignore
         const viewType = e.target.selectedOptions[0].value as CollectionViewType;
         viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
-        this.updateMinimize(e, this.rootDoc._viewType = viewType);
+        // this.updateMinimize(this.rootDoc._viewType = viewType);
+        if (viewType === CollectionViewType.Stacking) this.rootDoc._gridGap = 5;
     });
 
     @undoBatch
@@ -411,19 +445,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
         if (movement === 'zoom') {
             activeItem.presZoomButton = !activeItem.presZoomButton;
-            activeItem.presMovement = 'Zoom';
+            if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
+            else activeItem.presMovement = 'None';
             activeItem.presNavButton = false;
         } else if (movement === 'nav') {
             activeItem.presZoomButton = false;
-            activeItem.presMovement = 'Pan';
             activeItem.presNavButton = !activeItem.presNavButton;
+            if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
+            else activeItem.presMovement = 'None';
         } else if (movement === 'switch') {
-            activeItem.presMovement = 'Switch';
             targetDoc.presTransition = 0;
+            activeItem.presSwitchButton = !activeItem.presSwitchButton;
+            if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch';
+            else activeItem.presMovement = 'None';
         } else {
             activeItem.presMovement = 'None';
             activeItem.presZoomButton = false;
             activeItem.presNavButton = false;
+            activeItem.presSwitchButton = false;
         }
     });
 
@@ -439,7 +478,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement;
     removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc);
     getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
-    panelHeight = () => this.props.PanelHeight() - 20;
+    panelHeight = () => this.props.PanelHeight() - 40;
     active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
         (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
 
@@ -465,9 +504,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     //Regular click
     @action
     selectElement = (doc: Doc) => {
-        this._selectedArray = [];
+        // this._selectedArray = [];
         this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex));
-        this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
+        // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
         console.log(this._selectedArray);
     }
 
@@ -508,11 +547,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // Ctrl-A to select all
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) {
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
-            // left / a / up to go back
-        } if (e.keyCode === 37 || 65 || 38) {
+            // left(37) / a(65) / up(38) to go back
+        } if (e.keyCode === 37) {
             if (this.layoutDoc.presStatus !== "edit") this.back();
-            // right / d / down to go to next
-        } if (e.keyCode === 39 || 68 || 40) {
+            // right (39) / d(68) / down(40) to go to next
+        } if (e.keyCode === 39) {
             if (this.layoutDoc.presStatus !== "edit") this.next();
             // spacebar to 'present' or go to next slide
         } if (e.keyCode === 32) {
@@ -526,6 +565,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable private progressivizeTools: boolean = false;
     @observable private moreInfoTools: boolean = false;
     @observable private playTools: boolean = false;
+    @observable private presentTools: boolean = false;
     @observable private pathBoolean: boolean = false;
     @observable private expandBoolean: boolean = false;
 
@@ -548,6 +588,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     // For toggling the tools for progressivize
     @action toggleProgressivize = () => {
         this.progressivizeTools = !this.progressivizeTools;
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        targetDoc.editZoomProgressivize = false;
+        targetDoc.editProgressivize = false;
         this.transitionTools = false;
         this.newDocumentTools = false;
         this.moreInfoTools = false;
@@ -570,6 +614,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.moreInfoTools = false;
     }
 
+    // For toggling the options when the user wants to select play
+    @action togglePresent = () => {
+        this.presentTools = !this.presentTools;
+        this.playTools = false;
+        this.transitionTools = false;
+        this.newDocumentTools = false;
+        this.progressivizeTools = false;
+        this.moreInfoTools = false;
+    }
+
     @action toggleAllDropdowns() {
         this.transitionTools = false;
         this.newDocumentTools = false;
@@ -659,11 +713,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 strokeDasharray: '10 5',
             }}
             fill="none"
-            // markerStart="url(#square)"
-            // markerEnd="url(#arrow)"
-            marker-start="url(#markerSquare)"
-            marker-mid="url(#markerSquare)"
-            marker-end="url(#markerArrow)"
+            markerStart="url(#markerSquare)"
+            markerMid="url(#markerSquare)"
+            markerEnd="url(#markerArrow)"
         />);
     }
 
@@ -725,6 +777,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93);
             const durationThumbLocation = String(9.48 * Number(duration));
             const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
+            activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom';
             return (
                 <div className={`presBox-ribbon ${this.transitionTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
@@ -742,8 +795,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Switch' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch</div>
                             </div>
                         </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"}`}>
+                        <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
+                        <div className={`slider-headers ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`}>
                             <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: transitionThumbLocation + '%' }}>{transitionSpeed}s</div>
                             <div className="slider-text">Slow</div>
                             <div className="slider-text"></div>
@@ -784,7 +837,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll</div>
                             </div>
                         </div>
-                        <div className="effectDirection">
+                        <div className="effectDirection" style={{ display: effect === 'None' ? "none" : "grid" }}>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from left"}</div></>}><div style={{ gridColumn: 1, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "left" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'left'}><FontAwesomeIcon icon={"angle-right"} /></div></Tooltip>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from right"}</div></>}><div style={{ gridColumn: 3, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "right" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'right'}><FontAwesomeIcon icon={"angle-left"} /></div></Tooltip>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from top"}</div></>}><div style={{ gridColumn: 2, gridRow: 1, justifySelf: 'center', color: targetDoc.presEffectDirection === "top" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'top'}><FontAwesomeIcon icon={"angle-down"} /></div></Tooltip>
@@ -863,6 +916,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div title="Freeform" className={'ribbon-button'} style={{ background: type === 'freeform' ? "#000000" : "#f6f6f6" }} onClick={action(() => { type = "freeform"; })}>Freeform</div>
                         </div>
                     </div>
+                    <div className="ribbon-box">
+                        Preset layouts:
+                        <div className="layout-container">
+                            <div className="layout">
+                                <div className="header">HEADER</div>
+                                <div className="subheader">Content goes here</div>
+                            </div>
+                            <div className="layout">
+                                <div className="header" style={{ gridColumn: 1 / 2, gridRow: 1 }}>HEADER</div>
+                                <div className="subheader" style={{ gridColumn: 1, gridRow: 2 }}>Some content</div>
+                                <div className="subheader" style={{ gridColumn: 2, gridRow: 2 }}>Some more content</div>
+                            </div>
+                            <div className="layout">
+                                <div className="header">HEADER</div>
+                                <div className="subheader">Content goes here</div>
+                            </div>
+                        </div>
+                    </div>
                     <div className="ribbon-final-box">
                         <div className="ribbon-final-button" onClick={() => this.createNewSlide(title, type)}>
                             Create New Slide
@@ -877,10 +948,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         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
+                    Present from current slide
                 </div>
                 <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
-                    Start from first slide
+                    Present from first slide
+                </div>
+            </div>
+        );
+    }
+
+    @computed get presentDropdown() {
+        return (
+            <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
+                <div className="dropdown-play-button" onClick={this.updateMinimize}>
+                    Minimize
+                </div>
+                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
+                    Sidebar view
                 </div>
             </div>
         );
@@ -916,10 +1000,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (tagDoc.zoomProgressivize) {
             const resize = document.getElementById('resizable');
             if (resize) {
-                resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
-                resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
-                resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
-                resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+                resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+                resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+                resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+                resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
             }
         }
     }
@@ -938,10 +1022,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (tagDoc.zoomProgressivize) {
             const resize = document.getElementById('resizable');
             if (resize) {
-                resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
-                resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
-                resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
-                resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+                resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+                resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+                resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+                resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
             }
         }
     }
@@ -976,18 +1060,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             </div>
                         </div>
                         <div className="ribbon-final-box">
-                            <div className="ribbon-doubleButton">
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Child documents</div>
                                 <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "flex" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton">
-                                <div className="ribbon-button" onClick={this.progressivizeZoom}>Internal zoom</div>
-                                <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.zoomProgressivize ? "#aedef8" : "" }} onClick={this.zoomProgressivize}>Edit</div>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" || targetDoc.type === "image" ? "inline-flex" : "none" }}>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Internal zoom</div>
+                                <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton">
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "rtf" ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.textProgressivize ? "#aedef8" : "" }} onClick={this.textProgressivize}>Edit</div>
                             </div>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "pdf" ? "inline-flex" : "none" }}>
+                                <div className="ribbon-button" onClick={this.progressivizeText}>Scroll progressivize</div>
+                                <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -995,30 +1083,59 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    //Progressivize Zoom
+    //Toggle whether the user edits or not
+    @action
+    editZoomProgressivize = (e: React.MouseEvent) => {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        if (!targetDoc.editZoomProgressivize) {
+            targetDoc.editZoomProgressivize = true;
+        } else {
+            targetDoc.editZoomProgressivize = false;
+        }
+    }
+
+    //Toggle whether the user edits or not
     @action
-    zoomProgressivize = (e: React.MouseEvent) => {
+    editScrollProgressivize = (e: React.MouseEvent) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (targetDoc?.zoomProgressivize) {
-            targetDoc.zoomProgressivize = false;
+        if (!targetDoc.editScrollProgressivize) {
+            targetDoc.editScrollProgressivize = true;
         } else {
-            targetDoc.zoomProgressivize = true;
+            targetDoc.editScrollProgressivize = false;
         }
     }
 
+    //Progressivize Zoom
+    @action
+    progressivizeScroll = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize;
+        CollectionFreeFormDocumentView.setupScroll(targetDoc, true);
+        if (targetDoc.editScrollProgressivize) {
+            targetDoc.editScrollProgressivize = false;
+            targetDoc.currentFrame = 0;
+            targetDoc.lastFrame = 0;
+        }
+    }
+
+    //Progressivize Zoom
     @action
     progressivizeZoom = (e: React.MouseEvent) => {
         e.stopPropagation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         activeItem.zoomProgressivize = !activeItem.zoomProgressivize;
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
         targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize;
-        console.log(targetDoc.zoomProgressivize);
-        if (activeItem.zoomProgressivize) {
-            console.log("progressivize");
+        CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
+        if (targetDoc.editZoomProgressivize) {
+            targetDoc.editZoomProgressivize = false;
             targetDoc.currentFrame = 0;
+            targetDoc.lastFrame = 0;
         }
     }
 
@@ -1081,9 +1198,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             targetDoc.editProgressivize = false;
             activeItem.presProgressivize = false;
             targetDoc.presProgressivize = false;
-            docs.forEach((doc, index) => {
-                doc.appearFrame = 0;
-            });
+            // docs.forEach((doc, index) => {
+            //     doc.appearFrame = 0;
+            // });
             targetDoc.currentFrame = 0;
             targetDoc.lastFrame = 0;
         }
@@ -1130,6 +1247,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     private _isDraggingBR = false;
     private _isDraggingBL = false;
     private _isDragging = false;
+    // private _drag = "";
+
+    // onPointerDown = (e: React.PointerEvent): void => {
+    //     e.stopPropagation();
+    //     e.preventDefault();
+    //     if (e.button === 0) {
+    //         this._drag = e.currentTarget.id;
+    //         console.log(this._drag);
+    //     }
+    //     document.removeEventListener("pointermove", this.onPointerMove);
+    //     document.addEventListener("pointermove", this.onPointerMove);
+    //     document.removeEventListener("pointerup", this.onPointerUp);
+    //     document.addEventListener("pointerup", this.onPointerUp);
+    // }
+
 
     //Adds event listener so knows pointer is down and moving
     onPointerMid = (e: React.PointerEvent): void => {
@@ -1203,87 +1335,136 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     onPointerMove = (e: PointerEvent): void => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc);
         e.stopPropagation();
         e.preventDefault();
         const doc = document.getElementById('resizable');
-        if (doc) {
+        if (doc && tagDocView) {
+            console.log(tagDocView.props.ScreenToLocalTransform().Scale);
             let height = doc.offsetHeight;
             let width = doc.offsetWidth;
             let top = doc.offsetTop;
             let left = doc.offsetLeft;
+            // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale));
+            // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale));
+            // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale));
+            // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale));
+            // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale));
+            // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale));
+            // switch (this._drag) {
+            //     case "": break;
+            //     case "resizer-br":
+            //         doc.style.height = newHeightB + 'px';
+            //         doc.style.width = newWidthR + 'px';
+            //         break;
+            //     case "resizer-bl":
+            //         doc.style.height = newHeightB + 'px';
+            //         doc.style.width = newWidthL + 'px';
+            //         doc.style.left = newLeft + 'px';
+            //         break;
+            //     case "resizer-tr":
+            //         doc.style.width = newWidthR + 'px';
+            //         doc.style.height = newHeightT + 'px';
+            //         doc.style.top = newTop + 'px';
+            //     case "resizer-tl":
+            //         doc.style.width = newWidthL + 'px';
+            //         doc.style.height = newHeightT + 'px';
+            //         doc.style.top = newTop + 'px';
+            //         doc.style.left = newLeft + 'px';
+            //     case "resizable":
+            //         doc.style.top = newTop + 'px';
+            //         doc.style.left = newLeft + 'px';
+            // }
             //Bottom right
             if (this._isDraggingBR) {
-                const newHeight = height += e.movementY;
+                const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newWidth = width += e.movementX;
+                const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
                 // Bottom left
             } else if (this._isDraggingBL) {
-                const newHeight = height += e.movementY;
+                const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newWidth = width -= e.movementX;
+                const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
                 // Top right
             } else if (this._isDraggingTR) {
-                const newWidth = width += e.movementX;
+                const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newHeight = height -= e.movementY;
+                const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
                 // Top left
             } else if (this._isDraggingTL) {
-                const newWidth = width -= e.movementX;
+                const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newHeight = height -= e.movementY;
+                const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
             } else if (this._isDragging) {
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
             }
-            this.updateList(targetDoc, targetDoc["width-indexed"], width);
-            this.updateList(targetDoc, targetDoc["height-indexed"], height);
-            this.updateList(targetDoc, targetDoc["top-indexed"], top);
-            this.updateList(targetDoc, targetDoc["left-indexed"], left);
+            this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width);
+            this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height);
+            this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top);
+            this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left);
         }
     }
 
     @action
     checkList = (doc: Doc, list: any): number => {
         const x: List<number> = list;
-        return x[NumCast(doc.currentFrame)];
+        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+            return x[NumCast(doc.currentFrame)];
+        } else {
+            x.length = NumCast(doc.currentFrame) + 1;
+            x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1];
+            return x[NumCast(doc.currentFrame)];
+        }
+
     }
 
     @action
     updateList = (doc: Doc, list: any, val: number) => {
         const x: List<number> = list;
-        x[NumCast(doc.currentFrame)] = val;
-        list = x;
+        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        } else {
+            x.length = NumCast(doc.currentFrame) + 1;
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        }
+
     }
 
+    // scale: NumCast(targetDoc._viewScale),
     @computed get zoomProgressivizeContainer() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
-        CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
-
-        return (
-            <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["width-indexed"]), height: this.checkList(targetDoc, targetDoc["height-indexed"]), top: this.checkList(targetDoc, targetDoc["top-indexed"]), left: this.checkList(targetDoc, targetDoc["left-indexed"]), position: 'absolute' }}>
-                <div className='resizers'>
-                    <div className='resizer top-left' onPointerDown={this.onPointerTL}></div>
-                    <div className='resizer top-right' onPointerDown={this.onPointerTR}></div>
-                    <div className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
-                    <div className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
-                </div>
-            </div>
-        );
+        if (targetDoc.editZoomProgressivize) {
+            return (
+                <>
+                    <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["viewfinder-width-indexed"]), height: this.checkList(targetDoc, targetDoc["viewfinder-height-indexed"]), top: this.checkList(targetDoc, targetDoc["viewfinder-top-indexed"]), left: this.checkList(targetDoc, targetDoc["viewfinder-left-indexed"]), position: 'absolute' }}>
+                        <div className='resizers'>
+                            <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div>
+                            <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div>
+                            <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
+                            <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
+                        </div>
+                    </div>
+                </>
+            );
+        } else return null;
     }
 
     @computed get progressivizeChildDocs() {
@@ -1341,9 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return (<div></div>);
     }
 
-    @observable
-    toolbarWidth = (): number => {
-        console.log(this.props.PanelWidth());
+    @computed
+    get toolbarWidth(): number {
         const width = this.props.PanelWidth();
         return width;
     }
@@ -1361,8 +1541,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}>
                         <FontAwesomeIcon icon={"exchange-alt"} onClick={this.viewPaths} />
                     </div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Expand all" : "Minimize all"}</div></>}>
-                        <div className={`toolbar-button ${this.expandBoolean ? "" : "active"}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}>
+                    <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+                        <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
                             <FontAwesomeIcon icon={"eye"} />
                         </div>
                     </Tooltip>
@@ -1370,13 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className="toolbar-divider" />
                     <Tooltip title={<><div className="dash-tooltip">{"Transitions"}</div></>}><div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
                         <FontAwesomeIcon icon={"rocket"} />
-                        <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
+                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
                         <FontAwesomeIcon className={`dropdown ${this.transitionTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
                     <Tooltip title={<><div className="dash-tooltip">{"Progressivize"}</div></>}><div className={`toolbar-button ${this.progressivizeTools ? "active" : ""}`} onClick={this.toggleProgressivize}>
                         <FontAwesomeIcon icon={"tasks"} />
-                        <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
+                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
                         <FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
@@ -1401,9 +1581,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}>
                         <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
                     </div>
-                    <Fade left when={this.moreInfoTools}>
-                        <h1>uppercase</h1>
-                    </Fade>
                     <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
                         <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
                             <div className="toolbar-moreInfoBall" />
@@ -1425,22 +1602,29 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     onPointerDown={e => e.stopPropagation()}
                     onChange={this.viewChanged}
                     value={mode}>
-                    <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option>
+                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option> */}
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
-                    <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option>
+                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option> */}
                     <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(0)}>
-                        <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                        <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                        <div className="toolbar-divider" style={{ marginLeft: 5 }} />
-                        <FontAwesomeIcon onClick={e => { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} />
-                        {this.playDropdown}
-                    </div>
-                    <div className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present" onClick={() => this.layoutDoc.presStatus = "manual"}>
-                        <FontAwesomeIcon className="present-icon" icon={"play-circle"} /> Present
-                    </div>
+                    <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ minWidth: 60, gridColumn: 2 }}>
+                        <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
+                            <FontAwesomeIcon icon={"clock"} /> &nbsp;
+                            <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+                        </div>
+                        <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+                            <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                            {this.playDropdown}
+                        </div>
+                    </span>
+                    <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present">
+                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> &nbsp; Present </div>
+                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
+                            <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                            {this.presentDropdown}
+                        </div>
+                    </span>
                     <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title="Back" onClick={this.back}>
                         <FontAwesomeIcon icon={"arrow-left"} />
                     </div>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6c6bad06a..4d1195808 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -260,11 +260,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <div className="presElementBox-name">
                         {`${this.targetDoc?.title}`}
                     </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time">{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time">{this.duration}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
-                        onPointerDown={e => e.stopPropagation()}
+                        // onPointerDown={e => e.stopPropagation()}
                         onClick={e => {
                             this.props.removeDocument?.(this.rootDoc);
                             e.stopPropagation();