From 34c6f16dd1c4d61987da7c1fd6cbdcb969cac842 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 10:02:30 -0400
Subject: fixed height of tool button panels in MasonryViewFieldRow

---
 src/client/views/collections/CollectionMasonryViewFieldRow.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 1e3bf11de..cc7a9f5ac 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -240,13 +240,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             toggle: this.toggleVisibility,
             color: this.color
         };
+        const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled');
+        const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `;
         return this.collapsed ? (null) :
             <div style={{ position: "relative" }}>
-                {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ?
+                {showChrome ?
                     <div className="collectionStackingView-addDocumentButton"
                         style={{
-                            width: style.columnWidth / style.numGroupColumns,
-                            padding: NumCast(this.props.parent.layoutDoc._yPadding)
+                            //width: style.columnWidth / style.numGroupColumns,
+                            padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`
                         }}>
                         <EditableView {...newEditableViewProps} />
                     </div> : null
@@ -254,7 +256,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                 <div className={`collectionStackingView-masonryGrid`}
                     ref={this._contRef}
                     style={{
-                        padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
+                        padding: stackPad,
                         width: this.props.parent.NodeWidth,
                         gridGap: this.props.parent.gridGap,
                         gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
-- 
cgit v1.2.3-70-g09d2


From d37cf6f8cf007a5b329e072d443e7d2b05b0a01d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 11:17:55 -0400
Subject: fixed comparisonBox to use percents

---
 src/client/documents/Documents.ts         |  3 ++-
 src/client/views/nodes/ComparisonBox.scss |  5 +----
 src/client/views/nodes/ComparisonBox.tsx  | 24 +++++-------------------
 3 files changed, 8 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b4c11a81b..48de203ef 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -110,6 +110,7 @@ export interface DocumentOptions {
     _backgroundColor?: string | ScriptField; // background color for each template layout doc ( overrides backgroundColor )
     color?: string; // foreground color data doc
     _color?: string;  // foreground color for each template layout doc (overrides color)
+    clipWidth?: number; // percent transition from before to after in comparisonBox
     caption?: RichTextField;
     ignoreClick?: boolean;
     lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged
@@ -559,7 +560,7 @@ export namespace Docs {
         }
 
         export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { targetDropAction: "alias", ...options });
+            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, targetDropAction: "alias", ...options });
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}) {
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 3d48d96e2..7849c9976 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -2,7 +2,6 @@
     border-radius: inherit;
     width: 100%;
     height: 100%;
-    background-color: grey;
     position: absolute;
     z-index: 0;
     pointer-events: none;
@@ -17,7 +16,6 @@
         .beforeBox-cont {
             height: 100%;
             overflow: hidden;
-            background-color: rgb(240, 240, 240);
         }
     }
 
@@ -26,7 +24,7 @@
         height: 100%;
         width: 3px;
         display: inline-block;
-        background: gray;
+        background: white;
         cursor: ew-resize;
         .slide-handle {
             position: absolute;
@@ -48,7 +46,6 @@
         height: 100%;
         width: 100%;
         overflow: hidden;
-        background-color: lightgray;
     }
 
     .clear-button {
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 7a4d40db1..d52ba9896 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -34,7 +34,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     private _beforeDropDisposer?: DragManager.DragDropDisposer;
     private _afterDropDisposer?: DragManager.DragDropDisposer;
-    private resizeUpdater: Lambda | undefined;
 
     protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
         if (ele) {
@@ -52,32 +51,19 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         }
     }
 
-    componentWillMount() {
-        this.dataDoc.clipWidth = this.props.PanelWidth() / 2;
-
-        //preserve before/after ratio during resizing
-        this.resizeUpdater = computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) =>
-            this.dataDoc.clipWidth = NumCast(this.dataDoc.clipWidth) / (oldValue || 0) * newValue
-        );
-    }
-
-    componentWillUnmount() {
-        this.resizeUpdater?.();
-    }
-
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
             this._animating = true;
-            this.dataDoc.clipWidth = targetWidth;
+            this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth();
             setTimeout(action(() => this._animating = false), 1000);
         }), false);
     }
 
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth);
+        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth) / 100 * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.dataDoc.clipWidth = width;
+            this.dataDoc.clipWidth = width * 100 / this.props.PanelWidth();
         }
         return false;
     }
@@ -115,7 +101,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                             <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
                         </div>}
                 </div>
-                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "px", transition: this._animating ? "all 1s" : undefined }}>
+                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "%", transition: this._animating ? "all 1s" : undefined }}>
                     {/* wraps around before image and slider bar */}
                     <div
                         className="beforeBox-cont"
@@ -144,7 +130,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     </div>
                 </div>
 
