Merge branch 'master' into pres-trail-sophie

1 files changed, 74 insertions, 8 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index f61d147cf..af868ba9c 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -28,6 +28,7 @@ import { TemplateMenu } from './TemplateMenu';
 import React = require('react');
 import { DocumentType } from '../documents/DocumentTypes';
 import { FontIconBox } from './nodes/button/FontIconBox';
+import { PinProps } from './nodes/trails';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -242,7 +243,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 <div
                     className="documentButtonBar-icon documentButtonBar-follow"
                     style={{ backgroundColor: targetDoc.isLinkButton ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: targetDoc.isLinkButton ? Colors.BLACK : Colors.WHITE }}
-                    onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, undefined, false)))}>
+                    onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false)))}>
                     <div className="documentButtonBar-followTypes">
                         {followBtn(
                             true,
@@ -285,6 +286,52 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             </div>
         );
     }
+    @observable subEndLink = '';
+    @computed
+    get endLinkButton() {
+        const linkBtn = (pinDocLayout: boolean, pinDocContent: boolean, icon: IconProp) => {
+            const tooltip = `Finish Link and Save ${this.subEndLink} data`;
+            return !this.view0 ? null : (
+                <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}>
+                    <div className="documentButtonBar-pinIcon">
+                        <FontAwesomeIcon
+                            className="documentdecorations-icon"
+                            style={{ width: 20 }}
+                            key={icon.toString()}
+                            size="sm"
+                            icon={icon}
+                            onPointerEnter={action(e => (this.subEndLink = (pinDocLayout ? 'Layout' : '') + (pinDocLayout && pinDocContent ? ' &' : '') + (pinDocContent ? ' Content' : '')))}
+                            onPointerLeave={action(e => (this.subEndLink = ''))}
+                            onClick={e => {
+                                const docs = this.props
+                                    .views()
+                                    .filter(v => v)
+                                    .map(dv => dv!.rootDoc);
+                                this.view0 &&
+                                    DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.props.Document, true, this.view0, {
+                                        pinDocLayout,
+                                        pinDocContent,
+                                        pinData: !pinDocContent ? {} : { poslayoutview: true, dataannos: true, dataview: true },
+                                    } as PinProps);
+
+                                e.stopPropagation();
+                            }}
+                        />
+                    </div>
+                </Tooltip>
+            );
+        };
+        return !this.view0 ? null : (
+            <div className="documentButtonBar-icon documentButtonBar-pin">
+                <div className="documentButtonBar-pinTypes">
+                    {linkBtn(true, false, 'window-maximize')}
+                    {linkBtn(false, true, 'address-card')}
+                    {linkBtn(true, true, 'id-card')}
+                </div>
+                <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
+            </div>
+        );
+    }
 
     @observable subPin = '';
     @computed
@@ -315,7 +362,13 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                                     .views()
                                     .filter(v => v)
                                     .map(dv => dv!.rootDoc);
-                                TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout, pinDocContent, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null), currentFrame: Cast(docs.lastElement()?.currentFrame, 'number', null) });
+                                TabDocView.PinDoc(docs, {
+                                    pinAudioPlay: true,
+                                    pinDocLayout,
+                                    pinData: { dataview: true },
+                                    activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null),
+                                    currentFrame: Cast(docs.lastElement()?.currentFrame, 'number', null),
+                                });
                                 e.stopPropagation();
                             }}
                         />
@@ -491,12 +544,29 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         this._showLinkPopup = !this._showLinkPopup;
         e.stopPropagation();
     };
+
+    @observable _captureEndLinkLayout = false;
+    @action
+    captureEndLinkLayout = (e: React.PointerEvent) => {
+        this._captureEndLinkLayout = !this._captureEndLinkLayout;
+    };
+    @observable _captureEndLinkContent = false;
+    @action
+    captureEndLinkContent = (e: React.PointerEvent) => {
+        this._captureEndLinkContent = !this._captureEndLinkContent;
+    };
+
+    @action
+    captureEndLinkState = (e: React.PointerEvent) => {
+        this._captureEndLinkContent = this._captureEndLinkLayout = !this._captureEndLinkLayout;
+    };
+
     @action
     toggleTrail = (e: React.PointerEvent) => {
         const rootView = this.props.views()[0];
         const rootDoc = rootView?.rootDoc;
         if (rootDoc) {
-            const anchor = rootView.ComponentView?.getAnchor?.(true) ?? rootDoc;
+            const anchor = rootView.ComponentView?.getAnchor?.(false) ?? rootDoc;
             const trail = DocCast(anchor.presTrail) ?? Doc.MakeCopy(DocCast(Doc.UserDoc().emptyTrail), true);
             if (trail !== anchor.presTrail) {
                 DocUtils.MakeLink({ doc: anchor }, { doc: trail }, 'link trail');
@@ -533,11 +603,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                     <div className="documentButtonBar-button">{this.linkButton}</div>
                 )}
 
-                {(DocumentLinksButton.StartLink || Doc.UserDoc()['documentLinksButton-fullMenu']) && DocumentLinksButton.StartLink !== doc ? (
-                    <div className="documentButtonBar-button">
-                        <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
-                    </div>
-                ) : null}
+                {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== doc ? <div className="documentButtonBar-button">{this.endLinkButton} </div> : null}
                 {
                     Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>
                     /*<div className="documentButtonBar-button"> {this.metadataButton} </div> */