Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

6 files changed, 122 insertions, 198 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index b564564be..6a0b3fad8 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -473,4 +473,40 @@ export function clearStyleSheetRules(sheet: any) {
         return true;
     }
     return false;
+}
+
+export function setupMoveUpEvents(
+    target: object,
+    e: React.PointerEvent,
+    moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean,
+    upEvent: (e: PointerEvent) => void,
+    clickEvent: (e: PointerEvent) => void) {
+    (target as any)._downX = (target as any)._lastX = e.clientX;
+    (target as any)._downY = (target as any)._lastY = e.clientY;
+
+    const _moveEvent = (e: PointerEvent): void => {
+        if (Math.abs(e.clientX - (target as any)._downX) > 4 || Math.abs(e.clientY - (target as any)._downY) > 4) {
+            if (moveEvent(e, [(target as any)._downX, (target as any)._downY],
+                [e.clientX - (target as any)._lastX, e.clientY - (target as any)._lastY])) {
+                document.removeEventListener("pointermove", _moveEvent);
+                document.removeEventListener("pointerup", _upEvent);
+            }
+        }
+        (target as any)._lastX = e.clientX;
+        (target as any)._lastY = e.clientY;
+        e.stopPropagation();
+    }
+    const _upEvent = (e: PointerEvent): void => {
+        upEvent(e);
+        if (Math.abs(e.clientX - (target as any)._downX) < 4 || Math.abs(e.clientY - (target as any)._downY) < 4) {
+            clickEvent(e);
+        }
+        document.removeEventListener("pointermove", _moveEvent);
+        document.removeEventListener("pointerup", _upEvent);
+    }
+    e.stopPropagation();
+    document.removeEventListener("pointermove", _moveEvent);
+    document.removeEventListener("pointerup", _upEvent);
+    document.addEventListener("pointermove", _moveEvent);
+    document.addEventListener("pointerup", _upEvent);
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3388ea46c..f516bb8fc 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -8,7 +8,7 @@ import { PositionDocument } from '../../new_fields/documentSchemas';
 import { ScriptField } from '../../new_fields/ScriptField';
 import { Cast, StrCast } from "../../new_fields/Types";
 import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
-import { Utils } from "../../Utils";
+import { Utils, setupMoveUpEvents } from "../../Utils";
 import { DocUtils } from "../documents/Documents";
 import { DocumentType } from '../documents/DocumentTypes';
 import { DragManager } from "../util/DragManager";
@@ -19,9 +19,6 @@ import './DocumentDecorations.scss';
 import { DocumentView } from "./nodes/DocumentView";
 import React = require("react");
 import { Id } from '../../new_fields/FieldSymbols';
-const higflyout = require("@hig/flyout");
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
 
 library.add(faCaretUp);
 library.add(faObjectGroup);
@@ -44,16 +41,12 @@ export type CloseCall = (toBeDeleted: DocumentView[]) => void;
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
     static Instance: DocumentDecorations;
-    private _isPointerDown = false;
-    private _resizing = "";
+    private _resizeHdlId = "";
     private _keyinput: React.RefObject<HTMLInputElement>;
     private _resizeBorderWidth = 16;
     private _linkBoxHeight = 20 + 3; // link button height + margin
     private _titleHeight = 20;
-    private _downX = 0;
-    private _downY = 0;
     private _resizeUndo?: UndoManager.Batch;
-    private _radiusDown = [0, 0];
     @observable private _accumulatedTitle = "";
     @observable private _titleControlString: string = "#title";
     @observable private _edtingTitle = false;
@@ -75,7 +68,29 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         reaction(() => SelectionManager.SelectedDocuments().slice(), docs => this.titleBlur(false));
     }
 
