From 0691dc220f52643f4fd5fa9a29a5c52ef59321aa Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Fri, 29 Oct 2021 10:30:48 -0400
Subject: toggle properties on selection

---
 src/client/util/SelectionManager.ts                |  4 +
 src/client/views/PropertiesView.tsx                | 88 ++++++++++++++++++----
 .../CollectionFreeFormLinkView.tsx                 | 23 +++++-
 3 files changed, 99 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 2cba2c1f2..6674f684d 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -4,6 +4,7 @@ import { Doc, Opt } from "../../fields/Doc";
 import { DocumentType } from "../documents/DocumentTypes";
 import { CollectionViewType } from "../views/collections/CollectionView";
 import { DocumentView } from "../views/nodes/DocumentView";
+import { CurrentUserUtils } from "./CurrentUserUtils";
 
 export namespace SelectionManager {
 
@@ -43,6 +44,9 @@ export namespace SelectionManager {
         }
         @action
         DeselectAll(): void {
+            if (CurrentUserUtils.propertiesWidth > 0) {
+                CurrentUserUtils.propertiesWidth = 0;
+            }
             manager.SelectedSchemaDocument = undefined;
             Array.from(manager.SelectedViews.keys()).map(dv => dv.props.whenChildContentsActiveChanged(false));
             manager.SelectedViews.clear();
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index ab9022a84..334a44b3b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -57,6 +57,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get isPres(): boolean {
         return this.selectedDoc?.type === DocumentType.PRES;
     }
+    @computed get isLink(): boolean {
+        return this.selectedDoc?.type === DocumentType.LINK;
+    }
     @computed get dataDoc() { return this.selectedDoc?.[DataSym]; }
 
     @observable layoutFields: boolean = false;
@@ -146,8 +149,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 if (key[0] === "#") {
                     rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}>
                         <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
-                    &nbsp;
-                </div>);
+                        &nbsp;
+                    </div>);
                 } else {
                     const contentElement = <EditableView key="editableView"
                         contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
@@ -214,8 +217,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
                         rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
                             <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
-                        &nbsp;
-                        {contentElement}
+                            &nbsp;
+                            {contentElement}
                         </div>);
                     }
                 }
@@ -855,7 +858,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openOptions = !this.openOptions)}
                 style={{ backgroundColor: this.openOptions ? "black" : "" }}>
                 Options
-                        <div className="propertiesView-settings-title-icon">
+                <div className="propertiesView-settings-title-icon">
                     <FontAwesomeIcon icon={this.openOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -872,7 +875,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openSharing = !this.openSharing)}
                 style={{ backgroundColor: this.openSharing ? "black" : "" }}>
                 Sharing {"&"} Permissions
-                        <div className="propertiesView-sharing-title-icon">
+                <div className="propertiesView-sharing-title-icon">
                     <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -948,7 +951,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openFilters = !this.openFilters)}
                 style={{ backgroundColor: this.openFilters ? "black" : "" }}>
                 Filters
-                        <div className="propertiesView-filters-title-icon">
+                <div className="propertiesView-filters-title-icon">
                     <FontAwesomeIcon icon={this.openFilters ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -997,7 +1000,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         onPointerDown={action(() => this.openAppearance = !this.openAppearance)}
                         style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
                         Appearance
-                            <div className="propertiesView-appearance-title-icon">
+                        <div className="propertiesView-appearance-title-icon">
                             <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
                         </div>
                     </div>
@@ -1012,7 +1015,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     onPointerDown={action(() => this.openTransform = !this.openTransform)}
                     style={{ backgroundColor: this.openTransform ? "black" : "" }}>
                     Transform
-                        <div className="propertiesView-transform-title-icon">
+                    <div className="propertiesView-transform-title-icon">
                         <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
                 </div>
@@ -1029,7 +1032,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openFields = !this.openFields)}
                 style={{ backgroundColor: this.openFields ? "black" : "" }}>
                 Fields {"&"} Tags
-                            <div className="propertiesView-fields-title-icon">
+                <div className="propertiesView-fields-title-icon">
                     <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1050,7 +1053,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openContexts = !this.openContexts)}
                 style={{ backgroundColor: this.openContexts ? "black" : "" }}>
                 Contexts
