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

1 files changed, 12 insertions, 15 deletions

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);