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

3 files changed, 27 insertions, 26 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 76e2d64a2..d49c4c6c0 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -244,7 +244,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                             .views()
                             .filter(v => v)
                             .map(dv => dv!.rootDoc);
-                        TabDocView.PinDoc(docs, { pinDocView: !docs.some(doc => !e.shiftKey && doc.type === DocumentType.RTF), activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) });
+                        TabDocView.PinDoc(docs, { pinDocView: e.shiftKey, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) });
                     }}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
                 </div>
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 }} />
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 5bede448d..048a033ee 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -5,7 +5,7 @@ import { action, computed, IReactionDisposer, observable, ObservableSet, reactio
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
 import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
-import { Doc, DocListCast, DocListCastAsync, FieldResult } from '../../../../fields/Doc';
+import { Doc, DocListCast, DocListCastAsync, FieldResult, Opt } from '../../../../fields/Doc';
 import { Copy } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
@@ -54,22 +54,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     /**
-     * transitions & effects for documents
-     * @param renderDoc
-     * @param layoutDoc
+     * returns an entrance animation effect function to wrap a JSX element
+     * @param presEffectDoc presentation effects document that specifies the animation effect parameters
+     * @returns a function that will wrap a JSX animation element wrapping any JSX element
      */
-    static renderEffectsDoc(renderDoc: any, layoutDoc: Doc, presDoc: Doc) {
+    public static AnimationEffect(renderDoc: JSX.Element, presEffectDoc: Doc) {
         const effectProps = {
-            left: presDoc.presEffectDirection === PresEffect.Left,
-            right: presDoc.presEffectDirection === PresEffect.Right,
-            top: presDoc.presEffectDirection === PresEffect.Top,
-            bottom: presDoc.presEffectDirection === PresEffect.Bottom,
+            left: presEffectDoc.presEffectDirection === PresEffect.Left,
+            right: presEffectDoc.presEffectDirection === PresEffect.Right,
+            top: presEffectDoc.presEffectDirection === PresEffect.Top,
+            bottom: presEffectDoc.presEffectDirection === PresEffect.Bottom,
             opposite: true,
-            delay: presDoc.presTransition,
-            // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc,
+            delay: NumCast(presEffectDoc.presTransition),
         };
         //prettier-ignore
-        switch (presDoc.presEffect) {
+        switch (StrCast(presEffectDoc.presEffect)) {
             default: 
             case PresEffect.None:       return renderDoc;
             case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
@@ -81,9 +80,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
         }
     }
-    public static EffectsProvider(layoutDoc: Doc, renderDoc: any) {
-        return PresBox.Instance && layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc ? PresBox.renderEffectsDoc(renderDoc, layoutDoc, PresBox.Instance.childDocs[PresBox.Instance.itemIndex]) : renderDoc;
-    }
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
     public selectedArray = new ObservableSet<Doc>();
@@ -150,6 +146,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get selectedDoc() {
         return this.selectedDocumentView?.rootDoc;
     }
+    isActiveItemTarget = (layoutDoc: Doc) => this.activeItem.presentationTargetDoc === layoutDoc;
     clearSelectedArray = () => this.selectedArray.clear();
     addToSelectedArray = (doc: Doc) => this.selectedArray.add(doc);
     removeFromSelectedArray = (doc: Doc) => this.selectedArray.delete(doc);