diff options
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 34 |
3 files changed, 41 insertions, 14 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7e424d8f0..5fd9d5fe4 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -120,7 +120,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume const hpoints = InteractionUtils.CreatePolyline(data, left, top, this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), - "none", "none", undefined, scaleX, scaleY, "", "visiblepainted", false, true); + "none", "none", undefined, scaleX, scaleY, "", this.props.Document._isBackground ? "none" : "visiblepainted", false, true); //points for adding const apoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth, @@ -178,7 +178,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> </svg>); const handleLines = handleLine.map((pts, i) => - <svg height="100" width="100" key={`line${i}`}> + <svg height="100" width="100" key={`line${i}`} > <line x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="green" strokeWidth={String(Number(dotsize) / 2)} display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> @@ -191,7 +191,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume return ( <svg className="inkingStroke" style={{ - pointerEvents: this.props.Document.isInkMask ? "all" : "none", + pointerEvents: this.props.Document.isInkMask && !this.props.Document._isBackground ? "all" : "none", transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined, mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset", overflow: "visible", diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 4cf257640..c81bd068c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -40,6 +40,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo if (SnappingManager.GetIsDragging() || !A.ContentDiv || !B.ContentDiv) return; setTimeout(action(() => this._opacity = 1), 0); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render() setTimeout(action(() => (!LinkDocs.length || !linkDoc.linkDisplay) && (this._opacity = 0.05)), 750); // this will unhighlight the link line. + if (!linkDoc.linkAutoMove) return; const acont = A.props.Document.type === DocumentType.LINK ? A.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : []; const bcont = B.props.Document.type === DocumentType.LINK ? B.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : []; const adiv = (acont.length ? acont[0] : A.ContentDiv); @@ -60,6 +61,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const linkEles = Array.from(window.document.getElementsByClassName(linkDoc[Id])); const targetAhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes((linkDoc[afield] as Doc)[Id])); const targetBhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes((linkDoc[bfield] as Doc)[Id])); + if ((!targetAhyperlink && !a.width) || (!targetBhyperlink && !b.width)) return; if (!targetBhyperlink) { A.rootDoc[afield + "_x"] = (apt.point.x - aleft) / awidth * 100; A.rootDoc[afield + "_y"] = (apt.point.y - atop) / aheight * 100; @@ -101,8 +103,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const top = rect.top, height = rect.height; var el = el.parentNode; while (el && el !== document.body) { - if (el.hasOwnProperty("getBoundingClientRect")) { - rect = el.getBoundingClientRect(); + rect = el?.getBoundingClientRect(); + if (rect?.width) { if (top <= rect.bottom === false && getComputedStyle(el).overflow === "hidden") return rect.bottom; // Check if the element is out of view due to a container scrolling if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top; @@ -117,8 +119,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const left = rect.left, width = rect.width; var el = el.parentNode; while (el && el !== document.body) { - if (el.hasOwnProperty("getBoundingClientRect")) { - rect = el.getBoundingClientRect(); + rect = el?.getBoundingClientRect(); + if (rect?.width) { if (left <= rect.right === false && getComputedStyle(el).overflow === "hidden") return rect.right; // Check if the element is out of view due to a container scrolling if ((left + width) <= rect.left && getComputedStyle(el).overflow === "hidden") return rect.left; @@ -138,11 +140,14 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const adiv = (acont.length ? acont[0] : A.ContentDiv); const bdiv = (bcont.length ? bcont[0] : B.ContentDiv); for (let apdiv = adiv; apdiv; apdiv = apdiv.parentElement as any) if ((apdiv as any).hidden) return; - for (let apdiv = bdiv; apdiv; apdiv = apdiv.parentElement as any) if ((apdiv as any).hidden) return; + for (let bpdiv = bdiv; bpdiv; bpdiv = bpdiv.parentElement as any) if ((bpdiv as any).hidden) return; const a = adiv.getBoundingClientRect(); const b = bdiv.getBoundingClientRect(); const atop = this.visibleY(adiv); const btop = this.visibleY(bdiv); + if (!a.width || !b.width) return undefined; + const atop2 = this.visibleY(adiv); + const btop2 = this.visibleY(bdiv); const aleft = this.visibleX(adiv); const bleft = this.visibleX(bdiv); const clipped = aleft !== a.left || atop !== a.top || bleft !== b.left || btop !== b.top; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 5c9123876..b9e240ba2 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -174,14 +174,26 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { @undoBatch @action - showLink = () => { - this.props.linkDoc.hidden = !this.props.linkDoc.hidden; + autoMove = (e: React.PointerEvent) => { + e.stopPropagation(); + this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove; } - render() { + @undoBatch + @action + showLink = (e: React.PointerEvent) => { + e.stopPropagation(); + this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay; + } - const eyeIcon = this.props.linkDoc.hidden ? "eye-slash" : "eye"; + @undoBatch + @action + showAnchor = (e: React.PointerEvent) => { + e.stopPropagation(); + this.props.linkDoc.hidden = !this.props.linkDoc.hidden; + } + render() { let destinationIcon: FontAwesomeIconProps["icon"] = "question"; switch (this.props.destinationDoc.type) { case DocumentType.IMG: destinationIcon = "image"; break; @@ -243,9 +255,19 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { <div className="linkMenu-item-buttons" ref={this._buttonRef} > - <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show link" : "Hide link"}</div></>}> + <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show Anchor" : "Hide Anchor"}</div></>}> + <div className="button" ref={this._editRef} onPointerDown={this.showAnchor}> + <FontAwesomeIcon className="fa-icon" icon={this.props.linkDoc.hidden ? "eye-slash" : "eye"} size="sm" /></div> + </Tooltip> + + <Tooltip title={<><div className="dash-tooltip">{!this.props.linkDoc.linkDisplay ? "Show link" : "Hide link"}</div></>}> <div className="button" ref={this._editRef} onPointerDown={this.showLink}> - <FontAwesomeIcon className="fa-icon" icon={eyeIcon} size="sm" /></div> + <FontAwesomeIcon className="fa-icon" icon={!this.props.linkDoc.linkDisplay ? "eye-slash" : "eye"} size="sm" /></div> + </Tooltip> + + <Tooltip title={<><div className="dash-tooltip">{!this.props.linkDoc.linkAutoMove ? "Auto move dot" : "Freeze dot position"}</div></>}> + <div className="button" ref={this._editRef} onPointerDown={this.autoMove}> + <FontAwesomeIcon className="fa-icon" icon={this.props.linkDoc.linkAutoMove ? "play" : "pause"} size="sm" /></div> </Tooltip> <Tooltip title={<><div className="dash-tooltip">Edit Link</div></>}> |