From 81bd2378ffa753e851390c2616e66a71d23c9989 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 9 Feb 2021 12:16:25 -0500 Subject: started to cleanup LinkDocPreview, LinkMenu. --- src/client/views/linking/LinkMenu.scss | 40 +++-------- src/client/views/linking/LinkMenu.tsx | 76 ++++++-------------- src/client/views/linking/LinkMenuGroup.tsx | 10 +-- src/client/views/linking/LinkMenuItem.tsx | 112 +++++++++-------------------- 4 files changed, 69 insertions(+), 169 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index ebf8878cb..a90bf8b0a 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -4,29 +4,23 @@ width: auto; height: auto; position: absolute; - z-index: 20001; - - .linkMenu-list { + z-index: 2001; + .linkMenu-list, + .linkMenu-listEditor + { display: inline-block; - + position: relative; border: 1px solid black; - box-shadow: 3px 3px 1.5px grey; + background: white; + min-width: 170px; max-height: 170px; overflow-y: scroll; - position: relative; z-index: 10; - background: white; - min-width: 170px; - //border-radius: 5px; - //padding-top: 6.5px; - //padding-bottom: 6.5px; - //padding-left: 6.5px; - //padding-right: 2px; - //width: calc(auto + 50px); - + } + .linkMenu-list { white-space: nowrap; overflow-x: hidden; width: 240px; @@ -40,22 +34,6 @@ scrollbar-color: rgb(201, 239, 252); } } - - .linkMenu-listEditor { - - display: inline-block; - - border: 1px solid black; - - box-shadow: 3px 3px 1.5px grey; - - max-height: 170px; - overflow-y: scroll; - position: relative; - z-index: 10; - background: white; - min-width: 170px; - } } .linkMenu-group { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index b32022024..8cd069210 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -13,49 +13,28 @@ import React = require("react"); interface Props { docView: DocumentView; changeFlyout: () => void; - docprops: DocumentViewSharedProps; } @observer export class LinkMenu extends React.Component { - - @observable private _editingLink?: Doc; - @observable private _linkMenuRef = React.createRef(); private _editorRef = React.createRef(); + @observable _editingLink?: Doc; + @observable _linkMenuRef = React.createRef(); - //@observable private _numLinks: number = 0; - - // @computed get overflow() { - // if (this._numLinks) { - // return "scroll"; - // } - // return "auto"; - // } - - @action - onClick = (e: PointerEvent) => { - - LinkDocPreview.LinkInfo = undefined; - - - if (this._linkMenuRef && !this._linkMenuRef.current?.contains(e.target as any)) { - if (this._editorRef && !this._editorRef.current?.contains(e.target as any)) { - DocumentLinksButton.EditLink = undefined; - } - } - } - @action - componentDidMount() { - this._editingLink = undefined; - document.addEventListener("pointerdown", this.onClick); + @computed get position() { + return ((dv) => ({ x: dv?.left || 0, y: dv?.top || 0, r: dv?.right || 0, b: dv?.bottom || 0 }))(this.props.docView.getBounds()); } - componentWillUnmount() { - document.removeEventListener("pointerdown", this.onClick); - } + componentDidMount() { document.addEventListener("pointerdown", this.onPointerDown); } + componentWillUnmount() { document.removeEventListener("pointerdown", this.onPointerDown); } - clearAllLinks = () => { - LinkManager.Instance.deleteAllLinksOnAnchor(this.props.docView.props.Document); + onPointerDown = (e: PointerEvent) => { + LinkDocPreview.Clear(); + if (this._linkMenuRef && this._editorRef && + !this._linkMenuRef.current?.contains(e.target as any) && + !this._editorRef.current?.contains(e.target as any)) { + DocumentLinksButton.ClearLinkEditor(); + } } renderAllGroups = (groups: Map>): Array => { @@ -66,32 +45,23 @@ export class LinkMenu extends React.Component { sourceDoc={this.props.docView.props.Document} group={group[1]} groupType={group[0]} - showEditor={action(linkDoc => this._editingLink = linkDoc)} - docprops={this.props.docprops} />); + showEditor={action(linkDoc => this._editingLink = linkDoc)} />); return linkItems.length ? linkItems : [

No links have been created yet. Drag the linking button onto another document to create a link.

]; } - @computed - get position() { - const docView = this.props.docView.getBounds(); - return { x: docView?.left || 0, y: docView?.top || 0, r: docView?.right || 0, b: docView?.bottom || 0 }; - } - render() { const sourceDoc = this.props.docView.props.Document; - const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); - return
- {!this._editingLink ? -
- {this.renderAllGroups(groups)} -
: + return
+ {this._editingLink ?
- this._editingLink = undefined)} /> -
- } - + this._editingLink = undefined)} /> +
: +
+ {this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))} +
}
; } } \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 7db908393..74af78234 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -3,7 +3,7 @@ import { Doc } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { Cast } from "../../../fields/Types"; import { LinkManager } from "../../util/LinkManager"; -import { DocumentView, DocumentViewSharedProps } from "../nodes/DocumentView"; +import { DocumentView } from "../nodes/DocumentView"; import './LinkMenu.scss'; import { LinkMenuItem } from "./LinkMenuItem"; import React = require("react"); @@ -13,14 +13,11 @@ interface LinkMenuGroupProps { group: Doc[]; groupType: string; showEditor: (linkDoc: Doc) => void; - docprops: DocumentViewSharedProps; docView: DocumentView; } @observer export class LinkMenuGroup extends React.Component { - - private _drag = React.createRef(); private _menuRef = React.createRef(); render() { @@ -31,7 +28,6 @@ export class LinkMenuGroup extends React.Component { if (destination && this.props.sourceDoc) { return { return (
-
-

{this.props.groupType}:

+

{this.props.groupType}:

-
{groupItems}
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index e9a0486d1..e9866f6e3 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -6,7 +6,7 @@ import { observer } from "mobx-react"; import { Doc, DocListCast } from '../../../fields/Doc'; import { Cast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; -import { emptyFunction, setupMoveUpEvents } from '../../../Utils'; +import { emptyFunction, setupMoveUpEvents, returnFalse } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from '../../util/DragManager'; @@ -18,6 +18,7 @@ import { DocumentView, DocumentViewSharedProps } from '../nodes/DocumentView'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; import './LinkMenuItem.scss'; import React = require("react"); +import { setup } from 'mocha'; interface LinkMenuItemProps { @@ -27,7 +28,6 @@ interface LinkMenuItemProps { sourceDoc: Doc; destinationDoc: Doc; showEditor: (linkDoc: Doc) => void; - docprops: DocumentViewSharedProps; menuRef: React.Ref; } @@ -69,9 +69,6 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume @observer export class LinkMenuItem extends React.Component { private _drag = React.createRef(); - private _downX = 0; - private _downY = 0; - private _eleClone: any; _editRef = React.createRef(); _buttonRef = React.createRef(); @@ -81,84 +78,45 @@ export class LinkMenuItem extends React.Component { onEdit = (e: React.PointerEvent): void => { LinkManager.currentLink = this.props.linkDoc; - setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc)); - } - - editMoved = (e: PointerEvent) => { - const dragData = new DragManager.DocumentDragData([this.props.linkDoc]); - DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y); - return true; + setupMoveUpEvents(this, e, e => { + DragManager.StartDocumentDrag([this._editRef.current!], new DragManager.DocumentDragData([this.props.linkDoc]), e.x, e.y); + return true; + }, emptyFunction, () => this.props.showEditor(this.props.linkDoc)); } - @action onLinkButtonDown = (e: React.PointerEvent): void => { - this._downX = e.clientX; - this._downY = e.clientY; - this._eleClone = this._drag.current!.cloneNode(true); - e.stopPropagation(); - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.addEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - document.addEventListener("pointerup", this.onLinkButtonUp); - - if (this._buttonRef && !!!this._buttonRef.current?.contains(e.target as any)) { - LinkDocPreview.LinkInfo = undefined; - } - } - - onLinkButtonUp = action((e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false); - LinkDocPreview.LinkInfo = undefined; - DocumentLinksButton.EditLink = undefined; - - e.stopPropagation(); - }); - - onLinkButtonMoved = async (e: PointerEvent) => { - if (this._drag.current !== null && Math.abs((e.clientX - this._downX) * (e.clientX - this._downX) + (e.clientY - this._downY) * (e.clientY - this._downY)) > 5) { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - - this._eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`; - StartLinkTargetsDrag(this._eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]); - } - e.stopPropagation(); + setupMoveUpEvents(this, e, + e => { + const eleClone: any = this._drag.current!.cloneNode(true); + eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`; + StartLinkTargetsDrag(eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]); + DocumentLinksButton.ClearLinkEditor(); + return true; + }, + emptyFunction, + () => { + DocumentLinksButton.ClearLinkEditor(); + LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false); + }); } - @undoBatch - @action deleteLink = (e: React.PointerEvent): void => { - this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); - LinkManager.Instance.deleteLink(this.props.linkDoc); - e.stopPropagation(); - - runInAction(() => { - LinkDocPreview.LinkInfo = undefined; - DocumentLinksButton.EditLink = undefined; - }); + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => { + this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); + LinkManager.Instance.deleteLink(this.props.linkDoc); + }))); } - @undoBatch - @action autoMove = (e: React.PointerEvent) => { - e.stopPropagation(); - this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove; + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove))); } - @undoBatch - @action showLink = (e: React.PointerEvent) => { - e.stopPropagation(); - this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay; + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay))); } - @undoBatch - @action showAnchor = (e: React.PointerEvent) => { - e.stopPropagation(); - this.props.linkDoc.hidden = !this.props.linkDoc.hidden; + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.hidden = !this.props.linkDoc.hidden))); } render() { @@ -180,13 +138,13 @@ export class LinkMenuItem extends React.Component {
LinkDocPreview.LinkInfo = undefined)} - onPointerEnter={action(e => this.props.linkDoc && (LinkDocPreview.LinkInfo = { - docprops: this.props.docprops, + onPointerLeave={LinkDocPreview.Clear} + onPointerEnter={e => this.props.linkDoc && LinkDocPreview.SetLinkInfo({ + docprops: this.props.docView.props, linkSrc: this.props.sourceDoc, linkDoc: this.props.linkDoc, Location: [e.clientX, e.clientY + 20] - }))} + })} onPointerDown={this.onLinkButtonDown}>
@@ -205,26 +163,26 @@ export class LinkMenuItem extends React.Component {
{this.props.linkDoc.hidden ? "Show Anchor" : "Hide Anchor"}
}> -
+
e.stopPropagation()}>
{!this.props.linkDoc.linkDisplay ? "Show link" : "Hide link"}
}> -
+
e.stopPropagation()}>
{!this.props.linkDoc.linkAutoMove ? "Auto move dot" : "Freeze dot position"}
}> -
+
e.stopPropagation()}>
Edit Link
}> -
+
e.stopPropagation()}>
Delete Link
}> -
+
e.stopPropagation()}>
-- cgit v1.2.3-70-g09d2