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.tsx61
1 files changed, 32 insertions, 29 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index a64722a0b..47ec0f1b4 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 '@mui/material';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../fields/Doc';
import { RichTextField } from '../../fields/RichTextField';
@@ -60,8 +60,11 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
public static hasPushedHack = false;
public static hasPulledHack = false;
+ @observable _props: { views: () => (DocumentView | undefined)[] };
constructor(props: { views: () => (DocumentView | undefined)[] }) {
super(props);
+ this._props = props;
+ makeObservable(this);
runInAction(() => (DocumentButtonBar.Instance = this));
}
@@ -111,12 +114,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
});
get view0() {
- return this.props.views()?.[0];
+ return this._props.views()?.[0];
}
@computed
get considerGoogleDocsPush() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
const animation = this.isAnimatingPulse ? 'shadow-pulse 1s linear infinite' : 'none';
return !targetDoc ? null : (
@@ -143,7 +146,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@computed
get considerGoogleDocsPull() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
const dataDoc = targetDoc && Doc.GetProto(targetDoc);
const animation = this.isAnimatingFetch ? 'spin 0.5s linear infinite' : 'none';
@@ -214,7 +217,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@observable subFollow = '';
@computed
get followLinkButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
const followBtn = (allDocs: boolean, click: (doc: Doc) => void, isSet: (doc?: Doc) => boolean, icon: IconProp) => {
const tooltip = `Follow ${this.subPin}documents`;
return !tooltip ? null : (
@@ -229,7 +232,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
onPointerEnter={action(e => (this.subPin = allDocs ? 'All ' : ''))}
onPointerLeave={action(e => (this.subPin = ''))}
onClick={e => {
- this.props.views().forEach(dv => click(dv!.Document));
+ this._props.views().forEach(dv => click(dv!.Document));
e.stopPropagation();
}}
/>
@@ -243,7 +246,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
<div
className="documentButtonBar-icon documentButtonBar-follow"
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)))}>
+ onClick={undoBatch(e => this._props.views().map(view => view?.docView?.toggleFollowLink(undefined, false)))}>
<div className="documentButtonBar-followTypes">
{followBtn(
true,
@@ -260,7 +263,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@observable subLink = '';
@computed get linkButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
return !targetDoc || !this.view0 ? null : (
<div className="documentButtonBar-icon documentButtonBar-link">
<div className="documentButtonBar-linkTypes">
@@ -304,7 +307,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
onPointerLeave={action(e => (this.subEndLink = ''))}
onClick={e => {
this.view0 &&
- DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.props.Document, true, this.view0, {
+ DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.Document, true, this.view0, {
pinDocLayout: pinLayout,
pinData: !pinContent ? {} : { poslayoutview: true, dataannos: true, dataview: pinContent },
} as PinProps);
@@ -331,7 +334,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@observable subPin = '';
@computed
get pinButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
const pinBtn = (pinLayoutView: boolean, pinContentView: boolean, icon: IconProp) => {
const tooltip = `Pin Document and Save ${this.subPin} to trail`;
return !tooltip ? null : (
@@ -353,7 +356,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
)}
onPointerLeave={action(e => (this.subPin = ''))}
onClick={e => {
- const docs = this.props
+ const docs = this._props
.views()
.filter(v => v)
.map(dv => dv!.Document);
@@ -376,7 +379,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
<div
className="documentButtonBar-icon documentButtonBar-pin"
onClick={e => {
- const docs = this.props
+ const docs = this._props
.views()
.filter(v => v)
.map(dv => dv!.Document);
@@ -396,7 +399,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@computed
get shareButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
return !targetDoc ? null : (
<Tooltip title={<div className="dash-tooltip">{'Open Sharing Manager'}</div>}>
<div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
@@ -408,10 +411,10 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@computed
get menuButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
return !targetDoc ? null : (
<Tooltip title={<div className="dash-tooltip">{`Open Context Menu`}</div>}>
- <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onClick={this.openContextMenu}>
+ <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => this.openContextMenu(e))}>
<FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
</div>
</Tooltip>
@@ -427,10 +430,10 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
anchorPoint={anchorPoints.LEFT_TOP}
content={
<MetadataEntryMenu
- docs={this.props
+ docs={this._props
.views()
.filter(dv => dv)
- .map(dv => dv!.props.Document)}
+ .map(dv => dv!.Document)}
suggestWithFunction
/> // tfs: @bcz This might need to be the data document?
}>
@@ -447,7 +450,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
_stopFunc: () => void = emptyFunction;
@computed
get recordButton() {
- const targetDoc = this.view0?.props.Document;
+ const targetDoc = this.view0?.Document;
return !targetDoc ? null : (
<Tooltip title={<div className="dash-tooltip">Press to record audio annotation</div>}>
<div
@@ -455,7 +458,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
style={{ backgroundColor: this._isRecording ? Colors.ERROR_RED : Colors.DARK_GRAY, color: Colors.WHITE }}
onPointerDown={action((e: React.PointerEvent) => {
this._isRecording = true;
- this.props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction));
+ this._props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction));
const b = UndoManager.StartBatch('Recording');
setupMoveUpEvents(
this,
@@ -482,8 +485,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
onEmbedButtonMoved = () => {
if (this._dragRef.current) {
const dragDocView = this.view0!;
- const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
- const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ const dragData = new DragManager.DocumentDragData([dragDocView.Document]);
+ const [left, top] = dragDocView._props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
dragData.defaultDropAction = 'embed';
dragData.canEmbed = true;
DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { hideSource: false });
@@ -497,7 +500,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@computed
get templateButton() {
const view0 = this.view0;
- const views = this.props.views();
+ const views = this._props.views();
return !view0 ? null : (
<Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
<div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
@@ -522,7 +525,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
);
}
- openContextMenu = (e: React.MouseEvent) => {
+ openContextMenu = (e: PointerEvent) => {
let child = SelectionManager.Views()[0].ContentDiv!.children[0];
while (child.children.length) {
const next = Array.from(child.children).find(c => c.className?.toString().includes('SVGAnimatedString') || typeof c.className === 'string');
@@ -559,7 +562,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@action
toggleTrail = (e: React.PointerEvent) => {
- const rootView = this.props.views()[0];
+ const rootView = this._props.views()[0];
const doc = rootView?.Document;
if (doc) {
const anchor = rootView.ComponentView?.getAnchor?.(true) ?? doc;
@@ -569,12 +572,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
anchor.presentationTrail = trail;
}
Doc.ActivePresentation = trail;
- this.props.views().lastElement()?.props.addDocTab(trail, OpenWhere.replaceRight);
+ this._props.views().lastElement()?._props.addDocTab(trail, OpenWhere.replaceRight);
}
e.stopPropagation();
};
render() {
- const doc = this.view0?.props.Document;
+ const doc = this.view0?.Document;
if (!doc || !this.view0) return null;
const isText = () => doc[this.view0!.LayoutFieldKey] instanceof RichTextField;
@@ -589,9 +592,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
<div style={{ position: 'absolute', zIndex: 1000 }}>
<LinkPopup
key="popup"
- linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this.props.views().lastElement()?.Document.onClick))}
- linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
- linkFrom={() => this.props.views().lastElement()?.Document}
+ linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this._props.views().lastElement()?.Document.onClick))}
+ linkCreateAnchor={() => this._props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
+ linkFrom={() => this._props.views().lastElement()?.Document}
/>
</div>
) : (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-11 20:00:31 +0000