-                <div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 0.5px)` }}>
+                <div className="slide-bar" style={{ left: `calc(${this.dataDoc.clipWidth}% - 0.5px)` }}>
                     <div className="slide-handle" />
                 </div>
             </div >);
-- 
cgit v1.2.3-70-g09d2


From a4d607795e0b252dbef2c175b5a29954aebbfab4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 11:59:31 -0400
Subject: comparison box code simplifications.

---
 src/client/documents/Documents.ts        |  2 +-
 src/client/views/nodes/ComparisonBox.tsx | 90 +++++++++++++-------------------
 2 files changed, 37 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 48de203ef..bdaadd25e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -560,7 +560,7 @@ export namespace Docs {
         }
 
         export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, targetDropAction: "alias", ...options });
+            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, _backgroundColor:"gray", targetDropAction: "alias", ...options });
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}) {
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index d52ba9896..1ed381058 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -2,9 +2,9 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEye } from '@fortawesome/free-regular-svg-icons';
 import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction, Lambda } from 'mobx';
+import { action, computed, observable, runInAction, Lambda, IReactionDisposer } from 'mobx';
 import { observer } from "mobx-react";
-import { Doc } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { createSchema, makeInterface } from '../../../fields/Schema';
 import { NumCast, Cast } from '../../../fields/Types';
@@ -17,6 +17,7 @@ import { ContentFittingDocumentView } from './ContentFittingDocumentView';
 import { undoBatch } from '../../util/UndoManager';
 import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
 import { SnappingManager } from '../../util/SnappingManager';
+import { DocumentViewProps } from './DocumentView';
 
 library.add(faImage, faEye as any, faPaintBrush, faBrain);
 library.add(faFileAudio, faAsterisk);
@@ -32,10 +33,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); }
 
+    @observable _animating = "";
     private _beforeDropDisposer?: DragManager.DragDropDisposer;
     private _afterDropDisposer?: DragManager.DragDropDisposer;
 
-    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
+    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposer: Opt<DragManager.DragDropDisposer>) => {
+        disposer?.();
         if (ele) {
             return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc);
         }
@@ -53,9 +56,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
-            this._animating = true;
+            this._animating = "all 1s";
             this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth();
-            setTimeout(action(() => this._animating = false), 1000);
+            setTimeout(action(() => this._animating = ""), 1000);
         }), false);
     }
 
@@ -75,62 +78,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         delete this.dataDoc[fieldKey];
     }
 
-    @observable _animating = false;
     render() {
-        const beforeDoc = Cast(this.dataDoc.beforeDoc, Doc, null);
-        const afterDoc = Cast(this.dataDoc.afterDoc, Doc, null);
-        const clipWidth = NumCast(this.dataDoc.clipWidth);
+        const clipWidth = NumCast(this.dataDoc.clipWidth) + "%";
+        const childProps: DocumentViewProps = { ...this.props, pointerEvents: false, parentActive: this.props.active };
+        const clearButton = (which: string) => {
+            return <div className={`clear-button ${which}`} onClick={e => this.clearDoc(e, `${which}Doc`)}>
+                <FontAwesomeIcon className={`clear-button ${which}`} icon={faTimes} size="sm" />
+            </div>
+        }
+        const displayDoc = (which: string) => {
+            const whichDoc = Cast(this.dataDoc[`${which}Doc`], Doc, null);
+            return whichDoc ? <>
+                <ContentFittingDocumentView {...childProps} Document={whichDoc} />
+                {clearButton(which)}
+            </> :  // placeholder image if doc is missing
+                <div className="placeholder">
+                    <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
+                </div>
+        }
+
         return (
             <div className={`comparisonBox${this.active() || SnappingManager.GetIsDragging() ? "-interactive" : ""}`}>
-                <div className="afterBox-cont" key={"after"} onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() - 5)}
-                    ref={(ele) => {
-                        this._afterDropDisposer?.();
-                        this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
-                    }}>
-                    {afterDoc ? <>
-                        <ContentFittingDocumentView {...this.props}
-                            Document={afterDoc}
-                            pointerEvents={false}
-                            parentActive={this.props.active}
-                        />
-                        <div className="clear-button after" onClick={e => this.clearDoc(e, "afterDoc")}>
-                            <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
-                        </div>
-                    </> :
-                        <div className="placeholder">
-                            <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
-                        </div>}
+                <div className="afterBox-cont" key={"after"} style={{ width: this.props.PanelWidth() }}
+                    onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() - 5)}
+                    ref={ele => this._afterDropDisposer = this.createDropTarget(ele, "afterDoc", this._afterDropDisposer)} >
+                    {displayDoc("after")}
                 </div>
-                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "%", transition: this._animating ? "all 1s" : undefined }}>
-                    {/* wraps around before image and slider bar */}
-                    <div
-                        className="beforeBox-cont"
-                        key={"before"}
-                        ref={(ele) => {
-                            this._beforeDropDisposer?.();
-                            this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
-                        }}
-                        style={{ width: this.props.PanelWidth() }}>
-                        {
-                            beforeDoc ?
-                                <>
-                                    <ContentFittingDocumentView {...this.props}
-                                        Document={beforeDoc}
-                                        pointerEvents={false}
-                                        parentActive={this.props.active} />
-                                    <div className="clear-button before" onClick={e => this.clearDoc(e, "beforeDoc")}>
-                                        <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
-                                    </div>
-                                </>
-                                :
-                                <div className="placeholder">
-                                    <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
-                                </div>
-                        }
+                <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: "gray" }}>
+                    <div className="beforeBox-cont" key={"before"} style={{ width: this.props.PanelWidth() }}
+                        onPointerDown={e => this.registerSliding(e, 5)}
+                        ref={ele => this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc", this._beforeDropDisposer)} >
+                        {displayDoc("before")}
                     </div>
                 </div>
 
-                <div className="slide-bar" style={{ left: `calc(${this.dataDoc.clipWidth}% - 0.5px)` }}>
+                <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}>
                     <div className="slide-handle" />
                 </div>
             </div >);
-- 
cgit v1.2.3-70-g09d2


From 8a2abbcc51e42dd48f0b510b9f5790cb44450e48 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 12:06:38 -0400
Subject: fixed backgroundcolor of comparisonbox

---
 src/client/views/nodes/ComparisonBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 1ed381058..a14e39bd6 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import { Doc, Opt } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { createSchema, makeInterface } from '../../../fields/Schema';
-import { NumCast, Cast } from '../../../fields/Types';
+import { NumCast, Cast, StrCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
@@ -104,7 +104,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     ref={ele => this._afterDropDisposer = this.createDropTarget(ele, "afterDoc", this._afterDropDisposer)} >
                     {displayDoc("after")}
                 </div>
-                <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: "gray" }}>
+                <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, "gray") }}>
                     <div className="beforeBox-cont" key={"before"} style={{ width: this.props.PanelWidth() }}
                         onPointerDown={e => this.registerSliding(e, 5)}
                         ref={ele => this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc", this._beforeDropDisposer)} >
-- 
cgit v1.2.3-70-g09d2


From c5a14d8e29e7c5cd4e18d7f4175e5d3938dacde7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 13:56:00 -0400
Subject: fixed pres box progressivize to force progressivization

---
 src/client/views/presentationview/PresElementBox.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index a2a6882b9..f364b40fd 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -100,13 +100,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.stopPropagation();
         this.rootDoc.presProgressivize = !this.rootDoc.presProgressivize;
         const rootTarget = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]);
         if (this.rootDoc.presProgressivize && !rootTarget?.lastTimecode) {
-            const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]);
             rootTarget.currentTimecode = 0;
             CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, this.presBox);
             docs.forEach((d, i) => numberRange(docs.length - i).forEach(f => Cast(d["opacity-indexed"], listSpec("number"), [])[f + i] = 1));
             rootTarget.lastTimecode = docs.length - 1;
         }
+        docs.forEach((d, i) => i && numberRange(i).forEach(f => Cast(d["opacity-indexed"], listSpec("number"), [])[f] = 0));
     }
 
     /**
@@ -216,7 +217,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <strong className="presElementBox-name">
                         {`${this.indexInPres + 1}. ${this.targetDoc?.title}`}
                     </strong>
-                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument?.(this.rootDoc)}>X</button>
+                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => {
+                        this.props.removeDocument?.(this.rootDoc);
+                        e.stopPropagation();
+                    }}>X</button>
                     <br />
                 </>}
                 <div className="presElementBox-buttons">
-- 
cgit v1.2.3-70-g09d2


From a3506d7a8964a113f10bdce672a86678b992b653 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 19:25:56 -0400
Subject: more fixes to progressivizing.   tweaks to comparison box's clear
 button.

---
 package-lock.json                                  | 372 ++++++++++++++++++++-
 package.json                                       |   1 +
 src/client/views/MainView.tsx                      |   4 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   3 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  15 +-
 src/client/views/nodes/ComparisonBox.tsx           |  44 +--
 .../views/presentationview/PresElementBox.tsx      |   1 -
 7 files changed, 400 insertions(+), 40 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 2e83c295c..21e4c4e27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -356,6 +356,19 @@
             "integrity": "sha512-bWBbC7VG2jdjbgZMX0qpds8U/3h3anfIqE81L8jmVrgFZw/urEDnBA78ymGGKTTK6ciBXmmJ/xlok+Re41S8ww==",
             "dev": true
         },
+        "@types/babel-types": {
+            "version": "7.0.7",
+            "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.7.tgz",
+            "integrity": "sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ=="
+        },
+        "@types/babylon": {
+            "version": "6.16.5",
+            "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.5.tgz",
+            "integrity": "sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==",
+            "requires": {
+                "@types/babel-types": "*"
+            }
+        },
         "@types/bcrypt-nodejs": {
             "version": "0.0.30",
             "resolved": "https://registry.npmjs.org/@types/bcrypt-nodejs/-/bcrypt-nodejs-0.0.30.tgz",
@@ -1388,6 +1401,26 @@
                 "negotiator": "0.6.2"
             }
         },
+        "acorn": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+            "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+        },
+        "acorn-globals": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
+            "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
+            "requires": {
+                "acorn": "^4.0.4"
+            },
+            "dependencies": {
+                "acorn": {
+                    "version": "4.0.13",
+                    "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+                    "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
+                }
+            }
+        },
         "acorn-jsx": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
@@ -1448,6 +1481,31 @@
             "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
             "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
         },
+        "align-text": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+            "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+            "requires": {
+                "kind-of": "^3.0.2",
+                "longest": "^1.0.1",
+                "repeat-string": "^1.5.2"
+            },
+            "dependencies": {
+                "is-buffer": {
+                    "version": "1.1.6",
+                    "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+                    "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+                },
+                "kind-of": {
+                    "version": "3.2.2",
+                    "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "requires": {
+                        "is-buffer": "^1.1.5"
+                    }
+                }
+            }
+        },
         "amdefine": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -1985,6 +2043,29 @@
                 }
             }
         },
+        "babel-types": {
+            "version": "6.26.0",
+            "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+            "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+            "requires": {
+                "babel-runtime": "^6.26.0",
+                "esutils": "^2.0.2",
+                "lodash": "^4.17.4",
+                "to-fast-properties": "^1.0.3"
+            },
+            "dependencies": {
+                "to-fast-properties": {
+                    "version": "1.0.3",
+                    "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+                    "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+                }
+            }
+        },
+        "babylon": {
+            "version": "6.18.0",
+            "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+            "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+        },
         "backo2": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -2599,6 +2680,15 @@
             "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
             "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
         },
+        "center-align": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+            "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+            "requires": {
+                "align-text": "^0.1.3",
+                "lazy-cache": "^1.0.3"
+            }
+        },
         "chai": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz",
@@ -2622,6 +2712,14 @@
                 "supports-color": "^5.3.0"
             }
         },
+        "character-parser": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+            "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+            "requires": {
+                "is-regex": "^1.0.3"
+            }
+        },
         "check-error": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
@@ -3210,6 +3308,21 @@
             "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
             "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
         },
+        "clean-css": {
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+            "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
+            "requires": {
+                "source-map": "~0.6.0"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "cli-boxes": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
@@ -3581,6 +3694,17 @@
             "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
             "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
+        "constantinople": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
+            "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
+            "requires": {
+                "@types/babel-types": "^7.0.0",
+                "@types/babylon": "^6.16.2",
+                "babel-types": "^6.26.0",
+                "babylon": "^6.18.0"
+            }
+        },
         "constants-browserify": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -4635,6 +4759,11 @@
                 "buffer-indexof": "^1.0.0"
             }
         },
+        "doctypes": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+            "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
+        },
         "dom-helpers": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
@@ -5079,8 +5208,7 @@
         "esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-            "dev": true
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
         },
         "etag": {
             "version": "1.8.1",
@@ -7173,6 +7301,22 @@
             "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
             "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
         },
+        "is-expression": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
+            "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
+            "requires": {
+                "acorn": "~4.0.2",
+                "object-assign": "^4.0.1"
+            },
+            "dependencies": {
+                "acorn": {
+                    "version": "4.0.13",
+                    "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+                    "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
+                }
+            }
+        },
         "is-extendable": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
@@ -7288,6 +7432,11 @@
                 "isobject": "^3.0.1"
             }
         },
+        "is-promise": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+            "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+        },
         "is-redirect": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
@@ -7393,6 +7542,11 @@
             "resolved": "https://registry.npmjs.org/js-datepicker/-/js-datepicker-4.6.6.tgz",
             "integrity": "sha512-kLsE2oHfQM6pzdWNA7Y8HwCHaZIVURItPds7YVJnbe1z1OmQFzN7lfg6yFbDDWOyNjdHZGzWDy3jSDN2W0pNZQ=="
         },
+        "js-stringify": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+            "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7552,6 +7706,15 @@
                 "verror": "1.10.0"
             }
         },
+        "jstransformer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+            "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+            "requires": {
+                "is-promise": "^2.0.0",
+                "promise": "^7.0.1"
+            }
+        },
         "jwa": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -7611,6 +7774,11 @@
                 "package-json": "^4.0.0"
             }
         },
+        "lazy-cache": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+            "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
+        },
         "lazystream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
@@ -7829,6 +7997,11 @@
                 "object.assign": "^4.1.0"
             }
         },
+        "longest": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+            "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc="
+        },
         "loose-envify": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -13423,6 +13596,120 @@
                 "safe-buffer": "^5.1.2"
             }
         },
+        "pug": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.4.tgz",
+            "integrity": "sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==",
+            "requires": {
+                "pug-code-gen": "^2.0.2",
+                "pug-filters": "^3.1.1",
+                "pug-lexer": "^4.1.0",
+                "pug-linker": "^3.0.6",
+                "pug-load": "^2.0.12",
+                "pug-parser": "^5.0.1",
+                "pug-runtime": "^2.0.5",
+                "pug-strip-comments": "^1.0.4"
+            }
+        },
+        "pug-attrs": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.4.tgz",
+            "integrity": "sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==",
+            "requires": {
+                "constantinople": "^3.0.1",
+                "js-stringify": "^1.0.1",
+                "pug-runtime": "^2.0.5"
+            }
+        },
+        "pug-code-gen": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.2.tgz",
+            "integrity": "sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==",
+            "requires": {
+                "constantinople": "^3.1.2",
+                "doctypes": "^1.1.0",
+                "js-stringify": "^1.0.1",
+                "pug-attrs": "^2.0.4",
+                "pug-error": "^1.3.3",
+                "pug-runtime": "^2.0.5",
+                "void-elements": "^2.0.1",
+                "with": "^5.0.0"
+            }
+        },
+        "pug-error": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.3.tgz",
+            "integrity": "sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ=="
+        },
+        "pug-filters": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.1.tgz",
+            "integrity": "sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==",
+            "requires": {
+                "clean-css": "^4.1.11",
+                "constantinople": "^3.0.1",
+                "jstransformer": "1.0.0",
+                "pug-error": "^1.3.3",
+                "pug-walk": "^1.1.8",
+                "resolve": "^1.1.6",
+                "uglify-js": "^2.6.1"
+            }
+        },
+        "pug-lexer": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.1.0.tgz",
+            "integrity": "sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==",
+            "requires": {
+                "character-parser": "^2.1.1",
+                "is-expression": "^3.0.0",
+                "pug-error": "^1.3.3"
+            }
+        },
+        "pug-linker": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.6.tgz",
+            "integrity": "sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==",
+            "requires": {
+                "pug-error": "^1.3.3",
+                "pug-walk": "^1.1.8"
+            }
+        },
+        "pug-load": {
+            "version": "2.0.12",
+            "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.12.tgz",
+            "integrity": "sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==",
+            "requires": {
+                "object-assign": "^4.1.0",
+                "pug-walk": "^1.1.8"
+            }
+        },
+        "pug-parser": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.1.tgz",
+            "integrity": "sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==",
+            "requires": {
+                "pug-error": "^1.3.3",
+                "token-stream": "0.0.1"
+            }
+        },
+        "pug-runtime": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.5.tgz",
+            "integrity": "sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw=="
+        },
+        "pug-strip-comments": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz",
+            "integrity": "sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==",
+            "requires": {
+                "pug-error": "^1.3.3"
+            }
+        },
+        "pug-walk": {
+            "version": "1.1.8",
+            "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.8.tgz",
+            "integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA=="
+        },
         "pump": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -14170,6 +14457,14 @@
             "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
             "dev": true
         },
+        "right-align": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+            "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+            "requires": {
+                "align-text": "^0.1.1"
+            }
+        },
         "rimraf": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15835,6 +16130,11 @@
             "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
             "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
         },
+        "token-stream": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
+            "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo="
+        },
         "touch": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
@@ -16136,6 +16436,50 @@
             "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
             "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
         },
+        "uglify-js": {
+            "version": "2.8.29",
+            "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+            "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+            "requires": {
+                "source-map": "~0.5.1",
+                "uglify-to-browserify": "~1.0.0",
+                "yargs": "~3.10.0"
+            },
+            "dependencies": {
+                "camelcase": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+                    "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
+                },
+                "cliui": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+                    "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+                    "requires": {
+                        "center-align": "^0.1.1",
+                        "right-align": "^0.1.1",
+                        "wordwrap": "0.0.2"
+                    }
+                },
+                "yargs": {
+                    "version": "3.10.0",
+                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+                    "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+                    "requires": {
+                        "camelcase": "^1.0.2",
+                        "cliui": "^2.1.0",
+                        "decamelize": "^1.0.0",
+                        "window-size": "0.1.0"
+                    }
+                }
+            }
+        },
+        "uglify-to-browserify": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+            "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+            "optional": true
+        },
         "uid-safe": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
@@ -16473,6 +16817,11 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
             "dev": true
         },
+        "void-elements": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+            "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+        },
         "vue-template-compiler": {
             "version": "2.6.11",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
@@ -17330,6 +17679,20 @@
                 "infobox-parser": "3.3.1"
             }
         },
+        "window-size": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+            "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0="
+        },
+        "with": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
+            "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
+            "requires": {
+                "acorn": "^3.1.0",
+                "acorn-globals": "^3.0.0"
+            }
+        },
         "word-wrap": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -17346,6 +17709,11 @@
                 "its-set": "^1.1.5"
             }
         },
+        "wordwrap": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+            "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
+        },
         "wordwrapjs": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1a92656bf..ca82d523d 100644
--- a/package.json
+++ b/package.json
@@ -192,6 +192,7 @@
         "prosemirror-state": "^1.3.2",
         "prosemirror-transform": "^1.2.3",
         "prosemirror-view": "^1.13.8",
+        "pug": "^2.0.4",
         "puppeteer": "^3.1.0",
         "query-string": "^6.10.1",
         "raw-loader": "^1.0.0",
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8841f7307..b7a75dfb9 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,7 @@ import {
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo
+    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -118,7 +118,7 @@ export class MainView extends React.Component {
             faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
             faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
-            faThumbtack, faTree, faTv, faUndoAlt, faVideo);
+            faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 972c09484..9d880d294 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -207,7 +207,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                             const d = droppedDocs[i];
                             const layoutDoc = Doc.Layout(d);
                             if (this.Document.currentTimecode !== undefined && !this.props.isAnnotationOverlay) {
-                                CollectionFreeFormDocumentView.setValues(this.Document.currentTimecode, d, x + NumCast(d.x) - dropX, y + NumCast(d.y) - dropY, Cast(d.opacity, "number", null));
+                                const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.displayTimecode, 1000));
+                                CollectionFreeFormDocumentView.setValues(this.Document.currentTimecode, d, x + vals.x - dropX, y + vals.y - dropY, vals.opacity);
                             } else {
                                 d.x = x + NumCast(d.x) - dropX;
                                 d.y = y + NumCast(d.y) - dropY;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 57f484214..a4120f958 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -100,13 +100,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
 
     public static setupKeyframes(docs: Doc[], timecode: number, collection: Doc) {
-        docs.forEach(doc => {
-            doc["x-indexed"] = new List<number>(numberRange(timecode).map(i => undefined) as any as number[]);
-            doc["y-indexed"] = new List<number>(numberRange(timecode).map(i => undefined) as any as number[]);
-            doc["opacity-indexed"] = new List<number>(numberRange(timecode).map(i => 0));
-            (doc["x-indexed"] as any).push(NumCast(doc.x));
-            (doc["y-indexed"] as any).push(NumCast(doc.y));
-            (doc["opacity-indexed"] as any).push(NumCast(doc.opacity, 1));
+        docs.forEach((doc, i) => {
+            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[]);
+            xlist[Math.max(i - 1)] = xlist[timecode + 1] = NumCast(doc.x);
+            ylist[Math.max(i - 1)] = ylist[timecode + 1] = NumCast(doc.y);
+            doc["x-indexed"] = xlist;
+            doc["y-indexed"] = ylist;
+            doc["opacity-indexed"] = new List<number>(numberRange(timecode).map(i => 1));
             doc.displayTimecode = ComputedField.MakeFunction("collection ? collection.currentTimecode : 0", {}, { collection });
             doc.x = ComputedField.MakeInterpolated("x", "displayTimecode");
             doc.y = ComputedField.MakeInterpolated("y", "displayTimecode");
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index a14e39bd6..d61934380 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,6 +1,3 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEye } from '@fortawesome/free-regular-svg-icons';
-import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, runInAction, Lambda, IReactionDisposer } from 'mobx';
 import { observer } from "mobx-react";
@@ -19,9 +16,6 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
 import { SnappingManager } from '../../util/SnappingManager';
 import { DocumentViewProps } from './DocumentView';
 
-library.add(faImage, faEye as any, faPaintBrush, faBrain);
-library.add(faFileAudio, faAsterisk);
-
 export const comparisonSchema = createSchema({});
 
 type ComparisonDocument = makeInterface<[typeof comparisonSchema, typeof documentSchema]>;
@@ -29,18 +23,16 @@ const ComparisonDocument = makeInterface(comparisonSchema, documentSchema);
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, ComparisonDocument>(ComparisonDocument) {
-    protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
-
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); }
+    protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
+    private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined];
 
     @observable _animating = "";
-    private _beforeDropDisposer?: DragManager.DragDropDisposer;
-    private _afterDropDisposer?: DragManager.DragDropDisposer;
 
-    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposer: Opt<DragManager.DragDropDisposer>) => {
-        disposer?.();
+    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => {
+        this._disposers[disposerId]?.();
         if (ele) {
-            return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc);
+            this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.dropHandler(e, dropEvent, fieldKey), this.layoutDoc);
         }
     }
 
@@ -74,7 +66,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
     @undoBatch
     clearDoc = (e: React.MouseEvent, fieldKey: string) => {
         e.stopPropagation;
-        e.preventDefault;
         delete this.dataDoc[fieldKey];
     }
 
@@ -82,8 +73,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const clipWidth = NumCast(this.dataDoc.clipWidth) + "%";
         const childProps: DocumentViewProps = { ...this.props, pointerEvents: false, parentActive: this.props.active };
         const clearButton = (which: string) => {
-            return <div className={`clear-button ${which}`} onClick={e => this.clearDoc(e, `${which}Doc`)}>
-                <FontAwesomeIcon className={`clear-button ${which}`} icon={faTimes} size="sm" />
+            return <div className={`clear-button ${which}`} onPointerDown={e => e.stopPropagation()} onClick={e => this.clearDoc(e, `${which}Doc`)}>
+                <FontAwesomeIcon className={`clear-button ${which}`} icon={"times"} size="sm" />
             </div>
         }
         const displayDoc = (which: string) => {
@@ -93,23 +84,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                 {clearButton(which)}
             </> :  // placeholder image if doc is missing
                 <div className="placeholder">
-                    <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
+                    <FontAwesomeIcon className="upload-icon" icon={"cloud-upload-alt"} size="lg" />
                 </div>
         }
+        const displayBox = (which: string, index: number, cover: number) => {
+            return <div className={`${which}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }}
+                onPointerDown={e => this.registerSliding(e, cover)}
+                ref={ele => this.createDropTarget(ele, `${which}Doc`, index)} >
+                {displayDoc(which)}
+            </div>;
+        }
 
         return (
             <div className={`comparisonBox${this.active() || SnappingManager.GetIsDragging() ? "-interactive" : ""}`}>
-                <div className="afterBox-cont" key={"after"} style={{ width: this.props.PanelWidth() }}
-                    onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() - 5)}
-                    ref={ele => this._afterDropDisposer = this.createDropTarget(ele, "afterDoc", this._afterDropDisposer)} >
-                    {displayDoc("after")}
-                </div>
+                {displayBox("after", 1, this.props.PanelWidth() - 5)}
                 <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, "gray") }}>
