diff options
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 24 |
1 files changed, 14 insertions, 10 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index cab0e744f..2966c2a22 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1321,7 +1321,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps @observable _isHovering = false; @observable _: string = ''; _hoverTimeout: any = undefined; - @computed get renderDoc() { + renderDoc = (style: object) => { TraceMobx(); const thumb = ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png'); const isButton = this.props.Document.type === DocumentType.FONTICON; @@ -1343,6 +1343,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps ); })} style={{ + ...style, background: isButton || thumb ? undefined : this.backgroundColor, opacity: this.opacity, cursor: Doc.ActiveTool === InkTool.None ? 'grab' : 'crosshair', @@ -1358,7 +1359,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps </div> ) ); - } + }; render() { TraceMobx(); const highlightIndex = this.props.LayoutTemplateString ? (Doc.IsHighlighted(this.props.Document) ? 6 : Doc.DocBrushStatus.unbrushed) : Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString @@ -1369,13 +1370,20 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== '[pres element template]'; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath) || { path: undefined }; - const internal = PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc; const boxShadow = this.props.treeViewDoc ? null : highlighting && this.borderRounding && highlightStyle !== 'dashed' ? `0 0 0 ${highlightIndex}px ${highlightColor}` : this.boxShadow || (this.props.Document.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined); + const renderDoc = this.renderDoc({ + borderRadius: this.borderRounding, + outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : 'solid 0px', + border: highlighting && this.borderRounding && highlightStyle === 'dashed' ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, + boxShadow, + clipPath: borderPath.path ? `path('${borderPath.path}')` : undefined, + }); + const animRenderDoc = PresBox.Instance?.isActiveItemTarget(this.layoutDoc) ? PresBox.AnimationEffect(renderDoc, PresBox.Instance.activeItem) : renderDoc; // Return surrounding highlight return ( <div @@ -1391,19 +1399,15 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps display: this.hidden ? 'inline' : undefined, borderRadius: this.borderRounding, pointerEvents: this.pointerEvents, - outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : 'solid 0px', - border: highlighting && this.borderRounding && highlightStyle === 'dashed' ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, - boxShadow, - clipPath: borderPath.path ? `path('${borderPath.path}')` : undefined, }}> {!borderPath.path ? ( - internal + animRenderDoc ) : ( <> {/* <div style={{ clipPath: `path('${borderPath.fill}')` }}> - {internal} + {animRenderDoc} </div> */} - {internal} + {animRenderDoc} <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}> <svg style={{ overflow: 'visible' }} viewBox={`0 0 ${this.props.PanelWidth()} ${this.props.PanelHeight()}`}> <path d={borderPath.path} style={{ stroke: 'black', fill: 'transparent', strokeWidth: borderPath.width }} /> |