diff options
| -rw-r--r-- | src/client/views/PropertiesView.scss | 4 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 8 | ||||
| -rw-r--r-- | src/fields/documentSchemas.ts | 1 |
4 files changed, 28 insertions, 2 deletions
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<PropertiesViewProps> { 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 <input @@ -1279,10 +1283,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <button style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.linkAutoMove ? "" : "#4476f7", borderRadius: 3 }} onPointerDown={this.toggleAnchor} onClick={e => e.stopPropagation()} + className="propertiesButton" > <FontAwesomeIcon className="fa-icon" icon={faAnchor} size="lg" /> </button> </div> + <div className="propertiesView-input inline" id="propertiesView-displayArrow"> + <p>Display arrow</p> + <button + style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.displayArrow ? "" : "#4476f7", borderRadius: 3 }} + onPointerDown={this.toggleArrow} onClick={e => e.stopPropagation()} + className="propertiesButton" + > + <FontAwesomeIcon className="fa-icon" icon={faArrowRight} size="lg" /> + </button> + </div> </div> </div >; } 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<CollectionFreeFo //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"; + console.log(this.props.LinkDocs[0].displayArrow) + + if (this.props.LinkDocs[0].displayArrow == undefined) { + this.props.LinkDocs[0].displayArrow = false; + } + return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<> <defs> <marker id="arrowhead" markerWidth="4" markerHeight="3" @@ -243,7 +249,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? Colors.MEDIUM_BLUE : stroke, strokeWidth }} onClick={this.onClickLine} 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]}`} - markerEnd="url(#arrowhead)" /> + markerEnd={this.props.LinkDocs[0].displayArrow ? "url(#arrowhead)" : ""} /> {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>} 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 |