implement auto-move anchor and fix changing follow behavior

1 files changed, 14 insertions, 35 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index b9a6a5518..301936219 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,5 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAnchor } from '@fortawesome/free-solid-svg-icons'
 import { Checkbox, Tooltip } from "@material-ui/core";
 import { intersection } from "lodash";
 import { action, autorun, computed, Lambda, observable } from "mobx";
@@ -12,7 +13,7 @@ import { List } from "../../fields/List";
 import { ComputedField } from "../../fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
 import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from "../../Utils";
 import { DocumentType } from "../documents/DocumentTypes";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { DocumentManager } from "../util/DocumentManager";
@@ -1076,15 +1077,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </div>;
     }
 
-    toggleAnchor = () => {
-        this.selectedDoc.anchor = !this.selectedDoc.anchor
-    }
-
-    toggleArrow = () => {
-        this.selectedDoc.arrow = !this.selectedDoc.arrow
-    }
-
-
     @observable
     description = Field.toString(LinkManager.currentLink?.description as any as Field);
 
@@ -1102,23 +1094,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @undoBatch
     changeFollowBehavior = action((follow: string) => {
         if (LinkManager.currentLink) {
-            Doc.GetProto(LinkManager.currentLink).followLinkLocation = follow;
+            this.selectedDoc.followLinkLocation = follow;
             return true;
         }
     });
 
-    getCurrLink = () => {
-        if (LinkManager.currentLink) {
-            return Doc.GetProto(LinkManager.currentLink);
-        }
-    }
-
-    getCurrentFollow = () => {
-        if (LinkManager.currentLink) {
-            return StrCast(Doc.GetProto(LinkManager.currentLink).followLinkLocation);
-        }
-    }
-
     onSelectOut = () => {
         this.setDescripValue(this.description);
         document.getElementById('input')?.blur();
@@ -1131,6 +1111,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
+    toggleAnchor = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove)));
+    }
+
     @computed
     get editDescription() {
         return <input
@@ -1194,7 +1178,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 name="selectList"
                                 id="selectList"
                                 onChange={e => this.changeFollowBehavior(e.currentTarget.value)}
-                                value={this.getCurrentFollow()}>
+                                value={StrCast(this.selectedDoc.followLinkLocation, "default")}>
                                 <option value="default">Default</option>
                                 <option value="add:left">Open in new left pane</option>
                                 <option value="add:right">Open in new right pane</option>
@@ -1203,7 +1187,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <option value="fullScreen">Open full screen</option>
                                 <option value="add">Open in new tab</option>
                                 <option value="replace">Replace current tab</option>
-                                {this.getCurrLink()?.linksToAnnotation
+                                {this.selectedDoc.linksToAnnotation
                                     ? <option value="openExternal">Open in external page</option>
                                     : null}
                             </select>
@@ -1211,16 +1195,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div className="propertiesView-input inline" id="propertiesView-anchor">
                             <p>Auto-move anchor</p>
                             <button
-                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: '2rem', height: '2rem' }}
-                                onClick={this.toggleAnchor}
-                            />
-                        </div>
-                        <div className="propertiesView-input inline" id="propertiesView-arrow">
-                            <p>Auto-move arrow</p>
-                            <button
-                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: '2rem', height: '2rem' }}
-                                onClick={this.toggleArrow}
-                            />
+                                style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.linkAutoMove ? "" : "#4476f7", borderRadius: 3 }}
+                                onPointerDown={this.toggleAnchor} onClick={e => e.stopPropagation()}
+                            >
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor} size="lg" />
+                            </button>
                         </div>
                     </div>
                 </div >;