-                    <div className="beforeBox-cont" key={"before"} style={{ width: this.props.PanelWidth() }}
-                        onPointerDown={e => this.registerSliding(e, 5)}
-                        ref={ele => this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc", this._beforeDropDisposer)} >
-                        {displayDoc("before")}
-                    </div>
+                    {displayBox("before", 0, 5)}
                 </div>
 
                 <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index f364b40fd..526a3dbf4 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -104,7 +104,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         if (this.rootDoc.presProgressivize && !rootTarget?.lastTimecode) {
             rootTarget.currentTimecode = 0;
             CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, this.presBox);
-            docs.forEach((d, i) => numberRange(docs.length - i).forEach(f => Cast(d["opacity-indexed"], listSpec("number"), [])[f + i] = 1));
             rootTarget.lastTimecode = docs.length - 1;
         }
         docs.forEach((d, i) => i && numberRange(i).forEach(f => Cast(d["opacity-indexed"], listSpec("number"), [])[f] = 0));
-- 
cgit v1.2.3-70-g09d2


From bf37e95b030b2e444078846681e327674c32312b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 May 2020 19:53:28 -0400
Subject: changed _clipWidth to a layoutField

---
 src/client/documents/Documents.ts        | 4 ++--
 src/client/views/nodes/ComparisonBox.tsx | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index bdaadd25e..6b17b4303 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -110,7 +110,7 @@ export interface DocumentOptions {
     _backgroundColor?: string | ScriptField; // background color for each template layout doc ( overrides backgroundColor )
     color?: string; // foreground color data doc
     _color?: string;  // foreground color for each template layout doc (overrides color)
-    clipWidth?: number; // percent transition from before to after in comparisonBox
+    _clipWidth?: number; // percent transition from before to after in comparisonBox
     caption?: RichTextField;
     ignoreClick?: boolean;
     lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged
@@ -560,7 +560,7 @@ export namespace Docs {
         }
 
         export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, _backgroundColor:"gray", targetDropAction: "alias", ...options });
