aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/DocumentButtonBar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/DocumentButtonBar.tsx')
-rw-r--r--src/client/views/DocumentButtonBar.tsx109
1 files changed, 87 insertions, 22 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index f61d147cf..8c2ced55a 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -1,7 +1,7 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
-import { action, computed, observable, runInAction, trace } from 'mobx';
+import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../fields/Doc';
import { RichTextField } from '../../fields/RichTextField';
@@ -11,6 +11,7 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager
import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
import { Docs, DocUtils } from '../documents/Documents';
import { DragManager } from '../util/DragManager';
+import { IsFollowLinkScript } from '../util/LinkFollower';
import { SelectionManager } from '../util/SelectionManager';
import { SharingManager } from '../util/SharingManager';
import { undoBatch, UndoManager } from '../util/UndoManager';
@@ -24,10 +25,9 @@ import { DocumentLinksButton } from './nodes/DocumentLinksButton';
import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
import { DashFieldView } from './nodes/formattedText/DashFieldView';
import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
+import { PinProps } from './nodes/trails';
import { TemplateMenu } from './TemplateMenu';
import React = require('react');
-import { DocumentType } from '../documents/DocumentTypes';
-import { FontIconBox } from './nodes/button/FontIconBox';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -237,12 +237,13 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
</Tooltip>
);
};
+ const followLink = IsFollowLinkScript(targetDoc?.onClick);
return !targetDoc ? null : (
<Tooltip title={<div className="dash-tooltip">Set onClick to follow primary link</div>}>
<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)))}>
+ style={{ backgroundColor: followLink ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: followLink ? Colors.BLACK : Colors.WHITE }}
+ onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false)))}>
<div className="documentButtonBar-followTypes">
{followBtn(
true,
@@ -285,12 +286,57 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
</div>
);
}
+ @observable subEndLink = '';
+ @computed
+ get endLinkButton() {
+ const linkBtn = (pinLayout: boolean, pinContent: 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 = (pinLayout ? 'Layout' : '') + (pinLayout && pinContent ? ' &' : '') + (pinContent ? ' 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: pinLayout,
+ pinData: !pinContent ? {} : { poslayoutview: true, dataannos: true, dataview: pinContent },
+ } 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
get pinButton() {
const targetDoc = this.view0?.props.Document;
- const pinBtn = (pinDocLayout: boolean, pinDocContent: boolean, icon: IconProp) => {
+ const pinBtn = (pinLayoutView: boolean, pinContentView: boolean, icon: IconProp) => {
const tooltip = `Pin Document and Save ${this.subPin} to trail`;
return !tooltip ? null : (
<Tooltip title={<div className="dash-tooltip">{tooltip}</div>}>
@@ -304,10 +350,10 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
onPointerEnter={action(
e =>
(this.subPin =
- (pinDocLayout ? 'Layout' : '') +
- (pinDocLayout && pinDocContent ? ' &' : '') +
- (pinDocContent ? ' Content View' : '') +
- (pinDocLayout && pinDocContent ? '(shift+alt)' : pinDocLayout ? '(shift)' : pinDocContent ? '(alt)' : ''))
+ (pinLayoutView ? 'Layout' : '') +
+ (pinLayoutView && pinContentView ? ' &' : '') +
+ (pinContentView ? ' Content View' : '') +
+ (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : ''))
)}
onPointerLeave={action(e => (this.subPin = ''))}
onClick={e => {
@@ -315,7 +361,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: pinLayoutView,
+ pinData: { dataview: pinContentView },
+ activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null),
+ currentFrame: Cast(docs.lastElement()?.currentFrame, 'number', null),
+ });
e.stopPropagation();
}}
/>
@@ -332,7 +384,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
.views()
.filter(v => v)
.map(dv => dv!.rootDoc);
- TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout: e.shiftKey, pinDocContent: e.altKey, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) });
+ TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout: e.shiftKey, pinData: { dataview: e.altKey }, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) });
e.stopPropagation();
}}>
<div className="documentButtonBar-pinTypes">
@@ -363,7 +415,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
const targetDoc = this.view0?.props.Document;
return !targetDoc ? null : (
<Tooltip title={<div className="dash-tooltip">{`Open Context Menu`}</div>}>
- <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onClick={e => this.openContextMenu(e)}>
+ <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onClick={this.openContextMenu}>
<FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
</div>
</Tooltip>
@@ -465,7 +517,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
)
}>
<div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
- {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+ <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
</div>
</Flyout>
</div>
@@ -491,15 +543,32 @@ 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');
+ DocUtils.MakeLink(anchor, trail, { linkRelationship: 'link trail' });
anchor.presTrail = trail;
}
Doc.ActivePresentation = trail;
@@ -524,7 +593,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
<LinkPopup
key="popup"
showPopup={this._showLinkPopup}
- linkCreated={link => (link.linkDisplay = !this.props.views().lastElement()?.rootDoc.isLinkButton)}
+ linkCreated={link => (link.linkDisplay = !IsFollowLinkScript(this.props.views().lastElement()?.rootDoc.onClick))}
linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
linkFrom={() => this.props.views().lastElement()?.rootDoc}
/>
@@ -533,11 +602,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> */
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:28:24 +0000