-    @action titleChanged = (event: any) => this._accumulatedTitle = event.target.value;
+    @computed
+    get Bounds(): { x: number, y: number, b: number, r: number } {
+        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
+            if (documentView.props.renderDepth === 0 ||
+                Doc.AreProtosEqual(documentView.props.Document, CurrentUserUtils.UserDocument)) {
+                return bounds;
+            }
+            const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
+            var [sptX, sptY] = transform.transformPoint(0, 0);
+            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
+            if (documentView.props.Document.type === DocumentType.LINK) {
+                const rect = documentView.ContentDiv!.getElementsByClassName("docuLinkBox-cont")[0].getBoundingClientRect();
+                sptX = rect.left;
+                sptY = rect.top;
+                bptX = rect.right;
+                bptY = rect.bottom;
+            }
+            return {
+                x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+                r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
+            };
+        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+    }
 
     addCloseCall = (handler: CloseCall) => {
         const currentOffset = this.addedCloseCalls.length - 1;
@@ -85,7 +100,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         });
     }
 
-    titleBlur = undoBatch(action((commit: boolean) => {
+    titleBlur = action((commit: boolean) => {
         this._edtingTitle = false;
         if (commit) {
             if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
@@ -93,12 +108,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             } else if (this._titleControlString.startsWith("#")) {
                 const selectionTitleFieldKey = this._titleControlString.substring(1);
                 selectionTitleFieldKey === "title" && (SelectionManager.SelectedDocuments()[0].props.Document.customTitle = !this._accumulatedTitle.startsWith("-"));
-                selectionTitleFieldKey && SelectionManager.SelectedDocuments().forEach(d =>
-                    Doc.SetInPlace(d.props.Document, selectionTitleFieldKey, typeof d.props.Document[selectionTitleFieldKey] === "number" ? +this._accumulatedTitle : this._accumulatedTitle, true)
-                );
+                let didAnything = false;
+                UndoManager.RunInBatch(() => selectionTitleFieldKey && SelectionManager.SelectedDocuments().forEach(d => {
+                    const value = typeof d.props.Document[selectionTitleFieldKey] === "number" ? +this._accumulatedTitle : this._accumulatedTitle;
+                    didAnything = didAnything || d.props.Document[selectionTitleFieldKey] !== value;
+                    Doc.SetInPlace(d.props.Document, selectionTitleFieldKey, value, true)
+                }), "title blur");
+                if (!didAnything) UndoManager.Undo();
             }
         }
-    }));
+    });
 
     @action titleEntered = (e: any) => {
         const key = e.keyCode || e.which;
@@ -115,66 +134,20 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         }
     }
     @action onTitleDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        e.stopPropagation();
-        document.removeEventListener("pointermove", this.onTitleMove);
-        document.removeEventListener("pointerup", this.onTitleUp);
-        document.addEventListener("pointermove", this.onTitleMove);
-        document.addEventListener("pointerup", this.onTitleUp);
-    }
-    @action onTitleMove = (e: PointerEvent): void => {
-        if (Math.abs(e.clientX - this._downX) > 4 || Math.abs(e.clientY - this._downY) > 4) {
-            this.Interacting = true;
-        }
-        if (this.Interacting) this.onBackgroundMove(e);
-        e.stopPropagation();
-    }
-    @action onTitleUp = (e: PointerEvent): void => {
-        if (Math.abs(e.clientX - this._downX) < 4 || Math.abs(e.clientY - this._downY) < 4) {
-            !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
-            this._edtingTitle = true;
-            setTimeout(() => this._keyinput.current!.focus(), 0);
-        }
-        document.removeEventListener("pointermove", this.onTitleMove);
-        document.removeEventListener("pointerup", this.onTitleUp);
-        this.onBackgroundUp(e);
+        setupMoveUpEvents(this, e, this.onBackgroundMove, (e) => { }, this.onTitleClick);
     }
-
-    @computed
-    get Bounds(): { x: number, y: number, b: number, r: number } {
-        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
-            if (documentView.props.renderDepth === 0 ||
-                Doc.AreProtosEqual(documentView.props.Document, CurrentUserUtils.UserDocument)) {
-                return bounds;
-            }
-            const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
-            var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
-            if (documentView.props.Document.type === DocumentType.LINK) {
-                const rect = documentView.ContentDiv!.getElementsByClassName("docuLinkBox-cont")[0].getBoundingClientRect();
-                sptX = rect.left;
-                sptY = rect.top;
-                bptX = rect.right;
-                bptY = rect.bottom;
-            }
-            return {
-                x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
-                r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
-            };
-        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+    @action onTitleClick = (e: PointerEvent): void => {
+        !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
+        this._edtingTitle = true;
+        setTimeout(() => this._keyinput.current!.focus(), 0);
     }
 
     onBackgroundDown = (e: React.PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onBackgroundMove);
-        document.removeEventListener("pointerup", this.onBackgroundUp);
-        document.addEventListener("pointermove", this.onBackgroundMove);
-        document.addEventListener("pointerup", this.onBackgroundUp);
-        e.stopPropagation();
+        setupMoveUpEvents(this, e, this.onBackgroundMove, (e) => { }, (e) => { });
     }
 
     @action
