fixed border highlight for animation effects. require shift-key for all pinWithView operations

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 }} />