From 380ee1acac1c0b7972d7d423cf804af146dc0edf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 10 Dec 2023 20:19:27 -0500
Subject: massive changes to use mobx 6 which means not accessing props
 directly in @computed functions.

---
 src/client/views/DocumentButtonBar.tsx | 61 ++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 29 deletions(-)

(limited to 'src/client/views/DocumentButtonBar.tsx')

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>
                 ) : (
-- 
cgit v1.2.3-70-g09d2