+            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { _clipWidth: 50, _backgroundColor: "gray", targetDropAction: "alias", ...options });
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}) {
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index d61934380..f79fe6e78 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -42,23 +42,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
         if (droppedDocs?.length) {
             this.dataDoc[fieldKey] = droppedDocs[0];
-            droppedDocs[0].isBackgound = true;
         }
     }
 
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
             this._animating = "all 1s";
-            this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth();
+            this.layoutDoc._clipWidth = targetWidth * 100 / this.props.PanelWidth();
             setTimeout(action(() => this._animating = ""), 1000);
         }), false);
     }
 
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth) / 100 * this.props.PanelWidth();
+        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.layoutDoc._clipWidth) / 100 * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.dataDoc.clipWidth = width * 100 / this.props.PanelWidth();
+            this.layoutDoc._clipWidth = width * 100 / this.props.PanelWidth();
         }
         return false;
     }
@@ -70,7 +69,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
     }
 
     render() {
-        const clipWidth = NumCast(this.dataDoc.clipWidth) + "%";
+        const clipWidth = NumCast(this.layoutDoc._clipWidth) + "%";
         const childProps: DocumentViewProps = { ...this.props, pointerEvents: false, parentActive: this.props.active };
         const clearButton = (which: string) => {
             return <div className={`clear-button ${which}`} onPointerDown={e => e.stopPropagation()} onClick={e => this.clearDoc(e, `${which}Doc`)}>
-- 
cgit v1.2.3-70-g09d2


From 85c052837d21eb48b3a4f1fa7c95db6703b217d1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 22 May 2020 00:59:42 -0400
Subject: got rid of renderLock for piles.  fixed drag/drop on piles to place
 things correctly.  made piles store their layoutEngine as a field.  fixed
 layout  of piled docs.

---
 .../views/collections/CollectionPileView.scss      |  3 ++
 .../views/collections/CollectionPileView.tsx       | 59 ++++++++++++----------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 +-
 src/client/views/nodes/DocumentView.tsx            | 16 ++++--
 src/fields/Doc.ts                                  | 44 ++++++++--------
 5 files changed, 70 insertions(+), 54 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionPileView.scss b/src/client/views/collections/CollectionPileView.scss
index ac874b663..48d07e42b 100644
--- a/src/client/views/collections/CollectionPileView.scss
+++ b/src/client/views/collections/CollectionPileView.scss
@@ -5,4 +5,7 @@
     height: 100%;
     width: 100%;
     overflow: visible;
+    .collectionPileView-innards {
+        width:100%;
+    }
 }
diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index e3bcf2a21..020a87b2e 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -1,18 +1,17 @@
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { HeightSym, Opt, WidthSym } from "../../../fields/Doc";
+import { HeightSym, Opt, WidthSym, Doc } from "../../../fields/Doc";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, NumCast, StrCast } from "../../../fields/Types";
-import { ContextMenu } from "../ContextMenu";
-import { ContextMenuProps } from "../ContextMenuItem";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionPileView.scss";
 import React = require("react");
 import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