-    onBackgroundMove = (e: PointerEvent): void => {
+    onBackgroundMove = (e: PointerEvent, down: number[]): boolean => {
         const dragDocView = SelectionManager.SelectedDocuments()[0];
         const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
         const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).inverse().transformPoint(0, 0);
@@ -183,43 +156,19 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         dragData.isSelectionMove = true;
         this.Interacting = true;
         this._hidden = true;
-        document.removeEventListener("pointermove", this.onBackgroundMove);
-        document.removeEventListener("pointerup", this.onBackgroundUp);
-        document.removeEventListener("pointermove", this.onTitleMove);
-        document.removeEventListener("pointerup", this.onTitleUp);
         DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(documentView => documentView.ContentDiv!), dragData, e.x, e.y, {
             dragComplete: action(e => this._hidden = this.Interacting = false),
             hideSource: true
         });
-        e.stopPropagation();
-    }
-
-    @action
-    onBackgroundUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onBackgroundMove);
-        document.removeEventListener("pointerup", this.onBackgroundUp);
-        e.stopPropagation();
-        e.preventDefault();
+        return true;
     }
 
     onCloseDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        if (e.button === 0) {
-            document.removeEventListener("pointermove", this.onCloseMove);
-            document.addEventListener("pointermove", this.onCloseMove);
-            document.removeEventListener("pointerup", this.onCloseUp);
-            document.addEventListener("pointerup", this.onCloseUp);
-        }
-    }
-    onCloseMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        if (e.button === 0) {
-        }
+        setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onCloseClick);
     }
     @undoBatch
     @action
-    onCloseUp = async (e: PointerEvent) => {
-        e.stopPropagation();
+    onCloseClick = async (e: PointerEvent) => {
         if (e.button === 0) {
             const recent = Cast(CurrentUserUtils.UserDocument.recentlyClosed, Doc) as Doc;
             const selected = SelectionManager.SelectedDocuments().slice();
@@ -230,37 +179,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
                 dv.props.removeDocument && dv.props.removeDocument(dv.props.Document);
             });
-            document.removeEventListener("pointermove", this.onCloseMove);
-            document.removeEventListener("pointerup", this.onCloseUp);
         }
     }
     @action
     onMinimizeDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        if (e.button === 0) {
-            document.removeEventListener("pointermove", this.onMinimizeMove);
-            document.addEventListener("pointermove", this.onMinimizeMove);
-            document.removeEventListener("pointerup", this.onMinimizeUp);
-            document.addEventListener("pointerup", this.onMinimizeUp);
-        }
-    }
-
-    @action
-    onMinimizeMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        if (Math.abs(e.pageX - this._downX) > Utils.DRAG_THRESHOLD ||
-            Math.abs(e.pageY - this._downY) > Utils.DRAG_THRESHOLD) {
-            document.removeEventListener("pointermove", this.onMinimizeMove);
-            document.removeEventListener("pointerup", this.onMinimizeUp);
-        }
+        setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onMinimizeClick);
     }
     @undoBatch
     @action
