aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/LinkBox.tsx
diff options
context:
space:
mode:
authorFawn <fangrui_tong@brown.edu>2019-06-19 22:27:21 -0400
committerFawn <fangrui_tong@brown.edu>2019-06-19 22:27:21 -0400
commitc5e401cb0a7fec2279ceecbc8d1429dcdd2f04b9 (patch)
treed7e3b77890c3c4f3be0dca1da9c4aae71ecaead7 /src/client/views/nodes/LinkBox.tsx
parentf362dbfc237536c6c4a8c6d088c3dc818080f7c2 (diff)
buttons on cut links functional except for when dragged from link menu
Diffstat (limited to 'src/client/views/nodes/LinkBox.tsx')
-rw-r--r--src/client/views/nodes/LinkBox.tsx107
1 files changed, 0 insertions, 107 deletions
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
deleted file mode 100644
index 8d07547ed..000000000
--- a/src/client/views/nodes/LinkBox.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from "mobx-react";
-import { DocumentManager } from "../../util/DocumentManager";
-import { undoBatch } from "../../util/UndoManager";
-import './LinkBox.scss';
-import React = require("react");
-import { Doc } from '../../../new_fields/Doc';
-import { StrCast, Cast } from '../../../new_fields/Types';
-import { observable, action } from 'mobx';
-import { LinkManager } from '../../util/LinkManager';
-import { DragLinksAsDocuments, DragLinkAsDocument } from '../../util/DragManager';
-import { SelectionManager } from '../../util/SelectionManager';
-library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);
-
-
-interface Props {
- groupType: string;
- linkDoc: Doc;
- sourceDoc: Doc;
- destinationDoc: Doc;
- showEditor: () => void;
-}
-
-@observer
-export class LinkBox extends React.Component<Props> {
- private _drag = React.createRef<HTMLDivElement>();
- @observable private _showMore: boolean = false;
- @action toggleShowMore() { this._showMore = !this._showMore; }
-
- @undoBatch
- onFollowLink = async (e: React.PointerEvent): Promise<void> => {
- e.stopPropagation();
- DocumentManager.Instance.jumpToDocument(this.props.destinationDoc, e.altKey);
- }
-
- onEdit = (e: React.PointerEvent): void => {
- e.stopPropagation();
- this.props.showEditor();
- }
-
- renderMetadata = (): JSX.Element => {
- let groups = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc);
- let index = groups.findIndex(groupDoc => StrCast(groupDoc.type).toUpperCase() === this.props.groupType.toUpperCase());
- let groupDoc = index > -1 ? groups[index] : undefined;
-
- let mdRows: Array<JSX.Element> = [];
- if (groupDoc) {
- let mdDoc = Cast(groupDoc.metadata, Doc, new Doc);
- let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
- mdRows = keys!.map(key => {
- return (<div key={key} className="link-metadata-row"><b>{key}</b>: {StrCast(mdDoc[key])}</div>);
- });
- }
-
- return (<div className="link-metadata">{mdRows}</div>);
- }
-
- onLinkButtonDown = (e: React.PointerEvent): void => {
- e.stopPropagation();
- document.removeEventListener("pointermove", this.onLinkButtonMoved);
- document.addEventListener("pointermove", this.onLinkButtonMoved);
- document.removeEventListener("pointerup", this.onLinkButtonUp);
- document.addEventListener("pointerup", this.onLinkButtonUp);
- }
-
- onLinkButtonUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onLinkButtonMoved);
- document.removeEventListener("pointerup", this.onLinkButtonUp);
- e.stopPropagation();
- }
-
- onLinkButtonMoved = async (e: PointerEvent) => {
- if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) {
- document.removeEventListener("pointermove", this.onLinkButtonMoved);
- document.removeEventListener("pointerup", this.onLinkButtonUp);
-
- DragLinkAsDocument(this._drag.current, e.x, e.y, this.props.linkDoc, this.props.sourceDoc);
- }
- e.stopPropagation();
- }
-
- render() {
-
- let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
- let canExpand = keys ? keys.length > 0 : false;
-
- return (
- <div className="linkMenu-item">
- <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
- <div className="link-name">
- <p>{StrCast(this.props.destinationDoc.title)}</p>
- <div className="linkMenu-item-buttons">
- {canExpand ? <div title="Show more" className="button" onPointerDown={() => this.toggleShowMore()}>
- <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
- <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
- <div title="Follow link" className="button" ref={this._drag} onPointerDown={this.onLinkButtonDown} onPointerUp={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
- </div>
- </div>
- {this._showMore ? this.renderMetadata() : <></>}
- </div>
-
- </div >
- );
- }
-} \ No newline at end of file