-import { UndoManager } from "../../util/UndoManager";
+import { UndoManager, undoBatch } from "../../util/UndoManager";
 import { SnappingManager } from "../../util/SnappingManager";
+import { DragManager } from "../../util/DragManager";
 
 @observer
 export class CollectionPileView extends CollectionSubView(doc => doc) {
@@ -20,10 +19,12 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
     _doubleTap: boolean | undefined = false;
     _originalChrome: string = "";
     @observable _contentsActive = true;
-    @observable _layoutEngine = "pass";
     @observable _collapsed: boolean = false;
     @observable _childClickedScript: Opt<ScriptField>;
     componentDidMount() {
+        if (this.layoutEngine() !== "pass" && this.layoutEngine() !== "starburst") {
+            this.Document._layoutEngine = "pass";
+        }
         this._originalChrome = StrCast(this.layoutDoc._chromeStatus);
         this.layoutDoc._chromeStatus = "disabled";
         this.layoutDoc.hideFilterView = true;
@@ -33,49 +34,54 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
         this.layoutDoc._chromeStatus = this._originalChrome;
     }
 
-    layoutEngine = () => this._layoutEngine;
+    layoutEngine = () => StrCast(this.Document._layoutEngine);
 
     @computed get contents() {
-        return <div className="collectionPileView-innards" style={{
-            width: "100%",
-            pointerEvents: this.layoutEngine() !== "pass" && (this.props.active() || this.layoutEngine() === "starburst") ? undefined : "none"
-        }} >
+        return <div className="collectionPileView-innards" style={{ pointerEvents: this.layoutEngine() === "starburst" ? undefined : "none" }} >
             <CollectionFreeFormView {...this.props} layoutEngine={this.layoutEngine} />
         </div>;
     }
-
-    specificMenu = (e: React.MouseEvent) => {
-        const layoutItems: ContextMenuProps[] = [];
-        const doc = this.props.Document;
-
-        ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "eye" });
-    }
-
     toggleStarburst = action(() => {
-        if (this._layoutEngine === 'starburst') {
+        if (this.layoutEngine() === 'starburst') {
             const defaultSize = 110;
             this.layoutDoc._overflow = undefined;
+            this.childDocs.forEach(d => Doc.iconify(d));
             this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - NumCast(this.layoutDoc._starburstPileWidth, defaultSize) / 2;
             this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - NumCast(this.layoutDoc._starburstPileHeight, defaultSize) / 2;
             this.layoutDoc._width = NumCast(this.layoutDoc._starburstPileWidth, defaultSize);
             this.layoutDoc._height = NumCast(this.layoutDoc._starburstPileHeight, defaultSize);
-            this._layoutEngine = 'pass';
+            Doc.pileup(this.childDocs);
+            this.layoutDoc._panX = 0;
+            this.layoutDoc._panY = -10;
+            this.props.Document._layoutEngine = 'pass';
         } else {
             const defaultSize = 25;
             this.layoutDoc._overflow = 'visible';
             !this.layoutDoc._starburstRadius && (this.layoutDoc._starburstRadius = 500);
             !this.layoutDoc._starburstDocScale && (this.layoutDoc._starburstDocScale = 2.5);
-            if (this._layoutEngine === 'pass') {
+            if (this.layoutEngine() === 'pass') {
                 this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - defaultSize / 2;
                 this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - defaultSize / 2;
                 this.layoutDoc._starburstPileWidth = this.layoutDoc[WidthSym]();
                 this.layoutDoc._starburstPileHeight = this.layoutDoc[HeightSym]();
             }
+            this.layoutDoc._panX = this.layoutDoc._panY = 0;
             this.layoutDoc._width = this.layoutDoc._height = defaultSize;
-            this._layoutEngine = 'starburst';
+            this.props.Document._layoutEngine = 'starburst';
         }
     });
 
+    @undoBatch
+    @action
+    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        if (super.onInternalDrop(e, de)) {
+            if (de.complete.docDragData) {
+                Doc.pileup(this.childDocs);
+            }
+        }
+        return true;
+    }
+
     _undoBatch: UndoManager.Batch | undefined;
     pointerDown = (e: React.PointerEvent) => {
         let dist = 0;
@@ -107,20 +113,17 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
     }
 
     onClick = (e: React.MouseEvent) => {
-        if (e.button === 0 && (this._doubleTap || this.layoutEngine() === "starburst")) {
+        if (e.button === 0 && this._doubleTap) {
             SelectionManager.DeselectAll();
             this.toggleStarburst();
             e.stopPropagation();
         }
-        // else if (this.layoutEngine() === "pass") {
-        //     runInAction(() => this._contentsActive = false);
-        //     setTimeout(action(() => this._contentsActive = true), 300);
-        // }
     }
 
     render() {
 
-        return <div className={"collectionPileView"} onContextMenu={this.specificMenu} onClick={this.onClick} onPointerDown={this.pointerDown}
+        return <div className={"collectionPileView"} onClick={this.onClick} onPointerDown={this.pointerDown}
+            ref={this.createDashEventsTarget}
             style={{ width: this.props.PanelWidth(), height: `calc(100%  - ${this.props.Document._chromeStatus === "enabled" ? 51 : 0}px)` }}>
             {this.contents}
         </div>;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9d880d294..1611b6935 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1363,7 +1363,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ?
                 this.placeholder : this.marqueeView}
             <CollectionFreeFormOverlayView elements={this.elementFunc} />
-            {this.isAnnotationOverlay || !this.props.isSelected() ? (null) :
+            {this.isAnnotationOverlay || !this.props.isSelected() || this.props.Document._viewType === CollectionViewType.Pile ? (null) :
                 <>
                     <div key="back" className="backKeyframe" onClick={this.prevKeyframe}>
                         <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 993cabc36..00d19752f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1111,6 +1111,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }), 400);
     });
 
