marquee create slide

4 files changed, 89 insertions, 24 deletions

diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 58289a161..7f96217b8 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -59,6 +59,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
     @observable _paletteOn = false;
     @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
     @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+
     _ele: HTMLElement | null = null;
 
     createColumnDropRef = (ele: HTMLDivElement | null) => {
@@ -69,6 +70,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this));
         }
     }
+
     componentWillUnmount() {
         this.props.unobserveHeight(this._ele);
     }
@@ -237,6 +239,9 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y);
         ContextMenu.Instance.displayMenu(x, y, undefined, true);
     }
+
+
+
     @computed get innards() {
         TraceMobx();
         const key = this.props.pivotField;
@@ -307,7 +312,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                             }}>
                             {this.props.renderChildren(this.props.docList)}
                         </div>
-                        {!this.props.chromeHidden && type !== DocumentType.PRES ?
+                        {!this.props.chromeHidden ?
                             <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
                                 style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
                                 <EditableView
@@ -317,7 +322,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                                     contents={"+ NEW"}
                                     toggle={this.toggleVisibility}
                                     menuCallback={this.menuCallback} />
-                            </div> : null}
+                            </div>
+                            : null
+                        }
+
+
                     </div>
             }
         </>;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 08da682bb..dbd15be3b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -25,6 +25,7 @@ import { PreviewCursor } from "../../PreviewCursor";
 import { CollectionDockingView } from "../CollectionDockingView";
 import { SubCollectionViewProps } from "../CollectionSubView";
 import { CollectionView } from "../CollectionView";
+import { CollectionStackingViewFieldColumn } from "../CollectionStackingViewFieldColumn";
 import { MarqueeOptionsMenu } from "./MarqueeOptionsMenu";
 import "./MarqueeView.scss";
 import React = require("react");
@@ -51,7 +52,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
     @observable _lastY: number = 0;
     @observable _downX: number = 0;
     @observable _downY: number = 0;
-    @observable _visible: boolean = false;
+    @observable _visible: boolean = false; // selection rentangle for marquee selection/free hand lasso is visible
     @observable _lassoPts: [number, number][] = [];
     @observable _lassoFreehand: boolean = false;
 
@@ -260,7 +261,13 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             document.removeEventListener("pointerdown", hideMarquee);
             document.removeEventListener("wheel", hideMarquee);
         };