-    onMinimizeUp = (e: PointerEvent): void => {
-        e.stopPropagation();
+    onMinimizeClick = (e: PointerEvent): void => {
         if (e.button === 0) {
-            document.removeEventListener("pointermove", this.onMinimizeMove);
-            document.removeEventListener("pointerup", this.onMinimizeUp);
             const selectedDocs = SelectionManager.SelectedDocuments().map(sd => sd);
             selectedDocs.map(dv => {
                 const layoutKey = Cast(dv.props.Document.layoutKey, "string", null);
@@ -280,106 +208,68 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
 
     @action
     onRadiusDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
+        setupMoveUpEvents(this, e, this.onRadiusMove, (e) => this._resizeUndo?.end(), (e) => { });
         if (e.button === 0) {
-            this._radiusDown = [e.clientX, e.clientY];
-            this._isPointerDown = true;
             this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
-            document.removeEventListener("pointermove", this.onRadiusMove);
-            document.removeEventListener("pointerup", this.onRadiusUp);
-            document.addEventListener("pointermove", this.onRadiusMove);
-            document.addEventListener("pointerup", this.onRadiusUp);
         }
     }
 
-    onRadiusMove = (e: PointerEvent): void => {
-        let dist = Math.sqrt((e.clientX - this._radiusDown[0]) * (e.clientX - this._radiusDown[0]) + (e.clientY - this._radiusDown[1]) * (e.clientY - this._radiusDown[1]));
+    onRadiusMove = (e: PointerEvent, down: number[]): boolean => {
+        let dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
         dist = dist < 3 ? 0 : dist;
-        SelectionManager.SelectedDocuments().map(dv => dv.props.Document.layout instanceof Doc ? dv.props.Document.layout : dv.props.Document.isTemplateForField ? dv.props.Document : Doc.GetProto(dv.props.Document)).
+        SelectionManager.SelectedDocuments().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
             map(d => d.borderRounding = `${Math.min(100, dist)}%`);
-        e.stopPropagation();
-        e.preventDefault();
+        return false;
     }
 
-    onRadiusUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = false;
-        this._resizeUndo && this._resizeUndo.end();
-        document.removeEventListener("pointermove", this.onRadiusMove);
-        document.removeEventListener("pointerup", this.onRadiusUp);
-    }
-
-    _lastX = 0;
-    _lastY = 0;
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
+        setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { });
         if (e.button === 0) {
-            this._lastX = e.clientX;
-            this._lastY = e.clientY;
-            this._isPointerDown = true;
-            this._resizing = e.currentTarget.id;
+            this._resizeHdlId = e.currentTarget.id;
             this.Interacting = true;
             this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointerup", this.onPointerUp);
         }
     }
 
-
-    onPointerMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!this._isPointerDown) {
-            return;
-        }
-
+    onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
         let dX = 0, dY = 0, dW = 0, dH = 0;
 
-        const moveX = e.clientX - this._lastX; // e.movementX;
-        const moveY = e.clientY - this._lastY; // e.movementY;
-        this._lastX = e.clientX;
-        this._lastY = e.clientY;
-
-        switch (this._resizing) {
-            case "":
-                break;
+        switch (this._resizeHdlId) {
+            case "": break;
             case "documentDecorations-topLeftResizer":
                 dX = -1;
                 dY = -1;
-                dW = -moveX;
-                dH = -moveY;
+                dW = -move[0];
+                dH = -move[1];
                 break;
             case "documentDecorations-topRightResizer":
-                dW = moveX;
+                dW = move[0];
                 dY = -1;
-                dH = -moveY;
+                dH = -move[1];
                 break;
             case "documentDecorations-topResizer":
                 dY = -1;
-                dH = -moveY;
+                dH = -move[1];
                 break;
             case "documentDecorations-bottomLeftResizer":
                 dX = -1;
-                dW = -moveX;
-                dH = moveY;
+                dW = -move[0];
+                dH = move[1];
                 break;
             case "documentDecorations-bottomRightResizer":
-                dW = moveX;
-                dH = moveY;
+                dW = move[0];
+                dH = move[1];
                 break;
             case "documentDecorations-bottomResizer":
-                dH = moveY;
+                dH = move[1];
                 break;
             case "documentDecorations-leftResizer":
                 dX = -1;
-                dW = -moveX;
+                dW = -move[0];
                 break;
             case "documentDecorations-rightResizer":
-                dW = moveX;
+                dW = move[0];
                 break;
         }
 
@@ -430,20 +320,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 }
             }
         }));
+        return false;
     }
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        this._resizing = "";
+        this._resizeHdlId = "";
         this.Interacting = false;
