diff options
Diffstat (limited to 'src/client/views/nodes/LinkBox.tsx')
| -rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 51 |
1 files changed, 28 insertions, 23 deletions
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 30cd65cb4..134f2e14a 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -1,7 +1,7 @@ -import React = require('react'); import { Bezier } from 'bezier-js'; -import { computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, NumCast, StrCast } from '../../../fields/Types'; import { aggregateBounds, emptyFunction, returnAlways, returnFalse, Utils } from '../../../Utils'; @@ -20,23 +20,28 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { return FieldView.LayoutString(LinkBox, fieldKey); } + constructor(props: any) { + super(props); + makeObservable(this); + } + onClickScriptDisable = returnAlways; @computed get anchor1() { const anchor1 = DocCast(this.dataDoc.link_anchor_1); const anchor_1 = anchor1?.layout_unrendered ? DocCast(anchor1.annotationOn) : anchor1; - return DocumentManager.Instance.getDocumentView(anchor_1, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement()); + return DocumentManager.Instance.getDocumentView(anchor_1, this._props.docViewPath()[this._props.docViewPath().length - 2]); // this._props.docViewPath().lastElement()); } @computed get anchor2() { const anchor2 = DocCast(this.dataDoc.link_anchor_2); const anchor_2 = anchor2?.layout_unrendered ? DocCast(anchor2.annotationOn) : anchor2; - return DocumentManager.Instance.getDocumentView(anchor_2, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement()); + return DocumentManager.Instance.getDocumentView(anchor_2, this._props.docViewPath()[this._props.docViewPath().length - 2]); // this._props.docViewPath().lastElement()); } screenBounds = () => { if (this.layoutDoc._layout_isSvg && this.anchor1 && this.anchor2 && this.anchor1.CollectionFreeFormView) { - const a_invXf = this.anchor1.props.ScreenToLocalTransform().inverse(); - const b_invXf = this.anchor2.props.ScreenToLocalTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(this.anchor1.rootDoc._width), NumCast(this.anchor1.rootDoc._height)) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(this.anchor2.rootDoc._width), NumCast(this.anchor2.rootDoc._height)) }; + const a_invXf = this.anchor1._props.ScreenToLocalTransform().inverse(); + const b_invXf = this.anchor2._props.ScreenToLocalTransform().inverse(); + const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(this.anchor1.Document._width), NumCast(this.anchor1.Document._height)) }; + const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(this.anchor2.Document._width), NumCast(this.anchor2.Document._height)) }; const pts = [] as number[][]; pts.push([(a_scrBds.tl[0] + a_scrBds.br[0]) / 2, (a_scrBds.tl[1] + a_scrBds.br[1]) / 2]); @@ -54,19 +59,19 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { }; disposer: IReactionDisposer | undefined; componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentView?.(this); this.disposer = reaction( () => { if (this.layoutDoc._layout_isSvg && (this.anchor1 || this.anchor2)?.CollectionFreeFormView) { const a = (this.anchor1 ?? this.anchor2)!; const b = (this.anchor2 ?? this.anchor1)!; - const parxf = this.props.docViewPath()[this.props.docViewPath().length - 2].ComponentView as CollectionFreeFormView; - const this_xf = parxf?.screenToLocalXf ?? Transform.Identity; //this.props.ScreenToLocalTransform(); - const a_invXf = a.props.ScreenToLocalTransform().inverse(); - const b_invXf = b.props.ScreenToLocalTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(a.rootDoc._width), NumCast(a.rootDoc._height)) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(b.rootDoc._width), NumCast(b.rootDoc._height)) }; + const parxf = this._props.docViewPath()[this._props.docViewPath().length - 2].ComponentView as CollectionFreeFormView; + const this_xf = parxf?.screenToLocalXf ?? Transform.Identity; //this._props.ScreenToLocalTransform(); + const a_invXf = a._props.ScreenToLocalTransform().inverse(); + const b_invXf = b._props.ScreenToLocalTransform().inverse(); + const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(a.Document._width), NumCast(a.Document._height)) }; + const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(b.Document._width), NumCast(b.Document._height)) }; const a_bds = { tl: this_xf.transformPoint(a_scrBds.tl[0], a_scrBds.tl[1]), br: this_xf.transformPoint(a_scrBds.br[0], a_scrBds.br[1]) }; const b_bds = { tl: this_xf.transformPoint(b_scrBds.tl[0], b_scrBds.tl[1]), br: this_xf.transformPoint(b_scrBds.br[0], b_scrBds.br[1]) }; @@ -103,10 +108,10 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { componentWillUnmount(): void { this.disposer?.(); } - @observable renderProps: { lx: number; rx: number; ty: number; by: number; pts: number[][] } | undefined; + @observable renderProps: { lx: number; rx: number; ty: number; by: number; pts: number[][] } | undefined = undefined; render() { if (this.renderProps) { - const highlight = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Highlighting); + const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined; const bez = new Bezier(this.renderProps.pts.map(p => ({ x: p[0], y: p[1] }))); @@ -131,7 +136,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { <path className="collectionfreeformlinkview-linkLine" style={{ - pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', // + pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', // stroke: highlightColor ?? 'lightblue', strokeDasharray, strokeWidth, @@ -142,7 +147,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { /> <text filter={`url(#${this.Document[Id] + 'background'})`} - style={{ pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }} + style={{ pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }} x={text.x - lx} y={text.y - ty}> <tspan> </tspan> @@ -154,14 +159,14 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { ); } return ( - <div className={`linkBox-container${this.props.isContentActive() ? '-interactive' : ''}`} style={{ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor) }}> + <div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}> <ComparisonBox - {...this.props} + {...this._props} fieldKey="link_anchor" setHeight={emptyFunction} dontRegisterView={true} - renderDepth={this.props.renderDepth + 1} - isContentActive={this.props.isContentActive} + renderDepth={this._props.renderDepth + 1} + isContentActive={this._props.isContentActive} addDocument={returnFalse} removeDocument={returnFalse} moveDocument={returnFalse} |