-                        <div className="propertiesView-contexts-title-icon">
+                <div className="propertiesView-contexts-title-icon">
                     <FontAwesomeIcon icon={this.openContexts ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1064,7 +1067,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openLayout = !this.openLayout)}
                 style={{ backgroundColor: this.openLayout ? "black" : "" }}>
                 Layout
-                        <div className="propertiesView-layout-title-icon">
+                <div className="propertiesView-layout-title-icon">
                     <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1072,6 +1075,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </div>;
     }
 
+    toggleAnchor = () => {
+        this.selectedDoc.anchor = !this.selectedDoc.anchor
+    }
+
+    toggleArrow = () => {
+        this.selectedDoc.arrow = !this.selectedDoc.arrow
+    }
+
 
 
     /**
@@ -1095,6 +1106,57 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>;
 
         } else {
+            if (this.selectedDoc && this.isLink) {
+                return <div className="propertiesView">
+                    <div className="propertiesView-title">
+                        Linking
+                    </div>
+                    <div className="properties-grid col propertiesView-textInfo">
+                        Information
+                        <div className="row" id="propertiesView-label">
+                            <p>Label</p>
+                            <input type="text" />
+                        </div>
+                        <div className="row" id="propertiesView-category">
+                            <p>Label</p>
+                            <input type="text" />
+                        </div>
+                        <div className="row" id="propertiesView-description">
+                            <p>Description</p>
+                            <input type="text" />
+                        </div>
+                    </div>
+                    <div className="propertiesView-behavior">
+                        Behavior
+                        <div id="propertiesView-follow">
+                            Follow
+                            <select name="selectList" id="selectList">
+                                <option value="default">Default</option>
+                                <option value="newLeft">Open in new left pane</option>
+                                <option value="newRight">Open in new right pane</option>
+                                <option value="replaceLeft">Replace left tab</option>
+                                <option value="replaceRight">Replace right tab</option>
+                                <option value="openFull">Open full screen</option>
+                                <option value="openTab">Open in new tab</option>
+                            </select>
+                        </div>
+                        <div id="propertiesView-anchor">
+                            Auto-move anchor
+                            <button
+                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: 50, height: 50 }}
+                                onClick={this.toggleAnchor}
+                            />
+                        </div>
+                        <div id="propertiesView-arrow">
+                            Auto-move arrow
+                            <button
+                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: 50, height: 50 }}
+                                onClick={this.toggleArrow}
+                            />
+                        </div>
+                    </div>
+                </div>;
+            }
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
@@ -1148,7 +1210,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             onPointerDown={action(() => { this.openPresTransitions = !this.openPresTransitions; })}
                             style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
                             &nbsp; <FontAwesomeIcon style={{ alignSelf: "center" }} icon={"rocket"} /> &nbsp; Transitions
-                        <div className="propertiesView-presTrails-title-icon">
+                            <div className="propertiesView-presTrails-title-icon">
                                 <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 9769453a0..d4ef76221 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -11,6 +11,7 @@ import { SnappingManager } from "../../../util/SnappingManager";
 import { DocumentView } from "../../nodes/DocumentView";
 import "./CollectionFreeFormLinkView.scss";
 import React = require("react");
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 
 
 export interface CollectionFreeFormLinkViewProps {
@@ -138,6 +139,20 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return left; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
     }
 
+    @action
+    toggleProperties = () => {
+        if (CurrentUserUtils.propertiesWidth > 0) {
+            CurrentUserUtils.propertiesWidth = 0;
+        } else {
+            CurrentUserUtils.propertiesWidth = 250;
+        }
+    }
+
+    onClickLine = () => {
+        SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)
+        this.toggleProperties()
+    }
+
     @computed.struct get renderData() {
         this._start; SnappingManager.GetIsDragging();
         const { A, B, LinkDocs } = this.props;
@@ -198,9 +213,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
 
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
-            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, strokeDasharray: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "2 2" : undefined, stroke, strokeWidth }}
-                onClick={() => SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)}
-                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
+            <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
+                onClick={this.onClickLine}
+                onPointerOver={() => {
+                    console.log(this.props.LinkDocs[0].directed)
+                }} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2