+    renderLock() {
+        return (this.Document.isBackground !== undefined || this.isSelected(false)) &&
+            ((this.Document.type === DocumentType.COL && this.Document._viewType !== CollectionViewType.Pile) || this.Document.type === DocumentType.IMG) &&
+            this.props.renderDepth > 0 && this.props.PanelWidth() > 0 ?
+            <div className="documentView-lock" onClick={() => this.toggleBackground(true)}>
+                <FontAwesomeIcon icon={this.Document.isBackground ? "unlock" : "lock"} style={{ color: this.Document.isBackground ? "red" : undefined }} size="lg" />
+            </div>
+            : (null);
+    }
+
     render() {
         if (!(this.props.Document instanceof Doc)) return (null);
         const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document);
@@ -1161,11 +1171,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 <div className="documentView-contentBlocker" />
             </> :
                 this.innards}
-            {(this.Document.isBackground !== undefined || this.isSelected(false)) && (this.Document.type === DocumentType.COL || this.Document.type === DocumentType.IMG) && this.props.renderDepth > 0 && this.props.PanelWidth() > 0 ?
-                <div className="documentView-lock" onClick={() => this.toggleBackground(true)}>
-                    <FontAwesomeIcon icon={this.Document.isBackground ? "unlock" : "lock"} style={{ color: this.Document.isBackground ? "red" : undefined }} size="lg" />
-                </div>
-                : (null)}
+            {this.renderLock()}
         </div>;
         { this._showKPQuery ? <KeyphraseQueryView keyphrases={this._queries}></KeyphraseQueryView> : undefined; }
     }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 9f38f4369..1ea686cbb 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1028,28 +1028,32 @@ export namespace Doc {
         if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") doc.deiconifyLayout = layoutKey.replace("layout_", "");
     }
 
