Merge branch 'master' into monika_animation

2 files changed, 86 insertions, 67 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 34c170be2..8370af490 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -4,17 +4,20 @@
     background-color: #eeeeee;
     pointer-events: all;
     width: 100%;
+    height: 100%;
     outline-color: maroon;
     outline-style: dashed;
-    border-radius: 12px;
+    border-radius: 6px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s;
-
+    transition: all .1s; 
+    padding: 0px;
+    padding-left: 5px;
+    padding-bottom: 3px;
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -32,34 +35,43 @@
 .presElementBox-item:hover {
     transition: all .1s;
     background: #AAAAAA;
-    border-radius: 12px;
+    border-radius: 6px;
 }
 
 .presElementBox-selected {
     background: gray;
     color: black;
-    border-radius: 12px;
+    border-radius: 6px;
     box-shadow: black 2px 2px 5px;
 }
 
 .presElementBox-closeIcon {
-    float: right;
     border-radius: 20px;
     transform:scale(0.7);
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 8px;
 }
 
 .presElementBox-interaction {
     color: gray;
     float: left;
+    padding: 0px;
+    width: 20px;
+    height: 20px;
 }
 
 .presElementBox-interaction-selected {
     color: white;
     float: left;
+    padding: 0px;
+    width: 22px;
+    height: 22px;
 }
 
 .presElementBox-name {
-    font-size: 15px;
+    font-size: 12pxππ;
     position: absolute;
     display: inline-block;
     width: calc(100% - 45px);
@@ -70,7 +82,14 @@
 
 .presElementBox-embedded {
     position: relative;
-    margin-top: 30;
+    margin-top: 22;
+    display: flex;
+    width: auto;
+    justify-content: center;
+    .contentFittingDocumentView {
+        position: absolute;
+        height: 100%;
+    }
 }
 
 .presElementBox-embeddedMask {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index f50a3a0ef..52773d466 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -2,19 +2,19 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed } from "mobx";
+import { action, computed, reaction, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { documentSchema } from '../../../new_fields/documentSchemas';
 import { Id } from "../../../new_fields/FieldSymbols";
 import { createSchema, makeInterface } from '../../../new_fields/Schema';
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
-import { emptyFunction, returnFalse } from "../../../Utils";
+import { emptyFunction, returnFalse, emptyPath } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { Transform } from "../../util/Transform";
 import { CollectionViewType } from '../collections/CollectionView';
 import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
-import { DocComponent } from '../DocComponent';
+import { DocComponent, DocExtendableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
 import React = require("react");
@@ -46,13 +46,23 @@ const PresDocument = makeInterface(presSchema, documentSchema);
  * It involves some functionality for its buttons and options.
  */
 @observer
-export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(PresDocument) {
+export class PresElementBox extends DocExtendableComponent<FieldViewProps, PresDocument>(PresDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); }
 
-    @computed get indexInPres() { return DocListCast(this.presentationDoc[this.Document.presBoxKey || ""]).indexOf(this.props.Document); }
-    @computed get presentationDoc() { return Cast(this.Document.presBox, Doc) as Doc; }
-    @computed get targetDoc() { return this.Document.presentationTargetDoc as Doc; }
-    @computed get currentIndex() { return NumCast(this.presentationDoc.selectedDoc); }
+    _heightDisposer: IReactionDisposer | undefined;
+    @computed get indexInPres() { return NumCast(this.originalLayout?.presentationIndex); }
+    @computed get presentationDoc() { return Cast(this.originalLayout?.presBox, Doc) as Doc; }
+    @computed get originalLayout() { return this.props.Document.expandedTemplate as Doc; }
+    @computed get targetDoc() { return this.originalLayout?.presentationTargetDoc as Doc; }
+    @computed get currentIndex() { return NumCast(this.presentationDoc?._itemIndex); }
+
+    componentDidMount() {
+        this._heightDisposer = reaction(() => [this.originalLayout.embedOpen, this.originalLayout.collapsedHeight],
+            params => this.originalLayout._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+    }
+    componentWillUnmount() {
+        this._heightDisposer?.();
+    }
 
     /**
      * The function that is called on click to turn Hiding document till press option on/off.
@@ -61,8 +71,8 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
     @action
     onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.Document.hideTillShownButton = !this.Document.hideTillShownButton;
-        if (!this.Document.hideTillShownButton) {
+        this.originalLayout.hideTillShownButton = !this.originalLayout.hideTillShownButton;
+        if (!this.originalLayout.hideTillShownButton) {
             if (this.indexInPres >= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
@@ -81,13 +91,13 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.Document.hideAfterButton = !this.Document.hideAfterButton;
-        if (!this.Document.hideAfterButton) {
+        this.originalLayout.hideAfterButton = !this.originalLayout.hideAfterButton;
+        if (!this.originalLayout.hideAfterButton) {
             if (this.indexInPres <= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
         } else {
-            if (this.Document.fadeButton) this.Document.fadeButton = false;
+            if (this.originalLayout.fadeButton) this.originalLayout.fadeButton = false;
             if (this.presentationDoc.presStatus && this.indexInPres < this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 0;
             }
@@ -102,13 +112,13 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.Document.fadeButton = !this.Document.fadeButton;
-        if (!this.Document.fadeButton) {
+        this.originalLayout.fadeButton = !this.originalLayout.fadeButton;
+        if (!this.originalLayout.fadeButton) {
             if (this.indexInPres <= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
         } else {
-            this.Document.hideAfterButton = false;
+            this.originalLayout.hideAfterButton = false;
             if (this.presentationDoc.presStatus && (this.indexInPres < this.currentIndex) && this.targetDoc) {
                 this.targetDoc.opacity = 0.5;
             }
@@ -121,11 +131,11 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
     @action
     onNavigateDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.Document.navButton = !this.Document.navButton;
-        if (this.Document.navButton) {
-            this.Document.showButton = false;
+        this.originalLayout.navButton = !this.originalLayout.navButton;
+        if (this.originalLayout.navButton) {
+            this.originalLayout.showButton = false;
             if (this.currentIndex === this.indexInPres) {
-                this.props.focus(this.props.Document);
+                this.props.focus(this.originalLayout);
             }
         }
     }
@@ -137,13 +147,13 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
     onZoomDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
 
-        this.Document.showButton = !this.Document.showButton;
-        if (!this.Document.showButton) {
-            this.props.Document.viewScale = 1;
+        this.originalLayout.showButton = !this.originalLayout.showButton;
+        if (!this.originalLayout.showButton) {
+            this.originalLayout.viewScale = 1;
         } else {
-            this.Document.navButton = false;
+            this.originalLayout.navButton = false;
             if (this.currentIndex === this.indexInPres) {
-                this.props.focus(this.props.Document);
+                this.props.focus(this.originalLayout);
             }
         }
     }
@@ -152,68 +162,58 @@ export class PresElementBox extends DocComponent<FieldViewProps, PresDocument>(P
      */
     ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
+    embedHeight = () => this.props.PanelHeight() - NumCast(this.originalLayout.collapsedHeight);
+    embedWidth = () => this.props.PanelWidth() - 20;
     /**
      * The function that is responsible for rendering the a preview or not for this
      * presentation element.
      */
     renderEmbeddedInline = () => {
-        if (!this.Document.embedOpen || !this.targetDoc) {
-            return (null);
-        }
-
-        let propDocWidth = NumCast(this.layoutDoc.nativeWidth);
-        let propDocHeight = NumCast(this.layoutDoc.nativeHeight);
-        let scale = () => 175 / NumCast(this.layoutDoc.nativeWidth, 175);
-        return (
-            <div className="presElementBox-embedded" style={{
-                height: propDocHeight === 0 ? NumCast(this.layoutDoc.height) - NumCast(this.layoutDoc.collapsedHeight) : propDocHeight * scale(),
-                width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
-            }}>
+        return !this.originalLayout.embedOpen || !this.targetDoc ? (null) :
+            <div className="presElementBox-embedded" style={{ height: this.embedHeight() }}>
                 <ContentFittingDocumentView
-                    fitToBox={StrCast(this.targetDoc.type).indexOf(DocumentType.COL) !== -1}
                     Document={this.targetDoc}
+                    LibraryPath={emptyPath}
+                    fitToBox={true}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
-                    ruleProvider={undefined}
                     addDocTab={returnFalse}
                     pinToPres={returnFalse}
-                    PanelWidth={() => this.props.PanelWidth() - 20}
-                    PanelHeight={() => 100}
-                    setPreviewScript={emptyFunction}
+                    PanelWidth={this.embedWidth}
+                    PanelHeight={this.embedHeight}
                     getTransform={Transform.Identity}
                     active={this.props.active}
                     moveDocument={this.props.moveDocument!}
-                    renderDepth={1}
+                    renderDepth={this.props.renderDepth + 1}
                     focus={emptyFunction}
                     whenActiveChanged={returnFalse}
                 />
                 <div className="presElementBox-embeddedMask" />
-            </div>
-        );
+            </div>;
     }
 
     render() {
-        let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree;
-        let className = "presElementBox-item" + (this.currentIndex === this.indexInPres ? " presElementBox-selected" : "");
-        let pbi = "presElementBox-interaction";
-        return (
+        const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree;
+        const className = "presElementBox-item" + (this.currentIndex === this.indexInPres ? " presElementBox-selected" : "");
+        const pbi = "presElementBox-interaction";
+        return !this.originalLayout ? (null) : (
             <div className={className} key={this.props.Document[Id] + this.indexInPres}
                 style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
-                onClick={e => { this.props.focus(this.props.Document); e.stopPropagation(); }}>
+                onClick={e => { this.props.focus(this.originalLayout); e.stopPropagation(); }}>
                 {treecontainer ? (null) : <>
                     <strong className="presElementBox-name">
-                        {`${this.indexInPres + 1}. ${this.Document.title}`}
+                        {`${this.indexInPres + 1}. ${this.targetDoc?.title}`}
                     </strong>
-                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(this.props.Document)}>X</button>
+                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(this.originalLayout)}>X</button>
                     <br />
                 </>}
-                <button title="Zoom" className={pbi + (this.Document.showButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={pbi + (this.Document.navButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Before" className={pbi + (this.Document.hideTillShownButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade After" className={pbi + (this.Document.fadeButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Hide After" className={pbi + (this.Document.hideAfterButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={pbi + (this.Document.groupButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.Document.groupButton = !this.Document.groupButton; }}><FontAwesomeIcon icon={"arrow-up"} /></button>
-                <button title="Expand Inline" className={pbi + (this.Document.embedOpen ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.Document.embedOpen = !this.Document.embedOpen; }}><FontAwesomeIcon icon={"arrow-down"} /></button>
+                <button title="Zoom" className={pbi + (this.originalLayout.showButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={pbi + (this.originalLayout.navButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Before" className={pbi + (this.originalLayout.hideTillShownButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade After" className={pbi + (this.originalLayout.fadeButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide After" className={pbi + (this.originalLayout.hideAfterButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={pbi + (this.originalLayout.groupButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.originalLayout.groupButton = !this.originalLayout.groupButton; }}><FontAwesomeIcon icon={"arrow-up"} /></button>
+                <button title="Expand Inline" className={pbi + (this.originalLayout.embedOpen ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.originalLayout.embedOpen = !this.originalLayout.embedOpen; }}><FontAwesomeIcon icon={"arrow-down"} /></button>
 
                 <br style={{ lineHeight: 0.1 }} />
                 {this.renderEmbeddedInline()}