diff options
Diffstat (limited to 'src/client/views/nodes/LinkAnchorBox.tsx')
| -rw-r--r-- | src/client/views/nodes/LinkAnchorBox.tsx | 46 |
1 files changed, 25 insertions, 21 deletions
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index ec8c43ab4..d86dfd7b1 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -1,24 +1,25 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../../fields/Doc"; +import { Doc } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; +import { Id } from "../../../fields/FieldSymbols"; import { makeInterface } from "../../../fields/Schema"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { Utils, setupMoveUpEvents, emptyFunction } from '../../../Utils'; -import { DocumentManager } from "../../util/DocumentManager"; +import { TraceMobx } from "../../../fields/util"; +import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils'; import { DragManager } from "../../util/DragManager"; -import { ViewBoxBaseComponent } from "../DocComponent"; -import "./LinkAnchorBox.scss"; -import { FieldView, FieldViewProps } from "./FieldView"; -import React = require("react"); -import { ContextMenuProps } from "../ContextMenuItem"; +import { LinkManager } from "../../util/LinkManager"; +import { SelectionManager } from "../../util/SelectionManager"; import { ContextMenu } from "../ContextMenu"; +import { ContextMenuProps } from "../ContextMenuItem"; +import { ViewBoxBaseComponent } from "../DocComponent"; import { LinkEditor } from "../linking/LinkEditor"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { SelectionManager } from "../../util/SelectionManager"; -import { TraceMobx } from "../../../fields/util"; -import { Id } from "../../../fields/FieldSymbols"; +import { StyleProp } from "../StyleProvider"; +import { FieldView, FieldViewProps } from "./FieldView"; +import "./LinkAnchorBox.scss"; import { LinkDocPreview } from "./LinkDocPreview"; +import React = require("react"); const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -68,14 +69,15 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch this.props.select(false); } if (!this._doubleTap && !e.ctrlKey && e.button < 2) { - const anchorContainerDoc = this.props.ContainingCollectionDoc; // bcz: hack! need a better prop for passing the anchor's container + const anchorContainerDoc = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); this._editing = true; anchorContainerDoc && this.props.bringToFront(anchorContainerDoc, false); if (anchorContainerDoc && !this.layoutDoc.onClick && !this._isOpen) { this._timeout = setTimeout(action(() => { - DocumentManager.Instance.FollowLink(this.rootDoc, anchorContainerDoc, (doc, where) => this.props.addDocTab(doc, where), false); + LinkManager.FollowLink(this.rootDoc, anchorContainerDoc, this.props, false); this._editing = false; }), 300 - (Date.now() - this._lastTap)); + e.stopPropagation(); } } else { this._timeout && clearTimeout(this._timeout); @@ -92,7 +94,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch openLinkTargetOnRight = (e: React.MouseEvent) => { const alias = Doc.MakeAlias(Cast(this.layoutDoc[this.fieldKey], Doc, null)); alias.isLinkButton = undefined; - alias._isBackground = undefined; + alias.layers = undefined; alias.layoutKey = "layout"; this.props.addDocTab(alias, "add:right"); } @@ -117,7 +119,8 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch const small = this.props.PanelWidth() <= 1; // this happens when rendered in a treeView const x = NumCast(this.rootDoc[this.fieldKey + "_x"], 100); const y = NumCast(this.rootDoc[this.fieldKey + "_y"], 100); - const c = StrCast(this.layoutDoc._backgroundColor, StrCast(this.layoutDoc.backgroundColor, StrCast(this.dataDoc.backgroundColor, "lightBlue"))); // note this is not where the typical lightBlue default color comes from. See Documents.Create.LinkDocument() + const linkSource = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); + const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor); const anchor = this.fieldKey === "anchor1" ? "anchor2" : "anchor1"; const anchorScale = !this.dataDoc[this.fieldKey + "-useLinkSmallAnchor"] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : .25; @@ -134,17 +137,18 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch return <div className={`linkAnchorBox-cont${small ? "-small" : ""} ${this.rootDoc[Id]}`} onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} onPointerEnter={action(e => LinkDocPreview.LinkInfo = { - addDocTab: this.props.addDocTab, - linkSrc: this.props.ContainingCollectionDoc!, + docprops: this.props, + linkSrc: linkSource, linkDoc: this.rootDoc, Location: [e.clientX, e.clientY + 20] })} onPointerDown={this.onPointerDown} onClick={this.onClick} title={targetTitle} onContextMenu={this.specificContextMenu} - ref={this._ref} style={{ - background: c, + ref={this._ref} + style={{ + background, left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`, top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`, - transform: `scale(${anchorScale / this.props.ContentScaling()})` + transform: `scale(${anchorScale})` }} > {!this._editing && !this._forceOpen ? (null) : <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout} open={this._forceOpen ? true : undefined} onOpen={() => this._isOpen = true} onClose={action(() => this._isOpen = this._forceOpen = this._editing = false)}> |