-    export function pileup(selected: Doc[], x: number, y: number) {
-        const newCollection = Docs.Create.PileDocument(selected, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100, _LODdisable: true });
+    export function pileup(docList: Doc[], x?: number, y?: number) {
         let w = 0, h = 0;
-        selected.forEach((d, i) => {
-            Doc.iconify(d);
-            w = Math.max(d[WidthSym](), w);
-            h = Math.max(d[HeightSym](), h);
-        });
-        h = Math.max(h, w * 4 / 3); // converting to an icon does not update the height right away.  so this is a fallback hack to try to do something reasonable
-        selected.forEach((d, i) => {
-            d.x = Math.cos(Math.PI * 2 * i / selected.length) * 10 - w / 2;
-            d.y = Math.sin(Math.PI * 2 * i / selected.length) * 10 - h / 2;
-            d.displayTimecode = undefined;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+        runInAction(() => {
+            docList.forEach(d => {
+                Doc.iconify(d);
+                w = Math.max(d[WidthSym](), w);
+                h = Math.max(d[HeightSym](), h);
+            });
+            h = Math.max(h, w * 4 / 3); // converting to an icon does not update the height right away.  so this is a fallback hack to try to do something reasonable
+            docList.forEach((d, i) => {
+                d.x = Math.cos(Math.PI * 2 * i / docList.length) * 10 - w / 2;
+                d.y = Math.sin(Math.PI * 2 * i / docList.length) * 10 - h / 2;
+                d.displayTimecode = undefined;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+            });
         });
-        newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - 55;
-        newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - 55;
-        newCollection._width = newCollection._height = 110;
-        //newCollection.borderRounding = "40px";
-        newCollection._jitterRotation = 10;
-        newCollection._backgroundColor = "gray";
-        newCollection._overflow = "visible";
-        return newCollection;
+        if (x !== undefined && y !== undefined) {
+            const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100, _LODdisable: true });
+            newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - 55;
+            newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - 55;
+            newCollection._width = newCollection._height = 110;
+            //newCollection.borderRounding = "40px";
+            newCollection._jitterRotation = 10;
+            newCollection._backgroundColor = "gray";
+            newCollection._overflow = "visible";
+            return newCollection;
+        }
     }
 
 