-        if (e.button === 0) {
-            e.preventDefault();
-            this._isPointerDown = false;
-            this._resizeUndo && this._resizeUndo.end();
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-        }
+        (e.button === 0) && this._resizeUndo?.end();
     }
 
     @computed
@@ -494,7 +378,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         const titleArea = this._edtingTitle ?
             <>
                 <input ref={this._keyinput} className="title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle} style={{ width: "calc(100% - 20px)" }}
-                    onBlur={e => this.titleBlur(true)} onChange={this.titleChanged} onKeyPress={this.titleEntered} />
+                    onBlur={e => this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} />
                 <div className="publishBox" title="make document referenceable by its title"
                     onPointerDown={e => DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument)}>
                     <FontAwesomeIcon size="lg" color={SelectionManager.SelectedDocuments()[0].props.Document.title === SelectionManager.SelectedDocuments()[0].props.Document[Id] ? "green" : undefined} icon="sticky-note"></FontAwesomeIcon>
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index f3d512a97..f3dd7c733 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPalette } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Doc } from "../../../new_fields/Doc";
@@ -16,10 +16,12 @@ import { CompileScript } from "../../util/Scripting";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
-import { anchorPoints, Flyout } from "../DocumentDecorations";
 import { EditableView } from "../EditableView";
 import { CollectionStackingView } from "./CollectionStackingView";
 import "./CollectionStackingView.scss";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 library.add(faPalette);
 
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 87c35679f..2e3467d90 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -18,10 +18,12 @@ import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
-import { anchorPoints, Flyout } from "../DocumentDecorations";
 import { EditableView } from "../EditableView";
 import { CollectionStackingView } from "./CollectionStackingView";
 import "./CollectionStackingView.scss";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 library.add(faPalette);
 
diff --git a/src/client/views/document_templates/image_card/ImageCard.tsx b/src/client/views/document_templates/image_card/ImageCard.tsx
index 868afc423..3ac90ffe7 100644
--- a/src/client/views/document_templates/image_card/ImageCard.tsx
+++ b/src/client/views/document_templates/image_card/ImageCard.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+dimport * as React from 'react';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { ImageBox } from '../../nodes/ImageBox';
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3447f0380..4efaef408 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -249,7 +249,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    onClick = undoBatch((e: React.MouseEvent | React.PointerEvent) => {
+    onClick = (e: React.MouseEvent | React.PointerEvent) => {
         if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             e.stopPropagation();
@@ -259,24 +259,24 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 if (StrCast(fullScreenAlias.layoutKey) !== "layout_fullScreen" && fullScreenAlias.layout_fullScreen) {
                     fullScreenAlias.layoutKey = "layout_fullScreen";
                 }
-                this.props.addDocTab(fullScreenAlias, undefined, "inTab");
+                UndoManager.RunInBatch(() => this.props.addDocTab(fullScreenAlias, undefined, "inTab"), "double tap");
                 SelectionManager.DeselectAll();
                 Doc.UnBrushDoc(this.props.Document);
             } else if (this.onClickHandler && this.onClickHandler.script) {
                 SelectionManager.DeselectAll();
-                this.onClickHandler.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, containingCollection: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log);
+                UndoManager.RunInBatch(() => this.onClickHandler!.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, containingCollection: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log), "on click");
             } else if (this.Document.type === DocumentType.BUTTON) {
-                ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY);
+                UndoManager.RunInBatch(() => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY), "on button click");
             } else if (this.Document.isButton) {
                 SelectionManager.SelectDoc(this, e.ctrlKey); // don't think this should happen if a button action is actually triggered.
-                this.buttonClick(e.altKey, e.ctrlKey);
+                UndoManager.RunInBatch(() => this.buttonClick(e.altKey, e.ctrlKey), "on link button follow");
             } else {
                 SelectionManager.SelectDoc(this, e.ctrlKey);
                 preventDefault = false;
             }
             preventDefault && e.preventDefault();
         }
-    });
+    };
 
     buttonClick = async (altKey: boolean, ctrlKey: boolean) => {
         const linkDocs = DocListCast(this.props.Document.links);