aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/PropertiesView.tsx49
-rw-r--r--src/client/views/linking/LinkMenuItem.scss32
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx14
-rw-r--r--src/client/views/nodes/LinkBox.tsx16
4 files changed, 58 insertions, 53 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 3ae2362a1..e4e7bec32 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -41,6 +41,7 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
import { StyleProviderFuncType } from './nodes/FieldView';
import { KeyValueBox } from './nodes/KeyValueBox';
import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
+import { LinkBox } from './nodes/LinkBox';
const _global = (window /* browser */ || global) /* node */ as any;
interface PropertiesViewProps {
@@ -69,6 +70,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.Document || Doc.ActiveDashboard;
}
+ @computed get selectedLink() {
+ return this.selectedDocumentView?.ComponentView instanceof LinkBox ? this.selectedDocumentView.Document : LinkManager.Instance.currentLink;
+ }
+
@computed get selectedLayoutDoc() {
return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard;
}
@@ -110,7 +115,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
componentDidMount() {
this._disposers.link = reaction(
- () => LinkManager.Instance.currentLink,
+ () => this.selectedLink,
link => {
link && this.CloseAll();
link && (this.openLinks = true);
@@ -583,11 +588,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
</>
</p>
) : null}
- {LinkManager.Instance.currentLink?.title ? (
+ {this.selectedLink?.title ? (
<p className="propertiesView-titleExtender">
<>
<b>Link:</b>
- {LinkManager.Instance.currentLink.title}
+ {this.selectedLink.title}
</>
</p>
) : null}
@@ -1190,10 +1195,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
@computed get description() {
- return Field.toString(LinkManager.Instance.currentLink?.link_description as any as Field);
+ return Field.toString(this.selectedLink?.link_description as any as Field);
}
@computed get relationship() {
- return StrCast(LinkManager.Instance.currentLink?.link_relationship);
+ return StrCast(this.selectedLink?.link_relationship);
}
@observable private relationshipButtonColor: string = '';
@@ -1203,7 +1208,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
handleDescriptionChange = undoable(
action((value: string) => {
- if (LinkManager.Instance.currentLink && this.selectedDoc) {
+ if (this.selectedLink) {
this.setDescripValue(value);
}
}),
@@ -1212,7 +1217,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
handlelinkRelationshipChange = undoable(
action((value: string) => {
- if (LinkManager.Instance.currentLink && this.selectedDoc) {
+ if (this.selectedLink) {
this.setlinkRelationshipValue(value);
}
}),
@@ -1221,17 +1226,17 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@undoBatch
setDescripValue = action((value: string) => {
- if (LinkManager.Instance.currentLink) {
- Doc.GetProto(LinkManager.Instance.currentLink).link_description = value;
+ if (this.selectedLink) {
+ this.selectedLink[DocData].link_description = value;
}
});
@undoBatch
setlinkRelationshipValue = action((value: string) => {
- if (LinkManager.Instance.currentLink) {
- const prevRelationship = StrCast(LinkManager.Instance.currentLink.link_relationship);
- LinkManager.Instance.currentLink.link_relationship = value;
- Doc.GetProto(LinkManager.Instance.currentLink).link_relationship = value;
+ if (this.selectedLink) {
+ const prevRelationship = StrCast(this.selectedLink.link_relationship);
+ this.selectedLink.link_relationship = value;
+ Doc.GetProto(this.selectedLink).link_relationship = value;
const linkRelationshipList = StrListCast(Doc.UserDoc().link_relationshipList);
const linkRelationshipSizes = NumListCast(Doc.UserDoc().link_relationshipSizes);
const linkColorList = StrListCast(Doc.UserDoc().link_ColorList);
@@ -1315,11 +1320,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
};
toggleLinkProp = (e: React.PointerEvent, prop: string) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[prop] = !LinkManager.Instance.currentLink[prop]))));
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedLink && (this.selectedLink[prop] = !this.selectedLink[prop]))));
};
@computed get destinationAnchor() {
- const ldoc = LinkManager.Instance.currentLink;
+ const ldoc = this.selectedLink;
const lanch = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor;
if (ldoc && lanch) return LinkManager.getOppositeAnchor(ldoc, lanch) ?? lanch;
return ldoc ? DocCast(ldoc.link_anchor_2) : ldoc;
@@ -1328,7 +1333,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get sourceAnchor() {
const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor;
- return selAnchor ?? (LinkManager.Instance.currentLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(LinkManager.Instance.currentLink, this.destinationAnchor) : LinkManager.Instance.currentLink);
+ return selAnchor ?? (this.selectedLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(this.selectedLink, this.destinationAnchor) : this.selectedLink);
}
toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: any = true, ovalue: any = false, cb: (val: any) => any = val => val) => {
@@ -1354,7 +1359,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
autoComplete={'off'}
id="link_relationship_input"
- value={StrCast(LinkManager.Instance.currentLink?.link_relationship)}
+ value={StrCast(this.selectedLink?.link_relationship)}
onKeyDown={this.onRelationshipKey}
onBlur={this.onSelectOutRelationship}
onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)}
@@ -1371,7 +1376,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
autoComplete="off"
style={{ textAlign: 'left', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
id="link_description_input"
- value={StrCast(LinkManager.Instance.currentLink?.link_description)}
+ value={StrCast(this.selectedLink?.link_description)}
onKeyDown={this.onDescriptionKey}
onBlur={this.onSelectOutDesc}
onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
@@ -1393,7 +1398,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
const targZoom = this.sourceAnchor?.followLinkZoom;
const indent = 30;
- const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!);
+ const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(this.selectedLink!);
return (
<>
@@ -1424,7 +1429,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
<option value={OpenWhere.add}>Opening in new tab</option>
<option value={OpenWhere.replace}>Replacing current tab</option>
<option value={OpenWhere.inParent}>Opening in same collection</option>
- {LinkManager.Instance.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
+ {this.selectedLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
</select>
</div>
<div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
@@ -1609,7 +1614,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
render() {
const isNovice = Doc.noviceMode;
- const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!);
+ const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(this.selectedLink!);
if (!this.selectedDoc && !this.isPres) {
return (
<div className="propertiesView" style={{ width: this._props.width }}>
@@ -1643,7 +1648,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
{this.fieldsSubMenu}
{this.optionsSubMenu}
{this.linksSubMenu}
- {!LinkManager.Instance.currentLink || !this.openLinks ? null : this.linkProperties}
+ {!this.selectedLink || !this.openLinks ? null : this.linkProperties}
{this.inkSubMenu}
{this.contextsSubMenu}
{isNovice ? null : this.sharingSubMenu}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 44c74236f..66ddd6eca 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -18,6 +18,21 @@
align-items: center;
display: flex;
+ .linkMenu-icon-wrapper {
+ //border: 0.5px solid rgb(161, 161, 161);
+ margin-right: 2px;
+ padding-right: 2px;
+
+ .linkMenu-icon {
+ float: left;
+ width: 12px;
+ height: 12px;
+ padding: 1px;
+ margin-right: 3px;
+ // color: rgb(161, 161, 161);
+ }
+ }
+
.linkMenu-text {
width: 100%;
@@ -34,22 +49,6 @@
display: flex;
align-items: center;
min-height: 20px;
-
- .destination-icon-wrapper {
- //border: 0.5px solid rgb(161, 161, 161);
- margin-right: 2px;
- padding-right: 2px;
-
- .destination-icon {
- float: left;
- width: 12px;
- height: 12px;
- padding: 1px;
- margin-right: 3px;
- // color: rgb(161, 161, 161);
- }
- }
-
.linkMenu-destination-title {
text-decoration: none;
font-size: 13px;
@@ -111,7 +110,6 @@
//@extend: right;
position: relative;
display: flex;
- opacity: 0;
.linkMenu-deleteButton {
width: 20px;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index a44ad26cd..e694806a5 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -178,8 +178,13 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
onPointerDown={this.onLinkButtonDown}>
<div className="linkMenu-item-buttons">
<Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
- <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
+ <div className="linkMenu-icon-wrapper" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="linkMenu-icon" icon="edit" size="sm" />
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">Show/Hide Link</div>}>
+ <div title="click to show link" className="linkMenu-icon-wrapper" onPointerDown={this.onIconDown}>
+ <FontAwesomeIcon className="linkMenu-icon" icon={destinationIcon} size="sm" />
</div>
</Tooltip>
</div>
@@ -206,11 +211,6 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
</p>
) : null}
<div className="linkMenu-title-wrapper">
- <Tooltip title={<div className="dash-tooltip">Show/Hide Link</div>}>
- <div title="click to show link" className="destination-icon-wrapper" onPointerDown={this.onIconDown}>
- <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
- </div>
- </Tooltip>
<Tooltip title={<div className="dash-tooltip">Follow Link</div>}>
<p className="linkMenu-destination-title">
{this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 998f4f7aa..decdbb240 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -23,7 +23,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
return FieldView.LayoutString(LinkBox, fieldKey);
}
disposer: IReactionDisposer | undefined;
- @observable _forceAnimate = 0; // forces xArrow to animate when a transition is detected on something that affects an anchor
+ @observable _forceAnimate = 0; // forces xArrow to animate when a transition animation is detected on something that affects an anchor
@observable _hide = false; // don't render if anchor is not visible since that breaks xAnchor
constructor(props: FieldViewProps) {
@@ -38,22 +38,26 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch;
return DocumentManager.Instance.getDocumentView(anchor, this.DocumentView?.().containerViewPath?.().lastElement());
};
- componentWillUnmount(): void {
+ componentWillUnmount() {
this.disposer?.();
}
componentDidMount() {
this._props.setContentViewBox?.(this);
this.disposer = reaction(
- () => ({ drag: SnappingManager.IsDragging, a: this.anchor1, b: this.anchor2 }),
- ({ drag, a, b }) => {
+ () => ({ drag: SnappingManager.IsDragging }),
+ ({ drag }) => {
!LightboxView.Contains(this.DocumentView?.()) &&
setTimeout(
- // need to wait for drag manager to set 'hidden' flag on dragged elements
+ // need to wait for drag manager to set 'hidden' flag on dragged DOM elements
action(() => {
+ const a = this.anchor1,
+ b = this.anchor2;
let a1 = a && document.getElementById(a.Guid);
let a2 = b && document.getElementById(b.Guid);
+ // test whether the anchors themselves are hidden,...
if (!a1 || !a2 || (a?.ContentDiv as any)?.hidden || (b?.ContentDiv as any)?.hidden) this._hide = true;
else {
+ // .. or whether and of their DOM parents are hidden
for (; a1 && !a1.hidden; a1 = a1.parentElement);
for (; a2 && !a2.hidden; a2 = a2.parentElement);
this._hide = a1 || a2 ? true : false;
@@ -65,8 +69,6 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
}
- select = (ctrlKey: boolean, shiftKey: boolean) => (LinkManager.Instance.currentLink = this.Document);
-
render() {
if (this._hide) return null;
const a = this.anchor1;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 12:52:20 +0000