1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import Xarrow from 'react-xarrows';
import { DocCss, DocData } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { DocCast, NumCast, StrCast } from '../../../fields/Types';
import { DashColor, emptyFunction, lightOrDark, returnFalse } from '../../../Utils';
import { DocumentManager } from '../../util/DocumentManager';
import { LinkManager } from '../../util/LinkManager';
import { SnappingManager } from '../../util/SnappingManager';
import { ViewBoxBaseComponent } from '../DocComponent';
import { EditableView } from '../EditableView';
import { LightboxView } from '../LightboxView';
import { StyleProp } from '../StyleProvider';
import { ComparisonBox } from './ComparisonBox';
import { FieldView, FieldViewProps } from './FieldView';
import './LinkBox.scss';
@observer
export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string = 'link') {
return FieldView.LayoutString(LinkBox, fieldKey);
}
disposer: IReactionDisposer | undefined;
@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) {
super(props);
makeObservable(this);
}
@computed get anchor1() { return this.anchor(1); } // prettier-ignore
@computed get anchor2() { return this.anchor(2); } // prettier-ignore
anchor = (which: number) => {
const anch = DocCast(this.dataDoc['link_anchor_' + which]);
const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch;
return DocumentManager.Instance.getDocumentView(anchor, this.DocumentView?.().containerViewPath?.().lastElement());
};
componentWillUnmount() {
this.disposer?.();
}
componentDidMount() {
this._props.setContentViewBox?.(this);
this.disposer = reaction(
() => ({ drag: SnappingManager.IsDragging }),
({ drag }) => {
!LightboxView.Contains(this.DocumentView?.()) &&
setTimeout(
// 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;
}
})
);
},
{ fireImmediately: true }
);
}
render() {
if (this._hide) return null;
const a = this.anchor1;
const b = this.anchor2;
this._forceAnimate;
const docView = this._props.docViewPath().lastElement();
if (a && b && !LightboxView.Contains(docView)) {
// text selection bounds are not directly observable, so we have to
// force an update when anything that could affect them changes (text edits causing reflow, scrolling)
a.Document[a.LayoutFieldKey];
b.Document[b.LayoutFieldKey];
a.Document.layout_scrollTop;
b.Document.layout_scrollTop;
a.Document[DocCss];
b.Document[DocCss];
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)
// if there's an element in the DOM with a classname containing a link anchor's id (eg a hypertext <a>),
// then that DOM element is a hyperlink source for the current anchor and we want to place our link box at it's top right
// otherwise, we just use the computed nearest point on the document boundary to the target Document
const targetAhyperlink = Array.from(document.getElementsByClassName(DocCast(this.dataDoc.link_anchor_1)[Id])).lastElement();
const targetBhyperlink = Array.from(document.getElementsByClassName(DocCast(this.dataDoc.link_anchor_2)[Id])).lastElement();
const aid = targetAhyperlink?.id || a.Document[Id];
const bid = targetBhyperlink?.id || b.Document[Id];
if (!document.getElementById(aid) || !document.getElementById(bid)) {
setTimeout(action(() => (this._forceAnimate = this._forceAnimate + 0.01)));
return null;
}
if (at || bt) setTimeout(action(() => (this._forceAnimate = 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;
const strokeWidth = NumCast(stroke_width, 4);
const linkDesc = StrCast(this.dataDoc.link_description) || ' ';
const labelText = linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '');
return (
<>
{!highlightColor ? null : (
<Xarrow
divContainerStyle={{ transform: `scale(${scale})` }}
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'}
color={highlightColor}
/>
)}
<Xarrow
divContainerStyle={{ transform: `scale(${scale})` }}
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'}
color={color}
labels={
<div
style={{
borderRadius: '8px',
pointerEvents: this._props.isDocumentActive?.() ? 'all' : undefined,
fontSize,
fontFamily /*, fontStyle: 'italic'*/,
color: fontColor || lightOrDark(DashColor(color).fade(0.5).toString()),
paddingLeft: 4,
paddingRight: 4,
paddingTop: 3,
paddingBottom: 3,
background: DashColor((!docView?.isSelected() && highlightColor) || color)
.fade(0.5)
.toString(),
}}>
<EditableView
key="editableView"
oneLine
contents={labelText}
height={fontSize + 4}
fontSize={fontSize}
GetValue={() => linkDesc}
SetValue={action(val => {
this.Document[DocData].link_description = val;
return true;
})}
/>
{/* <EditableText
placeholder={labelText}
background={color}
color={fontColor || lightOrDark(DashColor(color).fade(0.5).toString())}
type={Type.PRIM}
val={StrCast(this.Document[DocData].link_description)}
setVal={action(val => (this.Document[DocData].link_description = val))}
fillWidth
/> */}
</div>
}
passProps={{}}
/>
</>
);
}
return (
<div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}>
<ComparisonBox
{...this.props} //
fieldKey="link_anchor"
setHeight={emptyFunction}
dontRegisterView={true}
renderDepth={this._props.renderDepth + 1}
addDocument={returnFalse}
removeDocument={returnFalse}
moveDocument={returnFalse}
/>
</div>
);
}
}
|
