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.tsx72
1 files changed, 35 insertions, 37 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 7f125dd34..202bfe400 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -3,13 +3,12 @@ import { faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadA
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, observable, runInAction, computed } from "mobx";
import { observer } from "mobx-react";
-import { Doc } from "../../new_fields/Doc";
+import { Doc, DocListCast } from "../../new_fields/Doc";
import { RichTextField } from '../../new_fields/RichTextField';
-import { NumCast, StrCast } from "../../new_fields/Types";
+import { NumCast, StrCast, Cast } from "../../new_fields/Types";
import { emptyFunction } from "../../Utils";
import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
import { DragManager } from "../util/DragManager";
-import { LinkManager } from '../util/LinkManager';
import { UndoManager } from "../util/UndoManager";
import './DocumentButtonBar.scss';
import './collections/ParentDocumentSelector.scss';
@@ -21,6 +20,7 @@ import React = require("react");
import { DocumentView } from './nodes/DocumentView';
import { ParentDocSelector } from './collections/ParentDocumentSelector';
import { CollectionDockingView } from './collections/CollectionDockingView';
+import { Id } from '../../new_fields/FieldSymbols';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -40,7 +40,7 @@ const cloud: IconProp = "cloud-upload-alt";
const fetch: IconProp = "sync-alt";
@observer
-export class DocumentButtonBar extends React.Component<{ views: DocumentView[], stack?: any }, {}> {
+export class DocumentButtonBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}> {
private _linkButton = React.createRef<HTMLDivElement>();
private _downX = 0;
private _downY = 0;
@@ -60,7 +60,7 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
public static hasPushedHack = false;
public static hasPulledHack = false;
- constructor(props: { views: DocumentView[] }) {
+ constructor(props: { views: (DocumentView | undefined)[] }) {
super(props);
runInAction(() => DocumentButtonBar.Instance = this);
}
@@ -102,32 +102,28 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
this._pullColorAnimating = false;
});
+ get view0() { return this.props.views && this.props.views.length ? this.props.views[0] : undefined; }
+
@action
onLinkButtonMoved = (e: PointerEvent): void => {
if (this._linkButton.current !== null && (Math.abs(e.clientX - this._downX) > 3 || Math.abs(e.clientY - this._downY) > 3)) {
document.removeEventListener("pointermove", this.onLinkButtonMoved);
document.removeEventListener("pointerup", this.onLinkButtonUp);
- const docView = this.props.views[0];
- const container = docView.props.ContainingCollectionDoc?.proto;
- const dragData = new DragManager.LinkDragData(docView.props.Document, container ? [container] : []);
const linkDrag = UndoManager.StartBatch("Drag Link");
- DragManager.StartLinkDrag(this._linkButton.current, dragData, e.pageX, e.pageY, {
- handlers: {
- dragComplete: () => {
- const tooltipmenu = FormattedTextBox.ToolTipTextMenu;
- const linkDoc = dragData.linkDocument;
- if (linkDoc && tooltipmenu) {
- const proto = Doc.GetProto(linkDoc);
- if (proto && docView) {
- proto.sourceContext = docView.props.ContainingCollectionDoc;
- }
- const text = tooltipmenu.makeLink(linkDoc, StrCast(linkDoc.anchor2.title), e.ctrlKey ? "onRight" : "inTab");
- if (linkDoc instanceof Doc && linkDoc.anchor2 instanceof Doc) {
- proto.title = text === "" ? proto.title : text + " to " + linkDoc.anchor2.title; // TODODO open to more descriptive descriptions of following in text link
- }
+ this.view0 && DragManager.StartLinkDrag(this._linkButton.current, this.view0.props.Document, e.pageX, e.pageY, {
+ dragComplete: dropEv => {
+ const linkDoc = dropEv.linkDragData?.linkDocument; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop
+ if (this.view0 && linkDoc && FormattedTextBox.ToolTipTextMenu) {
+ const proto = Doc.GetProto(linkDoc);
+ proto.sourceContext = this.view0.props.ContainingCollectionDoc;
+
+ const anchor2Title = linkDoc.anchor2 instanceof Doc ? StrCast(linkDoc.anchor2.title) : "-untitled-";
+ if (linkDoc.anchor2 instanceof Doc) {
+ const text = FormattedTextBox.ToolTipTextMenu.MakeLinkToSelection(linkDoc[Id], anchor2Title, e.ctrlKey ? "onRight" : "inTab", linkDoc.anchor2[Id]);
+ proto.title = text === "" ? proto.title : text + " to " + linkDoc.anchor2.title; // TODO open to more descriptive descriptions of following in text link
}
- linkDrag && linkDrag.end();
}
+ linkDrag?.end();
},
hideSource: false
});
@@ -154,10 +150,10 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
@computed
get considerGoogleDocsPush() {
- const targetDoc = this.props.views[0].props.Document;
- const published = Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
+ const targetDoc = this.view0?.props.Document;
+ const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
- return <div
+ return !targetDoc ? (null) : <div
title={`${published ? "Push" : "Publish"} to Google Docs`}
className="documentButtonBar-linker"
style={{ animation }}
@@ -172,10 +168,10 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
@computed
get considerGoogleDocsPull() {
- const targetDoc = this.props.views[0].props.Document;
- const dataDoc = Doc.GetProto(targetDoc);
+ const targetDoc = this.view0?.props.Document;
+ const dataDoc = targetDoc && Doc.GetProto(targetDoc);
const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none";
- return !dataDoc[GoogleRef] ? (null) : <div className="documentButtonBar-linker"
+ return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <div className="documentButtonBar-linker"
title={`${!dataDoc.unchanged ? "Pull from" : "Fetch"} Google Docs`}
style={{ backgroundColor: this.pullColor }}
onPointerEnter={e => e.altKey && runInAction(() => this.openHover = true)}
@@ -200,10 +196,11 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
@computed
get linkButton() {
- const linkCount = LinkManager.Instance.getAllRelatedLinks(this.props.views[0].props.Document).length;
- return <div title="Drag(create link) Tap(view links)" className="documentButtonBar-linkFlyout" ref={this._linkButton}>
+ const view0 = this.view0;
+ const linkCount = view0 && DocListCast(view0.props.Document.links).length;
+ return !view0 ? (null) : <div title="Drag(create link) Tap(view links)" className="documentButtonBar-linkFlyout" ref={this._linkButton}>
<Flyout anchorPoint={anchorPoints.RIGHT_TOP}
- content={<LinkMenu docView={this.props.views[0]} addDocTab={this.props.views[0].props.addDocTab} changeFlyout={emptyFunction} />}>
+ content={<LinkMenu docView={view0} addDocTab={view0.props.addDocTab} changeFlyout={emptyFunction} />}>
<div className={"documentButtonBar-linkButton-" + (linkCount ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >
{linkCount ? linkCount : <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />}
</div>
@@ -213,20 +210,21 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
@computed
get contextButton() {
- return <ParentDocSelector Views={this.props.views} Document={this.props.views[0].props.Document} addDocTab={(doc, data, where) => {
+ return !this.view0 ? (null) : <ParentDocSelector Views={this.props.views.filter(v => v).map(v => v as DocumentView)} Document={this.view0.props.Document} addDocTab={(doc, data, where) => {
where === "onRight" ? CollectionDockingView.AddRightSplit(doc, data) :
this.props.stack ? CollectionDockingView.Instance.AddTab(this.props.stack, doc, data) :
- this.props.views[0].props.addDocTab(doc, data, "onRight");
+ this.view0?.props.addDocTab(doc, data, "onRight");
return true;
}} />;
}
render() {
+ if (!this.view0) return (null);
const templates: Map<Template, boolean> = new Map();
Array.from(Object.values(Templates.TemplateList)).map(template =>
- templates.set(template, this.props.views.reduce((checked, doc) => checked || doc.getLayoutPropStr("show" + template.Name) ? true : false, false as boolean)));
+ templates.set(template, this.props.views.reduce((checked, doc) => checked || doc?.getLayoutPropStr("show" + template.Name) ? true : false, false as boolean)));
- const isText = this.props.views[0].props.Document.data instanceof RichTextField; // bcz: Todo - can't assume layout is using the 'data' field. need to add fieldKey to DocumentView
+ const isText = this.view0.props.Document.data instanceof RichTextField; // bcz: Todo - can't assume layout is using the 'data' field. need to add fieldKey to DocumentView
const considerPull = isText && this.considerGoogleDocsPull;
const considerPush = isText && this.considerGoogleDocsPush;
return <div className="documentButtonBar">
@@ -234,7 +232,7 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
{this.linkButton}
</div>
<div className="documentButtonBar-button">
- <TemplateMenu docs={this.props.views} templates={templates} />
+ <TemplateMenu docs={this.props.views.filter(v => v).map(v => v as DocumentView)} templates={templates} />
</div>
<div className="documentButtonBar-button" style={{ display: !considerPush ? "none" : "" }}>
{this.considerGoogleDocsPush}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:48:42 +0000