-        if (!this._commandExecuted && (Math.abs(this.Bounds.height * this.Bounds.width) > 100)) {
+        if (PresBox.startMarquee) {
+            console.log(PresBox.startMarquee);
+            this.pinMarqueeView();
+            PresBox.startMarquee = false;
+            console.log(PresBox.startMarquee);
+        }
+        if (!this._commandExecuted && (Math.abs(this.Bounds.height * this.Bounds.width) > 100) && !PresBox.startMarquee) {
             MarqueeOptionsMenu.Instance.createCollection = this.collection;
             MarqueeOptionsMenu.Instance.delete = this.delete;
             MarqueeOptionsMenu.Instance.summarize = this.summary;
@@ -382,6 +389,41 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
 
     @undoBatch
     @action
+    pinMarqueeView = () => {
+        const doc = this.props.Document;
+        const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+        if (curPres) {
+            console.log(curPres);
+            if (doc === curPres) { alert("Cannot pin presentation document to itself"); return; }
+            const pinDoc = Doc.MakeAlias(doc);
+            pinDoc.presentationTargetDoc = doc;
+            pinDoc.presMovement = PresMovement.Zoom;
+            pinDoc.groupWithUp = false;
+            pinDoc.context = curPres;
+            pinDoc.title = doc.title + " - Slide";
+            const presArray = PresBox.Instance?.sortArray();
+            const size = PresBox.Instance?._selectedArray.size;
+            const presSelected = presArray && size ? presArray[size - 1] : undefined;
+            Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
+            if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+            if (!DocumentManager.Instance.getDocumentView(curPres)) {
+                CollectionDockingView.AddSplit(curPres, "right");
+            }
+            PresBox.Instance?._selectedArray.clear();
+            pinDoc && PresBox.Instance?._selectedArray.set(pinDoc, undefined); //Updates selected array
+            const index = PresBox.Instance?.childDocs.indexOf(pinDoc);
+            index && (curPres._itemIndex = index);
+            const scale = Math.min(this.props.PanelWidth() / this.Bounds.width, this.props.PanelHeight() / this.Bounds.height);
+            pinDoc.presPinView = true;
+            pinDoc.presPinViewX = this.Bounds.left + this.Bounds.width / 2;
+            pinDoc.presPinViewY = this.Bounds.top + this.Bounds.height / 2;
+            pinDoc.presPinViewScale = scale;
+        }
+        this.hideMarquee();
+    }
+
+    @undoBatch
+    @action
     pinWithView = (e: KeyboardEvent | React.PointerEvent | undefined) => {
         const doc = this.props.Document;
         const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
@@ -647,7 +689,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         return <div className="marqueeView"
             style={{
                 overflow: StrCast(this.props.Document._overflow),
-                cursor: CurrentUserUtils.SelectedTool === InkTool.Pen ? "crosshair" : "pointer"
+                cursor: CurrentUserUtils.SelectedTool === InkTool.Pen || this._visible || PresBox.startMarquee ? "crosshair" : "pointer"
             }}
 
             onDragOver={e => e.preventDefault()}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 48223a5f0..5a7604ca4 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -94,6 +94,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable _expandBoolean: boolean = false;
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
+
+    @observable static startMarquee: boolean = false; // onclick "+ new slide" in presentation mode, set as true, then when marquee selection finish, onPointerUp automatically triggers PinWithView
     @observable private transitionTools: boolean = false;
     @observable private newDocumentTools: boolean = false;
     @observable private progressivizeTools: boolean = false;
@@ -2422,6 +2424,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         else this.pauseAutoPres();
     }
 
+    @action
+    startMarqueeCreateSlide = () => {
+        PresBox.startMarquee = true;
+    }
+
     render() {
         // calling this method for keyEvents
         this.isPres;
@@ -2455,24 +2462,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
                 <div className="presBox-listCont">
-                    {mode !== CollectionViewType.Invalid ?
-                        <CollectionView {...this.props}
-                            ContainingCollectionDoc={this.props.Document}
-                            PanelWidth={this.props.PanelWidth}
-                            PanelHeight={this.panelHeight}
-                            childIgnoreNativeSize={true}
-                            moveDocument={returnFalse}
-                            childFitWidth={returnTrue}
-                            childOpacity={returnOne}
-                            childLayoutTemplate={this.childLayoutTemplate}
-                            filterAddDocument={this.addDocumentFilter}
-                            removeDocument={returnFalse}
-                            dontRegisterView={true}
-                            focus={this.selectElement}
-                            ScreenToLocalTransform={this.getTransform}
-                        />
-                        : (null)
-                    }
+                    <div className="Slide" style={{ height: `calc(100% - 100px)` }}>
+                        {mode !== CollectionViewType.Invalid ?
+                            <CollectionView {...this.props}
+                                ContainingCollectionDoc={this.props.Document}
+                                PanelWidth={this.props.PanelWidth}
+                                PanelHeight={this.panelHeight}
+                                childIgnoreNativeSize={true}
+                                moveDocument={returnFalse}
+                                childFitWidth={returnTrue}
+                                childOpacity={returnOne}
+                                childLayoutTemplate={this.childLayoutTemplate}
+                                filterAddDocument={this.addDocumentFilter}
+                                removeDocument={returnFalse}
+                                dontRegisterView={true}
+                                focus={this.selectElement}
+                                ScreenToLocalTransform={this.getTransform}
+                            /> : (null)
+                        }
+                    </div>
+
+                    { // if the document type is a presentation, then the collection stacking view has a "+ new slide" button at the bottom of the stack
+                        <div className="add button" style={{ width: 200, height: 100 }}>
+                            <button onClick={this.startMarqueeCreateSlide}> + NEW SLIDE</button>
+                        </div>}
                 </div>
             </div>;
     }
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 560cf3d63..fe6158154 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -11,7 +11,8 @@ export enum InkTool {
     Pen = "pen",
     Highlighter = "highlighter",
     Eraser = "eraser",
-    Stamp = "stamp"
+    Stamp = "stamp",
+    PresentationPin = 'presentationpin'
 }