bug fixes + new ways of adding pres with view

3 files changed, 59 insertions, 36 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 46e30f616..3f93c27b7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1406,7 +1406,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.editZoomProgressivize)}
+                    presPinView={BoolCast(this.Document.presPinView)}
                     transition={Cast(this.layoutDoc._viewTransition, "string", null)}
                     viewDefDivClick={this.props.viewDefDivClick}
                     zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
@@ -1492,7 +1492,7 @@ interface CollectionFreeFormViewPannableContentsProps {
     transition?: string;
     presPaths?: boolean;
     progressivize?: boolean;
-    zoomProgressivize?: boolean;
+    presPinView?: boolean;
 }
 
 @observer
@@ -1559,48 +1559,27 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
                     doc.style.top = toNumber(top, e.movementY) + 'px';
                     doc.style.left = toNumber(left, e.movementX) + 'px';
             }
-            this.updateAll(height, width, top, left);
+            // this.updateAll(height, width, top, left);
             return false;
         }
         return true;
     }
 
-    @action
-    updateAll = (width: number, height: number, top: number, left: number) => {
-        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
-        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
-        this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width);
-        this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height);
-        this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top);
-        this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left);
-    }
-
-    @action
-    updateList = (doc: Doc, list: any, val: number) => {
-        const x: List<number> = list;
-        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
-            x[NumCast(doc.currentFrame)] = val;
-            list = x;
-        } else if (doc && x) {
-            x.length = NumCast(doc.currentFrame) + 1;
-            x[NumCast(doc.currentFrame)] = val;
-            list = x;
-        }
-    }
-
     // scale: NumCast(targetDoc._viewScale),
     @computed get zoomProgressivizeContainer() {
-        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
-        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
-        if (activeItem && activeItem.zoomProgressivize) {
-            const vfLeft: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
-            const vfWidth: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-width-indexed"]);
-            const vfTop: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-top-indexed"]);
-            const vfHeight: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-height-indexed"]);
+        const activeItem = PresBox.Instance.activeItem;
+        // const targetDoc = PresBox.Instance.targetDoc;
+        if (activeItem && activeItem.presPinView && activeItem.id) {
+            const vfLeft: number = NumCast(activeItem.presPinViewX);
+            const vfTop: number = NumCast(activeItem.presPinViewY);
+            const vfWidth: number = 100;
+            const vfHeight: number = 100;
+            console.log(vfTop + " | " + vfLeft);
+            console.log(this.props.presPinView);
             return (
                 <>
-                    {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
-                        <div className='resizers'>
+                    {!this.props.presPinView ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
+                        <div className='resizers' key={'resizer' + activeItem.id}>
                             <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerDown}></div>
                             <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerDown}></div>
                             <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerDown}></div>
@@ -1613,7 +1592,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
     }
 
     @computed get zoomProgressivize() {
-        return PresBox.Instance && this.props.zoomProgressivize ? this.zoomProgressivizeContainer : (null);
+        return PresBox.Instance && PresBox.Instance.activeItem && PresBox.Instance.activeItem.presPinView && PresBox.Instance.layoutDoc.presStatus === 'edit' ? this.zoomProgressivizeContainer : (null);
     }
 
     @computed get progressivize() {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 2cfe0183c..5e292a833 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -16,6 +16,7 @@ export default class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps>
     public inkToText: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction;
     public showMarquee: () => void = unimplementedFunction;
     public hideMarquee: () => void = unimplementedFunction;
+    public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -53,6 +54,14 @@ export default class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps>
                     <FontAwesomeIcon icon="font" size="lg" />
                 </button>
             </Tooltip>,
+            <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin to presentation with selected view</div></>} placement="bottom">
+                <button
+                    className="antimodeMenu-button"
+                    onPointerDown={this.pinWithView}>
+                    <FontAwesomeIcon icon="map-pin" size="lg" />
+                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(-4px, -22px)', color: 'rgba(250,250,250,0.55)' }}>V</div>
+                </button>
+            </Tooltip>,
         ];
         return this.getElement(buttons);
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c0b19fcd2..29982212f 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -22,6 +22,8 @@ import MarqueeOptionsMenu from "./MarqueeOptionsMenu";
 import "./MarqueeView.scss";
 import React = require("react");
 import { ContextMenuItem } from "../../ContextMenuItem";
+import { CollectionDockingView } from "../CollectionDockingView";
+import { DocumentManager } from "../../../util/DocumentManager";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -250,6 +252,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             MarqueeOptionsMenu.Instance.showMarquee = this.showMarquee;
             MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee;
             MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY);
+            MarqueeOptionsMenu.Instance.pinWithView = this.pinWithView;
             document.addEventListener("pointerdown", hideMarquee);
         } else {
             this.hideMarquee();
@@ -381,6 +384,38 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
     }
 
     @undoBatch @action
+    pinWithView = (e: KeyboardEvent | React.PointerEvent | undefined) => {
+        const doc = this.props.Document;
+        const bounds = this.Bounds;
+        const selected = this.marqueeSelect(false);
+        const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+        if (curPres) {
+            const pinDoc = Doc.MakeAlias(doc);
+            pinDoc.presentationTargetDoc = doc;
+            pinDoc.presZoomButton = true;
+            pinDoc.context = curPres;
+            Doc.AddDocToList(curPres, "data", pinDoc);
+            if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+            if (!DocumentManager.Instance.getDocumentView(curPres)) {
+                CollectionDockingView.AddRightSplit(curPres);
+            }
+            if (e instanceof KeyboardEvent ? e.key === "c" : true) {
+                const x = this.Bounds.left + this.Bounds.width / 2;
+                const y = this.Bounds.top + this.Bounds.height / 2;
+                const panelWidth: number = this.props.PanelWidth();
+                const panelHeight: number = this.props.PanelHeight();
+                const scale = Math.min(Number(panelWidth) / this.Bounds.width, Number(panelHeight) / this.Bounds.height);
+                pinDoc.presPinView = true;
+                pinDoc.presPinViewX = x;
+                pinDoc.presPinViewY = y;
+                pinDoc.presPinViewScale = scale;
+            }
+        }
+        MarqueeOptionsMenu.Instance.fadeOut(true);
+        this.hideMarquee();
+    }
+
+    @undoBatch @action
     collection = (e: KeyboardEvent | React.PointerEvent | undefined) => {
         const bounds = this.Bounds;
         const selected = this.marqueeSelect(false);