From 0691dc220f52643f4fd5fa9a29a5c52ef59321aa Mon Sep 17 00:00:00 2001 From: Lauren Choi 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 { @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 { if (key[0] === "#") { rows.push(
{key} -   -
); +   + ); } else { const contentElement = { rows.push(
{key + ":"} -   - {contentElement} +   + {contentElement}
); } } @@ -855,7 +858,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openOptions = !this.openOptions)} style={{ backgroundColor: this.openOptions ? "black" : "" }}> Options -
+
@@ -872,7 +875,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openSharing = !this.openSharing)} style={{ backgroundColor: this.openSharing ? "black" : "" }}> Sharing {"&"} Permissions -
+
@@ -948,7 +951,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openFilters = !this.openFilters)} style={{ backgroundColor: this.openFilters ? "black" : "" }}> Filters -
+
@@ -997,7 +1000,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openAppearance = !this.openAppearance)} style={{ backgroundColor: this.openAppearance ? "black" : "" }}> Appearance -
+
@@ -1012,7 +1015,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openTransform = !this.openTransform)} style={{ backgroundColor: this.openTransform ? "black" : "" }}> Transform -
+
@@ -1029,7 +1032,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openFields = !this.openFields)} style={{ backgroundColor: this.openFields ? "black" : "" }}> Fields {"&"} Tags -
+
@@ -1050,7 +1053,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openContexts = !this.openContexts)} style={{ backgroundColor: this.openContexts ? "black" : "" }}> Contexts -
+
@@ -1064,7 +1067,7 @@ export class PropertiesView extends React.Component { onPointerDown={action(() => this.openLayout = !this.openLayout)} style={{ backgroundColor: this.openLayout ? "black" : "" }}> Layout -
+
@@ -1072,6 +1075,14 @@ export class PropertiesView extends React.Component { ; } + toggleAnchor = () => { + this.selectedDoc.anchor = !this.selectedDoc.anchor + } + + toggleArrow = () => { + this.selectedDoc.arrow = !this.selectedDoc.arrow + } + /** @@ -1095,6 +1106,57 @@ export class PropertiesView extends React.Component { ; } else { + if (this.selectedDoc && this.isLink) { + return
+
+ Linking +
+
+ Information +
+

Label

+ +
+
+

Label

+ +
+
+

Description

+ +
+
+
+ Behavior +
+ Follow + +
+
+ Auto-move anchor +
+
+ Auto-move arrow +
+
+
; + } if (this.selectedDoc && !this.isPres) { return
{ onPointerDown={action(() => { this.openPresTransitions = !this.openPresTransitions; })} style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>     Transitions -
+
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 { + 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 - 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]}`} /> + { + console.log(this.props.LinkDocs[0].directed) + }} /> {textX === undefined ? (null) : {Field.toString(this.props.LinkDocs[0].description as any as Field)} } -- cgit v1.2.3-70-g09d2 From 428b90b9e2e902b82f3406a5062f8be6950f4862 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Fri, 29 Oct 2021 12:05:28 -0400 Subject: style properties panel --- src/client/views/PropertiesView.scss | 38 ++++++++++++++++++++ src/client/views/PropertiesView.tsx | 40 +++++++++++----------- .../CollectionFreeFormLinkView.tsx | 4 +-- 3 files changed, 59 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 554f137cb..b75e7182c 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -2,6 +2,7 @@ .propertiesView { height: 100%; + width: 250; font-family: "Roboto"; cursor: auto; @@ -836,3 +837,40 @@ .properties-flyout { grid-column: 2/4; } + +.propertiesView-linking { + padding: 5%; +} + +.propertiesView-section { + padding: 10px 0; +} + +.propertiesView-input { + padding: 4px 8px; + + .text { + width: 100%; + } + + &.first { + padding-top: 6px; + } + + &.inline { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + +.propertiesView-label { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); +} \ No newline at end of file diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 334a44b3b..b5bae6652 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1111,25 +1111,25 @@ export class PropertiesView extends React.Component {
Linking
-
- Information -
+
+

Information

+

Label

- +
-
-

Label

- +
+

Category

+
-
+

Description

- +
-
- Behavior -
- Follow +
+

Behavior

+
+

Follow

-
- Auto-move anchor +
+

Auto-move anchor

-
- Auto-move arrow +
+

Auto-move arrow

-
; +
; } if (this.selectedDoc && !this.isPres) { return
{ - console.log(this.props.LinkDocs[0].directed) - }} /> + 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]}`} /> {textX === undefined ? (null) : {Field.toString(this.props.LinkDocs[0].description as any as Field)} } -- cgit v1.2.3-70-g09d2 From 54bdf1a1549e57d6d28ae977706b601384fdc3c4 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Sat, 30 Oct 2021 15:03:59 -0400 Subject: edit link description --- src/client/views/PropertiesView.tsx | 62 +++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index b5bae6652..69224312a 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -31,6 +31,7 @@ import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; import { DefaultStyleProvider } from "./StyleProvider"; +import { LinkManager } from "../util/LinkManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -1084,6 +1085,55 @@ export class PropertiesView extends React.Component { } + @observable + description = Field.toString(LinkManager.currentLink?.description as any as Field); + @observable + follow = Field.toString(LinkManager.currentLink?.follow as any as Field); + + @action + handleDescriptionChange = (e: React.ChangeEvent) => { this.description = e.target.value; } + + @undoBatch + setDescripValue = action((value: string) => { + if (LinkManager.currentLink) { + Doc.GetProto(LinkManager.currentLink).description = value; + return true; + } + }); + + @undoBatch + changeFollowBehavior = action((follow: string) => { + if (LinkManager.currentLink) { + Doc.GetProto(LinkManager.currentLink).followLinkLocation = follow; + return true; + } + }); + + onSelectOut = () => { + this.setDescripValue(this.description); + document.getElementById('input')?.blur(); + } + + onDescriptionKey = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + this.setDescripValue(this.description); + document.getElementById('input')?.blur(); + } + } + + @computed + get editDescription() { + return + } /** * Handles adding and removing members from the sharing panel @@ -1123,7 +1173,7 @@ export class PropertiesView extends React.Component {

Description

- + {this.editDescription}
@@ -1131,8 +1181,14 @@ export class PropertiesView extends React.Component {

Follow

- - +
-- cgit v1.2.3-70-g09d2 From d8fa6bd455bcb0c4b42fa5409a8e6340927aaaff Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Mon, 1 Nov 2021 00:04:13 -0400 Subject: implement auto-move anchor and fix changing follow behavior --- src/client/views/PropertiesView.tsx | 49 +++++++++++-------------------------- 1 file changed, 14 insertions(+), 35 deletions(-) (limited to 'src') 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 {
; } - 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 { @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 { } } + toggleAnchor = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove))); + } + @computed get editDescription() { return { name="selectList" id="selectList" onChange={e => this.changeFollowBehavior(e.currentTarget.value)} - value={this.getCurrentFollow()}> + value={StrCast(this.selectedDoc.followLinkLocation, "default")}> @@ -1203,7 +1187,7 @@ export class PropertiesView extends React.Component { - {this.getCurrLink()?.linksToAnnotation + {this.selectedDoc.linksToAnnotation ? : null} @@ -1211,16 +1195,11 @@ export class PropertiesView extends React.Component {

Auto-move anchor

-
-

Auto-move arrow

-
; -- cgit v1.2.3-70-g09d2 From 6a8eee54689f4bbe24c884895e0d2af1f06c4aad Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 4 Nov 2021 14:20:58 -0400 Subject: change color of line, remove input --- src/client/views/PropertiesView.tsx | 6 +----- .../collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 3 ++- 2 files changed, 3 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 301936219..d65db3a6b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1157,11 +1157,7 @@ export class PropertiesView extends React.Component {

Information

-
-

Label

- -
-
+

Category

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 5391061b1..9d256f18b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -12,6 +12,7 @@ import { DocumentView } from "../../nodes/DocumentView"; import "./CollectionFreeFormLinkView.scss"; import React = require("react"); import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; +import { Colors } from "../../global/globalEnums"; export interface CollectionFreeFormLinkViewProps { @@ -213,7 +214,7 @@ export class CollectionFreeFormLinkView extends React.Component - {textX === undefined ? (null) : -- cgit v1.2.3-70-g09d2 From acbd47f286ffe05fb025151990c3128bee8e5d20 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 4 Nov 2021 16:04:27 -0400 Subject: working on link relationships --- src/client/views/PropertiesView.tsx | 122 ++++++++++++++++++++++++++++++++---- 1 file changed, 110 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index d65db3a6b..dd6e0e3e7 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -6,7 +6,7 @@ import { intersection } from "lodash"; import { action, autorun, computed, Lambda, observable } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc"; +import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; import { List } from "../../fields/List"; @@ -1079,14 +1079,86 @@ export class PropertiesView extends React.Component { @observable description = Field.toString(LinkManager.currentLink?.description as any as Field); + // @observable + // linkRelationship = Field.toString(LinkManager.currentLink?.linkRelationship as any as Field); + @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship); + @observable + private relationshipButtonColor: string = ""; - @action - handleDescriptionChange = (e: React.ChangeEvent) => { this.description = e.target.value; } + // @action + // handleDescriptionChange = (e: React.ChangeEvent) => { this.description = e.target.value; } + // handleRelationshipChange = (e: React.ChangeEvent) => { this.relationship = e.target.value; } + + @undoBatch + handleDescriptionChange = action((value: string) => { + if (LinkManager.currentLink) { + // this.description = value; + console.log("changing description to " + value) + this.selectedDoc.description = value; + return true; + } + }); + + @undoBatch + handleLinkRelationshipChange = action((value: string) => { + if (LinkManager.currentLink) { + // this.relationship = value; + console.log("changing linkRelationship to " + value) + this.selectedDoc.relationship = value; + return true; + } + }); @undoBatch setDescripValue = action((value: string) => { if (LinkManager.currentLink) { Doc.GetProto(LinkManager.currentLink).description = value; + console.log("the link description was set to " + Doc.GetProto(LinkManager.currentLink).description) + // this.selectedDoc.description = value; + // this.description = value; + return true; + } + }); + + @undoBatch + setLinkRelationshipValue = action((value: string) => { + if (LinkManager.currentLink) { + const prevRelationship = LinkManager.currentLink.linkRelationship as string; + LinkManager.currentLink.linkRelationship = value; + Doc.GetProto(LinkManager.currentLink).linkRelationship = value; + const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList); + const linkRelationshipSizes = NumListCast(Doc.UserDoc().linkRelationshipSizes); + const linkColorList = StrListCast(Doc.UserDoc().linkColorList); + + // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color + if (!linkRelationshipList?.includes(value)) { + linkRelationshipList.push(value); + linkRelationshipSizes.push(1); + const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"; + linkColorList.push(randColor); + // if the relationship is already in the list AND the new rel is different from the prev rel, update the rel sizes + } else if (linkRelationshipList && value !== prevRelationship) { + const index = linkRelationshipList.indexOf(value); + //increment size of new relationship size + if (index !== -1 && index < linkRelationshipSizes.length) { + const pvalue = linkRelationshipSizes[index]; + linkRelationshipSizes[index] = (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1); + } + //decrement the size of the previous relationship if it already exists (i.e. not default 'link' relationship upon link creation) + if (linkRelationshipList.includes(prevRelationship)) { + const pindex = linkRelationshipList.indexOf(prevRelationship); + if (pindex !== -1 && pindex < linkRelationshipSizes.length) { + const pvalue = linkRelationshipSizes[pindex]; + linkRelationshipSizes[pindex] = Math.max(0, (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1)); + } + } + + } + this.relationshipButtonColor = "rgb(62, 133, 55)"; + console.log("the linkRelationship was set to " + Doc.GetProto(LinkManager.currentLink).linkRelationship) + // this.selectedDoc.relationship = value; + // this.relationship = value; + setTimeout(action(() => this.relationshipButtonColor = ""), 750); return true; } }); @@ -1099,15 +1171,27 @@ export class PropertiesView extends React.Component { } }); - onSelectOut = () => { + onSelectOutDesc = () => { this.setDescripValue(this.description); - document.getElementById('input')?.blur(); + document.getElementById('link_description_input')?.blur(); } onDescriptionKey = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.setDescripValue(this.description); - document.getElementById('input')?.blur(); + document.getElementById('link_description_input')?.blur(); + } + } + + onSelectOutRelationship = () => { + this.setLinkRelationshipValue(this.relationship); + document.getElementById('link_relationship_input')?.blur(); + } + + onRelationshipKey = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + this.setLinkRelationshipValue(this.relationship); + document.getElementById('link_relationship_input')?.blur(); } } @@ -1115,15 +1199,29 @@ export class PropertiesView extends React.Component { setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove))); } + @computed + get editRelationship() { + return this.handleLinkRelationshipChange(e.currentTarget.value)} + className="text" + type="text" + /> + } + @computed get editDescription() { return this.handleDescriptionChange(e.currentTarget.value)} className="text" type="text" /> @@ -1158,8 +1256,8 @@ export class PropertiesView extends React.Component {

Information

-

Category

- +

Link Relationship

+ {this.editRelationship}

Description

-- cgit v1.2.3-70-g09d2 From 6d789877e2bec0812060fce9cfded2780d2e772b Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 4 Nov 2021 16:36:30 -0400 Subject: link relationships working --- src/client/views/PropertiesView.tsx | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index dd6e0e3e7..2d461f7ef 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1077,13 +1077,9 @@ export class PropertiesView extends React.Component {
; } - @observable - description = Field.toString(LinkManager.currentLink?.description as any as Field); - // @observable - // linkRelationship = Field.toString(LinkManager.currentLink?.linkRelationship as any as Field); + @observable description = Field.toString(LinkManager.currentLink?.description as any as Field); @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship); - @observable - private relationshipButtonColor: string = ""; + @observable private relationshipButtonColor: string = ""; // @action // handleDescriptionChange = (e: React.ChangeEvent) => { this.description = e.target.value; } @@ -1092,9 +1088,8 @@ export class PropertiesView extends React.Component { @undoBatch handleDescriptionChange = action((value: string) => { if (LinkManager.currentLink) { - // this.description = value; - console.log("changing description to " + value) this.selectedDoc.description = value; + this.description = value; return true; } }); @@ -1102,9 +1097,8 @@ export class PropertiesView extends React.Component { @undoBatch handleLinkRelationshipChange = action((value: string) => { if (LinkManager.currentLink) { - // this.relationship = value; - console.log("changing linkRelationship to " + value) - this.selectedDoc.relationship = value; + this.selectedDoc.linkRelationship = value; + this.relationship = value; return true; } }); @@ -1113,9 +1107,6 @@ export class PropertiesView extends React.Component { setDescripValue = action((value: string) => { if (LinkManager.currentLink) { Doc.GetProto(LinkManager.currentLink).description = value; - console.log("the link description was set to " + Doc.GetProto(LinkManager.currentLink).description) - // this.selectedDoc.description = value; - // this.description = value; return true; } }); @@ -1155,9 +1146,6 @@ export class PropertiesView extends React.Component { } this.relationshipButtonColor = "rgb(62, 133, 55)"; - console.log("the linkRelationship was set to " + Doc.GetProto(LinkManager.currentLink).linkRelationship) - // this.selectedDoc.relationship = value; - // this.relationship = value; setTimeout(action(() => this.relationshipButtonColor = ""), 750); return true; } @@ -1204,7 +1192,7 @@ export class PropertiesView extends React.Component { return this.handleLinkRelationshipChange(e.currentTarget.value)} -- cgit v1.2.3-70-g09d2 From 8f0353357f58ada81b40bd76d1958e35cbe21ea0 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Tue, 9 Nov 2021 15:10:48 -0500 Subject: added arrowhead --- .../CollectionFreeFormLinkView.tsx | 30 +++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 9d256f18b..27a34a9fa 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -154,6 +154,25 @@ export class CollectionFreeFormLinkView extends React.Component { + let hex = c.toString(16); + return hex.length == 1 ? "0" + hex : hex; + } + + rgbToHex = (rgbString: string) => { + let rgbVals = [] + for (let i = 0; i < rgbString.length; i++) { + if (parseInt(rgbString[i])) { + let curr = '' + while (parseInt(rgbString[i]) != NaN) { + curr += (rgbString[i]) + } + rgbVals.push(parseInt(curr)) + } + } + return "#" + this.componentToHex(rgbVals[0]) + this.componentToHex(rgbVals[1]) + this.componentToHex(rgbVals[2]); + } + @computed.struct get renderData() { this._start; SnappingManager.GetIsDragging(); const { A, B, LinkDocs } = this.props; @@ -208,15 +227,24 @@ export class CollectionFreeFormLinkView extends React.Component= linkColorList.length ? "black" : linkColorList[currRelationshipIndex]; + console.log(stroke) + console.log(this.rgbToHex(stroke)) //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has) //thickness varies linearly from 3px to 12px for increasing link count 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) : (<> + + + + + + 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]}`} + marker-end="url(#arrowhead)" /> {textX === undefined ? (null) : {Field.toString(this.props.LinkDocs[0].description as any as Field)} } -- cgit v1.2.3-70-g09d2 From fc9d892e1ae344bf12b5bc3fc7ff0fb5867d7dba Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 11 Nov 2021 15:53:16 -0500 Subject: color arrow head --- .../CollectionFreeFormLinkView.tsx | 25 +++++++++++----------- 1 file changed, 12 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 27a34a9fa..43f181849 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -160,17 +160,17 @@ export class CollectionFreeFormLinkView extends React.Component { - let rgbVals = [] - for (let i = 0; i < rgbString.length; i++) { - if (parseInt(rgbString[i])) { - let curr = '' - while (parseInt(rgbString[i]) != NaN) { - curr += (rgbString[i]) + if (rgbString != "black") { + const splitString = rgbString.split(/rgb|\(|\)|,| /) + let values: number[] = [] + splitString.forEach(elt => { + if (elt) { + values.push(parseInt(elt)) } - rgbVals.push(parseInt(curr)) - } + }) + return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]); } - return "#" + this.componentToHex(rgbVals[0]) + this.componentToHex(rgbVals[1]) + this.componentToHex(rgbVals[2]); + return "#000000" } @computed.struct get renderData() { @@ -227,8 +227,7 @@ export class CollectionFreeFormLinkView extends React.Component= linkColorList.length ? "black" : linkColorList[currRelationshipIndex]; - console.log(stroke) - console.log(this.rgbToHex(stroke)) + const hexStroke = this.rgbToHex(stroke) //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has) //thickness varies linearly from 3px to 12px for increasing link count @@ -238,13 +237,13 @@ export class CollectionFreeFormLinkView extends React.Component - + + markerEnd="url(#arrowhead)" /> {textX === undefined ? (null) : {Field.toString(this.props.LinkDocs[0].description as any as Field)} } -- cgit v1.2.3-70-g09d2 From f350591b82012d94a8217d5096094de183de7bb8 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 18 Nov 2021 11:34:38 -0500 Subject: added arrow toggling functionality --- src/client/views/PropertiesView.scss | 4 ++++ src/client/views/PropertiesView.tsx | 17 ++++++++++++++++- .../collectionFreeForm/CollectionFreeFormLinkView.tsx | 8 +++++++- src/fields/documentSchemas.ts | 1 + 4 files changed, 28 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index b75e7182c..437df4739 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -863,6 +863,10 @@ align-items: center; justify-content: space-between; } + + .propertiesButton { + width: 4rem; + } } .propertiesView-label { diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 2d461f7ef..936003dce 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAnchor } from '@fortawesome/free-solid-svg-icons' +import { faAnchor, faArrowRight } 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"; @@ -1187,6 +1187,10 @@ export class PropertiesView extends React.Component { setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove))); } + toggleArrow = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.displayArrow = !this.selectedDoc.displayArrow))); + } + @computed get editRelationship() { return {
+
+

Display arrow

+ +
; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 43f181849..da4edbaa2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -233,6 +233,12 @@ export class CollectionFreeFormLinkView extends React.Component + markerEnd={this.props.LinkDocs[0].displayArrow ? "url(#arrowhead)" : ""} /> {textX === undefined ? (null) : {Field.toString(this.props.LinkDocs[0].description as any as Field)} } diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts index db2c6ca5b..73157d268 100644 --- a/src/fields/documentSchemas.ts +++ b/src/fields/documentSchemas.ts @@ -93,6 +93,7 @@ export const documentSchema = createSchema({ layers: listSpec("string"), // which layers the document is part of _lockedPosition: "boolean", // whether the document can be moved (dragged) _lockedTransform: "boolean",// whether a freeformview can pan/zoom + displayArrow: "boolean", // toggles directed arrows // drag drop properties _stayInCollection: "boolean",// whether document can be dropped into a different collection -- cgit v1.2.3-70-g09d2 From dc66d6b71bb723df43a2bbc4cd0611fdcc6fe886 Mon Sep 17 00:00:00 2001 From: Lauren Choi Date: Thu, 18 Nov 2021 11:36:19 -0500 Subject: remove console.log statement --- .../views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index da4edbaa2..f2e33cf23 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -233,8 +233,6 @@ export class CollectionFreeFormLinkView extends React.Component Date: Thu, 18 Nov 2021 11:42:24 -0500 Subject: change arrow color --- .../CollectionFreeFormLinkView.tsx | 38 +++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index f2e33cf23..a9a997853 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -154,24 +154,24 @@ export class CollectionFreeFormLinkView extends React.Component { - let hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; - } + // componentToHex = (c: number) => { + // let hex = c.toString(16); + // return hex.length == 1 ? "0" + hex : hex; + // } - rgbToHex = (rgbString: string) => { - if (rgbString != "black") { - const splitString = rgbString.split(/rgb|\(|\)|,| /) - let values: number[] = [] - splitString.forEach(elt => { - if (elt) { - values.push(parseInt(elt)) - } - }) - return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]); - } - return "#000000" - } + // rgbToHex = (rgbString: string) => { + // if (rgbString != "black") { + // const splitString = rgbString.split(/rgb|\(|\)|,| /) + // let values: number[] = [] + // splitString.forEach(elt => { + // if (elt) { + // values.push(parseInt(elt)) + // } + // }) + // return "#" + this.componentToHex(values[0]) + this.componentToHex(values[1]) + this.componentToHex(values[2]); + // } + // return "#000000" + // } @computed.struct get renderData() { this._start; SnappingManager.GetIsDragging(); @@ -227,7 +227,7 @@ export class CollectionFreeFormLinkView extends React.Component= linkColorList.length ? "black" : linkColorList[currRelationshipIndex]; - const hexStroke = this.rgbToHex(stroke) + // const hexStroke = this.rgbToHex(stroke) //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has) //thickness varies linearly from 3px to 12px for increasing link count @@ -241,7 +241,7 @@ export class CollectionFreeFormLinkView extends React.Component - +