aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/LinkBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/LinkBox.tsx')
-rw-r--r--src/client/views/nodes/LinkBox.tsx83
1 files changed, 52 insertions, 31 deletions
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 2593491cc..f01905ee1 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -50,15 +51,19 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
this._props.setContentViewBox?.(this);
this._disposers.deleting = reaction(
() => !this.anchor1 && !this.anchor2 && this.DocumentView?.() && (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView!())),
- empty => empty && ((this._hackToSeeIfDeleted = setTimeout(() =>
- (!this.anchor1 && !this.anchor2) && this._props.removeDocument?.(this.Document)
- )), 1000) // prettier-ignore
+ empty => {
+ if (empty) {
+ this._hackToSeeIfDeleted = setTimeout(() => {
+ !this.anchor1 && !this.anchor2 && this._props.removeDocument?.(this.Document);
+ }, 1000);
+ }
+ }
);
this._disposers.dragging = reaction(
() => SnappingManager.IsDragging,
() => setTimeout( action(() => {// need to wait for drag manager to set 'hidden' flag on dragged DOM elements
- const a = this.anchor1,
- b = this.anchor2;
+ const a = this.anchor1;
+ const b = this.anchor2;
let a1 = a && document.getElementById(a.ViewGuid);
let a2 = b && document.getElementById(b.ViewGuid);
// test whether the anchors themselves are hidden,...
@@ -67,7 +72,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
// .. or whether any 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;
+ this._hide = !!(a1 || a2);
}
})) // prettier-ignore
);
@@ -92,24 +97,25 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
a.Document[DocCss];
b.Document[DocCss];
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const axf = a.screenToViewTransform(); // these force re-render when a or b moves (so do NOT remove)
const bxf = b.screenToViewTransform();
const scale = docView?.screenToViewTransform().Scale ?? 1;
const at = a.getBounds?.transition; // these force re-render when a or b change size and at the end of an animated transition
const bt = b.getBounds?.transition; // inquring getBounds() also causes text anchors to update whether or not they reflow (any size change triggers an invalidation)
- var foundParent = false;
+ let foundParent = false;
const getAnchor = (field: FieldResult): Element[] => {
const docField = DocCast(field);
const doc = docField?.layout_unrendered ? DocCast(docField.annotationOn, docField) : docField;
const ele = document.getElementById(DocumentView.UniquifyId(LightboxView.Contains(this.DocumentView?.()), doc[Id]));
if (ele?.className === 'linkBox-label') foundParent = true;
if (ele?.getBoundingClientRect().width) return [ele];
- const eles = Array.from(document.getElementsByClassName(doc[Id])).filter(ele => ele?.getBoundingClientRect().width);
+ const eles = Array.from(document.getElementsByClassName(doc[Id])).filter(el => el?.getBoundingClientRect().width);
const annoOn = DocCast(doc.annotationOn);
if (eles.length || !annoOn) return eles;
const pareles = getAnchor(annoOn);
- foundParent = pareles.length ? true : false;
+ foundParent = !!pareles.length;
return pareles;
};
// if there's an element in the DOM with a classname containing a link anchor's id (eg a hypertext <a>),
@@ -122,26 +128,38 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
const aid = targetAhyperlinks?.find(alink => container?.contains(alink))?.id ?? targetAhyperlinks?.lastElement()?.id;
const bid = targetBhyperlinks?.find(blink => container?.contains(blink))?.id ?? targetBhyperlinks?.lastElement()?.id;
if (!aid || !bid) {
- setTimeout(action(() => (this._forceAnimate = this._forceAnimate + 0.01)));
+ setTimeout(
+ action(() => {
+ this._forceAnimate += 0.01;
+ })
+ );
return null;
}
if (foundParent) {
setTimeout(
- action(() => (this._forceAnimate = this._forceAnimate + 0.01)),
+ action(() => {
+ this._forceAnimate += 0.01;
+ }),
1
);
}
- if (at || bt) setTimeout(action(() => (this._forceAnimate = this._forceAnimate + 0.01))); // this forces an update during a transition animation
+ if (at || bt)
+ setTimeout(
+ action(() => {
+ this._forceAnimate += 0.01;
+ })
+ ); // this forces an update during a transition animation
const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting);
const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined;
const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color);
const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily);
const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize);
const fontColor = (c => (c !== 'transparent' ? c : undefined))(StrCast(this.layoutDoc.link_fontColor));
- const { stroke_markerScale, stroke_width, stroke_startMarker, stroke_endMarker, stroke_dash } = this.Document;
+ // eslint-disable-next-line camelcase
+ const { stroke_markerScale: strokeMarkerScale, stroke_width: strokeRawWidth, stroke_startMarker: strokeStartMarker, stroke_endMarker: strokeEndMarker, stroke_dash: strokeDash } = this.Document;
- const strokeWidth = NumCast(stroke_width, 4);
+ const strokeWidth = NumCast(strokeRawWidth, 4);
const linkDesc = StrCast(this.dataDoc.link_description) || ' ';
const labelText = linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '');
return (
@@ -152,12 +170,12 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
start={aid}
end={bid} //
strokeWidth={strokeWidth + Math.max(2, strokeWidth * 0.1)}
- showHead={stroke_startMarker ? true : false}
- showTail={stroke_endMarker ? true : false}
- headSize={NumCast(stroke_markerScale, 3)}
- tailSize={NumCast(stroke_markerScale, 3)}
- tailShape={stroke_endMarker === 'dot' ? 'circle' : 'arrow1'}
- headShape={stroke_startMarker === 'dot' ? 'circle' : 'arrow1'}
+ showHead={!!strokeStartMarker}
+ showTail={!!strokeEndMarker}
+ headSize={NumCast(strokeMarkerScale, 3)}
+ tailSize={NumCast(strokeMarkerScale, 3)}
+ tailShape={strokeEndMarker === 'dot' ? 'circle' : 'arrow1'}
+ headShape={strokeStartMarker === 'dot' ? 'circle' : 'arrow1'}
color={highlightColor}
/>
)}
@@ -166,23 +184,23 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
start={aid}
end={bid} //
strokeWidth={strokeWidth}
- dashness={Number(stroke_dash) ? true : false}
- showHead={stroke_startMarker ? true : false}
- showTail={stroke_endMarker ? true : false}
- headSize={NumCast(stroke_markerScale, 3)}
- tailSize={NumCast(stroke_markerScale, 3)}
- tailShape={stroke_endMarker === 'dot' ? 'circle' : 'arrow1'}
- headShape={stroke_startMarker === 'dot' ? 'circle' : 'arrow1'}
+ dashness={!!Number(strokeDash)}
+ showHead={!!strokeStartMarker}
+ showTail={!!strokeEndMarker}
+ headSize={NumCast(strokeMarkerScale, 3)}
+ tailSize={NumCast(strokeMarkerScale, 3)}
+ tailShape={strokeEndMarker === 'dot' ? 'circle' : 'arrow1'}
+ headShape={strokeStartMarker === 'dot' ? 'circle' : 'arrow1'}
color={color}
labels={
<div
id={this.DocumentView?.().DocUniqueId}
- className={'linkBox-label'}
+ className="linkBox-label"
style={{
borderRadius: '8px',
pointerEvents: this._props.isDocumentActive?.() ? 'all' : undefined,
fontSize,
- fontFamily /*, fontStyle: 'italic'*/,
+ fontFamily /* , fontStyle: 'italic' */,
color: fontColor || lightOrDark(DashColor(color).fade(0.5).toString()),
paddingLeft: 4,
paddingRight: 4,
@@ -223,16 +241,19 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
setTimeout(
- action(() => (this._forceAnimate = this._forceAnimate + 1)),
+ action(() => {
+ this._forceAnimate += 1;
+ }),
2
);
return (
<div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}>
<ComparisonBox
+ // eslint-disable-next-line react/jsx-props-no-spreading
{...this.props} //
fieldKey="link_anchor"
setHeight={emptyFunction}
- dontRegisterView={true}
+ dontRegisterView
renderDepth={this._props.renderDepth + 1}
addDocument={returnFalse}
removeDocument={returnFalse}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 07:31:54 +0000