-- 
cgit v1.2.3-70-g09d2


From fdbff9dbb60b4af8f6feba67feda5376263dd7ca Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 22 May 2020 09:41:18 -0400
Subject: fixed images

---
 src/client/views/collections/CollectionSubView.tsx | 2 +-
 src/client/views/nodes/ImageBox.tsx                | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 53acc15c3..a6b0d03b8 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -451,7 +451,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             if (generatedDocuments.length) {
                 const set = generatedDocuments.length > 1 && generatedDocuments.map(d => Doc.iconify(d));
                 if (set) {
-                    addDocument(Doc.pileup(generatedDocuments, options.x!, options.y!));
+                    addDocument(Doc.pileup(generatedDocuments, options.x!, options.y!)!);
                 } else {
                     generatedDocuments.forEach(addDocument);
                 }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 77abfef1d..6913dfbc7 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -266,7 +266,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             if (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) {
                 requestImageSize(imgPath).then(action((inquiredSize: any) => {
                     const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]) % 180;
-                    const rotatedNativeSize = rotation === 90 || rotation === 270 ? { height: inquiredSize.width, width: inquiredSize.height } : inquiredSize;
+                    const rotatedNativeSize = { width: inquiredSize.width, height: inquiredSize.height };
+                    if (inquiredSize.orientation === 6 || rotation === 90 || rotation === 270) {
+                        rotatedNativeSize.width = inquiredSize.height;
+                        rotatedNativeSize.height = inquiredSize.width;
+                    }
                     const rotatedAspect = rotatedNativeSize.height / rotatedNativeSize.width;
                     if (this.layoutDoc[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) {
                         this.layoutDoc._height = this.layoutDoc[WidthSym]() * rotatedAspect;
-- 
cgit v1.2.3-70-g09d2