From 871925ecc9f15377339afc907a2000fecfe3240d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 7 Mar 2023 17:46:40 -0500
Subject: fixed presbox following to use presItem anchor instead of target doc
 as anchor.  stopped allowing collections to have their data fields
 interpolate based on keyframe.  fixed assigning current frame when following
 presbox

---
 src/client/views/nodes/trails/PresBox.tsx | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 94962650a..cb8b065af 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -293,19 +293,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.rootDoc._itemIndex = index;
             const activeItem: Doc = this.activeItem;
             const targetDoc: Doc = this.targetDoc;
-            const activeFrame = activeItem.presActiveFrame ?? activeItem.presCurrentFrame;
-            if (activeFrame !== undefined) {
-                const transTime = NumCast(activeItem.presTransition, 500);
-                const acontext = activeItem.presActiveFrame !== undefined ? DocCast(DocCast(activeItem.presentationTargetDoc).context) : DocCast(activeItem.presentationTargetDoc);
-                const context = DocCast(acontext)?.annotationOn ? DocCast(DocCast(acontext).annotationOn) : acontext;
-                if (context) {
-                    const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.ComponentView as CollectionFreeFormView;
-                    if (ffview?.childDocs) {
-                        this._keyTimer = CollectionFreeFormView.gotoKeyframe(this._keyTimer, ffview.childDocs, transTime);
-                        context._currentFrame = NumCast(activeFrame);
-                    }
-                }
-            }
             if (from?.mediaStopTriggerList && this.layoutDoc.presStatus !== PresStatus.Edit) {
                 DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia);
             }
@@ -338,7 +325,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const filters = true;
         const pivot = true;
         const dataannos = false;
-        return { scrollable, pannable, inkable, viewType, pivot, filters, temporal, clippable, dataview, textview, poslayoutview, dataannos };
+        return { scrollable, pannable, inkable, viewType, pivot, filters, temporal, clippable, dataview, datarange, textview, poslayoutview, dataannos };
     }
 
     @action
@@ -366,6 +353,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 changed = true;
             }
         }
+
+        const activeFrame = activeItem.presActiveFrame ?? activeItem.presCurrentFrame;
+        if (activeFrame !== undefined) {
+            const transTime = NumCast(activeItem.presTransition, 500);
+            const acontext = activeItem.presActiveFrame !== undefined ? DocCast(DocCast(activeItem.presentationTargetDoc).context) : DocCast(activeItem.presentationTargetDoc);
+            const context = DocCast(acontext)?.annotationOn ? DocCast(DocCast(acontext).annotationOn) : acontext;
+            if (context) {
+                const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
+                if (ffview?.childDocs) {
+                    PresBox.Instance._keyTimer = CollectionFreeFormView.gotoKeyframe(PresBox.Instance._keyTimer, ffview.childDocs, transTime);
+                    ffview.rootDoc._currentFrame = NumCast(activeFrame);
+                }
+            }
+        }
         if (pinDataTypes?.datarange || (!pinDataTypes && activeItem.presXRange !== undefined)) {
             if (bestTarget.xRange !== activeItem.presXRange) {
                 bestTarget.xRange = (activeItem.presXRange as ObjectField)?.[Copy]();
@@ -652,7 +653,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             zoomTime: activeItem.presMovement === PresMovement.Jump ? 0 : Math.min(Math.max(effect ? 750 : 500, (effect ? 0.2 : 1) * presTime), presTime),
             effect: activeItem,
             noSelect: true,
-            originatingDoc: activeItem,
+            anchorDoc: activeItem,
             easeFunc: StrCast(activeItem.presEaseFunc, 'ease') as any,
             zoomTextSelections: BoolCast(activeItem.presZoomText),
             playAudio: BoolCast(activeItem.presPlayAudio),
-- 
cgit v1.2.3-70-g09d2


From 071aa191d37f2805bd717c1d1caf8b2a57c394bc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 8 Mar 2023 12:33:16 -0500
Subject: added progressive disclosure for collections.

---
 src/client/views/PropertiesView.tsx                |   2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   8 +-
 src/client/views/nodes/DocumentView.tsx            |   6 +
 src/client/views/nodes/trails/PresBox.tsx          | 170 ++++++++++++++++++---
 src/fields/Doc.ts                                  |  14 +-
 src/fields/Types.ts                                |   3 +-
 6 files changed, 167 insertions(+), 36 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index e750dc43a..1ec2b76d6 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -94,7 +94,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable layoutDocAcls: boolean = false;
 
     //Pres Trails booleans:
-    @observable openPresTransitions: boolean = false;
+    @observable openPresTransitions: boolean = true;
     @observable openAddSlide: boolean = false;
     @observable openSlideOptions: boolean = false;
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 63b566f28..7322f98b5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -111,7 +111,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _panZoomTransition: number = 0; // sets the pan/zoom transform ease time- used by nudge(), focus() etc to smoothly zoom/pan.  set to 0 to use document's transition time or default of 0
     @observable _hLines: number[] | undefined;
     @observable _vLines: number[] | undefined;
-    @observable _firstRender = true; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.
+    @observable _firstRender = false; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.  could be used for performance improvement
     @observable _showAnimTimeline = false;
     @observable _clusterSets: Doc[][] = [];
     @observable _deleteList: DocumentView[] = [];
@@ -139,7 +139,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         };
     }
     @computed get fitContentsToBox() {
-        return (this.props.fitContentsToBox?.() || this.Document._fitContentsToBox || this.Document.isGroup) && !this.isAnnotationOverlay;
+        return (this.props.fitContentsToBox?.() || this.Document._fitContentsToBox) && !this.isAnnotationOverlay;
     }
     @computed get contentBounds() {
         const cb = Cast(this.rootDoc.contentBounds, listSpec('number'));
@@ -1553,7 +1553,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         // create an anchor that saves information about the current state of the freeform view (pan, zoom, view type)
         const anchor = Docs.Create.CollectionAnchorDocument({ title: 'ViewSpec - ' + StrCast(this.layoutDoc._viewType), unrendered: true, presTransition: 500, annotationOn: this.rootDoc });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: true, viewType: true, filters: true } }, this.rootDoc);
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !this.Document._isGroup, viewType: true, filters: true } }, this.rootDoc);
 
         if (addAsAnnotation) {
             if (Cast(this.dataDoc[this.props.fieldKey + '-annotations'], listSpec(Doc), null) !== undefined) {
@@ -1574,7 +1574,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._firstRender = false;
                 this._disposers.groupBounds = reaction(
                     () => {
-                        if (this.props.Document._isGroup && this.childDocs.length === this.childDocList?.length) {
+                        if (this.Document._isGroup && this.childDocs.length === this.childDocList?.length) {
                             const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[WidthSym](), height: cd[HeightSym]() }));
                             return aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding));
                         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b9c07ef6f..d15e9bcdc 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1541,11 +1541,17 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     } // this makes mobx trace() statements more descriptive
     public ContentRef = React.createRef<HTMLDivElement>();
     public ViewTimer: NodeJS.Timeout | undefined; // timer for res
+    public AnimEffectTimer: NodeJS.Timeout | undefined; // timer for res
     private _disposers: { [name: string]: IReactionDisposer } = {};
     public clearViewTransition = () => {
         this.ViewTimer && clearTimeout(this.ViewTimer);
         this.rootDoc._viewTransition = undefined;
     };
+    public setAnimEffect = (presEffect: Doc, timeInMs: number, afterTrans?: () => void) => {
+        this.AnimEffectTimer && clearTimeout(this.AnimEffectTimer);
+        this.rootDoc[AnimationSym] = presEffect;
+        this.AnimEffectTimer = setTimeout(() => (this.rootDoc[AnimationSym] = undefined), timeInMs);
+    };
     public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => {
         this.rootDoc._viewTransition = `${transProp} ${timeInMs}ms`;
         if (dataTrans) this.rootDoc._dataTransition = `${transProp} ${timeInMs}ms`;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cb8b065af..b9397a78a 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import { AnimationSym, Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
+import { AnimationSym, Doc, DocListCast, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
 import { Copy, Id } from '../../../../fields/FieldSymbols';
 import { InkField, InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
@@ -19,6 +19,7 @@ import { CollectionViewType, DocumentType } from '../../../documents/DocumentTyp
 import { DocumentManager } from '../../../util/DocumentManager';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
+import { SerializationHelper } from '../../../util/SerializationHelper';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { undoBatch, UndoManager } from '../../../util/UndoManager';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
@@ -34,7 +35,6 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { ScriptingBox } from '../ScriptingBox';
 import './PresBox.scss';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
-import { SerializationHelper } from '../../../util/SerializationHelper';
 const { Howl } = require('howler');
 
 export interface pinDataTypes {
@@ -87,6 +87,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _newDocumentTools: boolean = false;
     @observable _openMovementDropdown: boolean = false;
     @observable _openEffectDropdown: boolean = false;
+    @observable _openBulletEffectDropdown: boolean = false;
     @observable _presentTools: boolean = false;
     @observable _treeViewMap: Map<Doc, number> = new Map();
     @observable _presKeyEvents: boolean = false;
@@ -115,6 +116,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get targetDoc() {
         return Cast(this.activeItem?.presentationTargetDoc, Doc, null);
     }
+    public static targetRenderedDoc = (doc: Doc) => {
+        const targetDoc = Cast(doc?.presentationTargetDoc, Doc, null);
+        return targetDoc?.unrendered ? DocCast(targetDoc.annotationOn) : targetDoc;
+    };
     @computed get scrollable() {
         if ([DocumentType.PDF, DocumentType.WEB, DocumentType.RTF].includes(this.targetDoc.type as DocumentType) || this.targetDoc._viewType === CollectionViewType.Stacking) return true;
         return false;
@@ -185,6 +190,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             () => SelectionManager.Views(),
             views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation()
         );
+        this._disposers.editing = reaction(
+            () => this.layoutDoc.presStatus === PresStatus.Edit,
+            editing => {
+                if (editing) {
+                    this.childDocs.forEach(doc => {
+                        if (doc.presIndexed !== undefined) {
+                            this.presIndexedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
+                            doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, 1);
+                        }
+                    });
+                }
+            }
+        );
     }
 
     @action
@@ -243,18 +261,58 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         doGroupWithUp(curSlideInd, true)();
     };
 
+    presIndexedItems = (doc: Doc) => {
+        const targetList = PresBox.targetRenderedDoc(doc);
+        if (doc.presIndexed !== undefined && targetList) {
+            const listItems = DocListCast(targetList[Doc.LayoutFieldKey(targetList)]);
+            return listItems;
+        }
+    };
     // Called when the user activates 'next' - to move to the next part of the pres. trail
     @action
     next = () => {
+        const progressiveReveal = (first: boolean) => {
+            const presIndexed = Cast(this.activeItem?.presIndexed, 'number', null);
+            if (presIndexed !== undefined) {
+                const targetRenderedDoc = PresBox.targetRenderedDoc(this.activeItem);
+                targetRenderedDoc._dataTransition = 'all 1s';
+                targetRenderedDoc.opacity = 1;
+                setTimeout(() => (targetRenderedDoc._dataTransition = 'inherit'), 1000);
+                const listItems = this.presIndexedItems(this.activeItem);
+                if (listItems && presIndexed < listItems.length) {
+                    if (!first) {
+                        const listItemDoc = listItems[presIndexed];
+                        const targetView = listItems && DocumentManager.Instance.getFirstDocumentView(listItemDoc);
+                        Doc.linkFollowUnhighlight();
+                        Doc.HighlightDoc(listItemDoc);
+                        listItemDoc.presEffect = this.activeItem.presBulletEffect;
+                        listItemDoc.presTransition = 500;
+                        targetView?.setAnimEffect(listItemDoc, 500);
+                        if (targetView?.docView && this.activeItem.presBulletExpand) {
+                            targetView.docView._animateScalingTo = 1.1;
+                            Doc.AddUnHighlightWatcher(() => (targetView!.docView!._animateScalingTo = 0));
+                        }
+                        listItemDoc.opacity = undefined;
+                        this.activeItem.presIndexed = presIndexed + 1;
+                    }
+                    return true;
+                } else {
+                    console.log(this.activeItem.presIndexed);
+                }
+            }
+        };
+        if (progressiveReveal(false)) return true;
         if (this.childDocs[this.itemIndex + 1] !== undefined) {
             // Case 1: No more frames in current doc and next slide is defined, therefore move to next slide
             const slides = DocListCast(this.rootDoc[StrCast(this.presFieldKey, 'data')]);
             const curLast = this.selectedArray.size ? Math.max(...Array.from(this.selectedArray).map(d => slides.indexOf(DocCast(d)))) : this.itemIndex;
             this.nextSlide(curLast + 1 === this.childDocs.length ? (this.layoutDoc.presLoop ? 0 : curLast) : curLast + 1);
+            progressiveReveal(true); // shows first progressive document, but without a transition effect
         } else {
             if (this.childDocs[this.itemIndex + 1] === undefined && (this.layoutDoc.presLoop || this.layoutDoc.presStatus === PresStatus.Edit)) {
                 // Case 2: Last slide and presLoop is toggled ON or it is in Edit mode
                 this.nextSlide(0);
+                progressiveReveal(true); // shows first progressive document, but without a transition effect
             }
             return 0;
         }
@@ -492,7 +550,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 });
             setTimeout(() => Array.from(transitioned).forEach(action(doc => (doc._dataTransition = undefined))), transTime + 10);
         }
-        if (pinDataTypes?.pannable || (!pinDataTypes && (activeItem.presPinViewBounds !== undefined || activeItem.presPanX !== undefined || activeItem.presViewScale !== undefined))) {
+        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.presPinViewBounds !== undefined || activeItem.presPanX !== undefined || activeItem.presViewScale !== undefined))) && !PresBox.targetRenderedDoc(activeItem)._isGroup) {
             const contentBounds = Cast(activeItem.presPinViewBounds, listSpec('number'));
             if (contentBounds) {
                 const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] };
@@ -685,7 +743,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     onHideDocument = () => {
         this.childDocs.forEach((doc, index) => {
             const curDoc = Cast(doc, Doc, null);
-            const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
+            const tagDoc = PresBox.targetRenderedDoc(curDoc);
             const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc);
             if (curDoc.presHide) {
                 if (index !== this.itemIndex) {
@@ -698,6 +756,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     tagDoc.opacity = 0;
                 } else if (index === this.itemIndex || !curDoc.presHideAfter) {
                     tagDoc.opacity = 1;
+                    setTimeout(() => (tagDoc._dataTransition = undefined), 1000);
                 }
             }
             const hidingIndAft =
@@ -781,7 +840,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     //stops the presentaton.
     resetPresentation = () => {
         this.childDocs
-            .map(doc => Cast(doc.presentationTargetDoc, Doc, null))
+            .map(doc => PresBox.targetRenderedDoc(doc))
             .filter(doc => doc instanceof Doc)
             .forEach(doc => {
                 try {
@@ -807,6 +866,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         });
     };
 
+    initializePresState = (startIndex: number) => {
+        this.childDocs.forEach((doc, index) => {
+            const tagDoc = PresBox.targetRenderedDoc(doc);
+            if (doc.presHideBefore && index > startIndex) tagDoc.opacity = 0;
+            if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
+            if (doc.presIndexed !== undefined && index >= startIndex) {
+                this.presIndexedItems(doc)
+                    ?.slice(1)
+                    .forEach(indexedDoc => (indexedDoc.opacity = 0));
+                doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, 1);
+            }
+            // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
+        });
+    };
+
     /**
      * The function that starts the presentation at the given index, also checking if actions should be applied
      * directly at start.
@@ -818,12 +892,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         clearTimeout(this._presTimer);
         if (this.childDocs.length) {
             this.layoutDoc.presStatus = PresStatus.Autoplay;
-            this.childDocs.forEach(doc => {
-                const tagDoc = doc.presentationTargetDoc as Doc;
-                if (doc.presHideBefore && this.childDocs.indexOf(doc) > startIndex) tagDoc.opacity = 0;
-                if (doc.presHideAfter && this.childDocs.indexOf(doc) < startIndex) tagDoc.opacity = 0;
-                // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
-            });
+            this.initializePresState(startIndex);
             const func = () => {
                 const delay = NumCast(this.activeItem.presDuration, this.activeItem.type === DocumentType.SCRIPTING ? 0 : 2500) + NumCast(this.activeItem.presTransition);
                 this._presTimer = setTimeout(() => {
@@ -860,6 +929,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         doc._height = 30;
         doc._width = PresBox.minimizedWidth;
         Doc.AddDocToList(Doc.MyOverlayDocs, undefined, doc);
+        PresBox.Instance.initializePresState(PresBox.Instance.itemIndex);
         return (doc.presStatus = PresStatus.Manual);
     }
 
@@ -1336,7 +1406,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     @action
-    updateEffect = (effect: PresEffect, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presEffect = effect));
+    updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presEffect = effect)));
 
     _batch: UndoManager.Batch | undefined = undefined;
 
@@ -1366,8 +1436,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get transitionDropdown() {
         const activeItem: Doc = this.activeItem;
         const targetDoc: Doc = this.targetDoc;
-        const presEffect = (effect: PresEffect) => (
-            <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect)}>
+        const presEffect = (effect: PresEffect, bullet: boolean) => (
+            <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, bullet)}>
                 {effect}
             </div>
         );
@@ -1395,6 +1465,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 0;
             if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
             const effect = activeItem.presEffect ? activeItem.presEffect : PresMovement.None;
+            const bulletEffect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
             // activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : PresMovement.Zoom;
             return (
                 <div
@@ -1405,6 +1476,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         e.stopPropagation();
                         this._openMovementDropdown = false;
                         this._openEffectDropdown = false;
+                        this._openBulletEffectDropdown = false;
                     })}>
                     <div className="ribbon-box">
                         Movement
@@ -1537,12 +1609,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {effect?.toString()}
                             <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
-                                {presEffect(PresEffect.None)}
-                                {presEffect(PresEffect.Fade)}
-                                {presEffect(PresEffect.Flip)}
-                                {presEffect(PresEffect.Rotate)}
-                                {presEffect(PresEffect.Bounce)}
-                                {presEffect(PresEffect.Roll)}
+                                {presEffect(PresEffect.None, false)}
+                                {presEffect(PresEffect.Fade, false)}
+                                {presEffect(PresEffect.Flip, false)}
+                                {presEffect(PresEffect.Rotate, false)}
+                                {presEffect(PresEffect.Bounce, false)}
+                                {presEffect(PresEffect.Roll, false)}
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}>
@@ -1556,6 +1628,49 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {presDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
                             {presDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
                         </div>
+                        <div className="ribbon-Box">Progressive Disclosure</div>
+                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                            <div className="presBox-subheading">Progressivize Collection</div>
+                            <input
+                                className="presBox-checkbox"
+                                style={{ margin: 10 }}
+                                type="checkbox"
+                                onChange={() => {
+                                    activeItem.presIndexed = activeItem.presIndexed === undefined ? 0 : undefined;
+                                    activeItem.presHideBefore = activeItem.presIndexed !== undefined;
+                                }}
+                                checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
+                            />
+                        </div>
+                        {activeItem.presIndexed === undefined ? null : (
+                            <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                                <div className="presBox-subheading">Expand Current Bullet</div>
+                                <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} />
+                            </div>
+                        )}
+                        {activeItem.presIndexed === undefined ? null : (
+                            <div className="presBox-subheading">
+                                Progressive effect
+                                <div
+                                    className="presBox-dropdown"
+                                    onClick={action(e => {
+                                        e.stopPropagation();
+                                        this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
+                                    })}
+                                    style={{ borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, border: this._openBulletEffectDropdown ? `solid 2px ${Colors.MEDIUM_BLUE}` : 'solid 1px black' }}>
+                                    {bulletEffect?.toString()}
+                                    <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
+                                    <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
+                                        {presEffect(PresEffect.None, true)}
+                                        {presEffect(PresEffect.Fade, true)}
+                                        {presEffect(PresEffect.Flip, true)}
+                                        {presEffect(PresEffect.Rotate, true)}
+                                        {presEffect(PresEffect.Bounce, true)}
+                                        {presEffect(PresEffect.Roll, true)}
+                                    </div>
+                                </div>
+                            </div>
+                        )}
                     </div>
                     <div className="ribbon-final-box">
                         <div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
@@ -1571,7 +1686,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     applyTo = (array: Doc[]) => {
         this.updateMovement(this.activeItem.presMovement as PresMovement, true);
-        this.updateEffect(this.activeItem.presEffect as PresEffect, true);
+        this.updateEffect(this.activeItem.presEffect as PresEffect, false, true);
+        this.updateEffect(this.activeItem.presBulletEffect as PresEffect, true, true);
         this.updateEffectDirection(this.activeItem.presEffectDirection as PresEffectDirection, true);
         const { presTransition, presDuration, presHideBefore, presHideAfter } = this.activeItem;
         array.forEach(curDoc => {
@@ -1952,6 +2068,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     onClick={undoBatch(
                         action(() => {
                             this.layoutDoc.presStatus = 'manual';
+                            this.initializePresState(this.itemIndex);
                             this.turnOffEdit(true);
                             this.gotoDocument(this.itemIndex, this.activeItem);
                         })
@@ -2114,6 +2231,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             onClick={undoBatch(() => {
                                 if (this.childDocs.length) {
                                     this.layoutDoc.presStatus = 'manual';
+                                    this.initializePresState(this.itemIndex);
                                     this.gotoDocument(this.itemIndex, this.activeItem);
                                 }
                             })}>
@@ -2138,7 +2256,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     @computed get playButtons() {
-        const presEnd: boolean = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1;
+        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.presIndexedItems(this.activeItem)?.length ?? 0));
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
         const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         // Case 1: There are still other frames and should go through all frames before going to next slide
@@ -2226,7 +2344,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     </div>
                 </Tooltip>
                 <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}>
-                    {`${inOverlay ? '' : 'Slide'} ${this.itemIndex + 1} / ${this.childDocs.length}`}
+                    {inOverlay ? '' : 'Slide'} {this.itemIndex + 1}
+                    {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
                 </div>
                 <div className="presPanel-divider"></div>
                 {this.props.PanelWidth() > 250 ? (
@@ -2311,7 +2430,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1;
+        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.presIndexedItems(this.activeItem)?.length ?? 0));
         const presStart = !this.layoutDoc.presLoop && this.itemIndex === 0;
         const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player
@@ -2346,7 +2465,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         </div>
                     </Tooltip>
                     <div className="presPanel-button-text">
-                        Slide {this.itemIndex + 1} / {this.childDocs.length}
+                        Slide {this.itemIndex + 1}
+                        {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
                     </div>
                     <div className="presPanel-divider" />
                     <div className="presPanel-button-text" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.exitClicked, false, false)}>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index ed5eaa756..7713d884e 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1304,6 +1304,7 @@ export namespace Doc {
     }
 
     export function linkFollowUnhighlight() {
+        clearTimeout(UnhighlightTimer);
         UnhighlightWatchers.forEach(watcher => watcher());
         UnhighlightWatchers.length = 0;
         highlightedDocs.forEach(doc => Doc.UnHighlightDoc(doc));
@@ -1345,12 +1346,15 @@ export namespace Doc {
             }
         });
     }
-    export function UnHighlightDoc(doc: Doc) {
+    /// if doc is defined, then it is unhighlighted, otherwise all highlighted docs are unhighlighted
+    export function UnHighlightDoc(doc?: Doc) {
         runInAction(() => {
-            highlightedDocs.delete(doc);
-            highlightedDocs.delete(Doc.GetProto(doc));
-            doc[HighlightSym] = Doc.GetProto(doc)[HighlightSym] = false;
-            doc[AnimationSym] = undefined;
+            (doc ? [doc] : Array.from(highlightedDocs)).forEach(doc => {
+                highlightedDocs.delete(doc);
+                highlightedDocs.delete(Doc.GetProto(doc));
+                doc[HighlightSym] = Doc.GetProto(doc)[HighlightSym] = false;
+                doc[AnimationSym] = undefined;
+            });
         });
     }
     export function UnBrushAllDocs() {
diff --git a/src/fields/Types.ts b/src/fields/Types.ts
index 3ef7cb1de..4cf286a32 100644
--- a/src/fields/Types.ts
+++ b/src/fields/Types.ts
@@ -79,7 +79,8 @@ export function Cast<T extends CastCtor>(field: FieldResult, ctor: T, defaultVal
 }
 
 export function DocCast(field: FieldResult, defaultVal?: Doc) {
-    return Cast(field, Doc, null) ?? defaultVal;
+    const doc = Cast(field, Doc, null);
+    return doc && !(doc instanceof Promise) ? doc : (defaultVal as Doc);
 }
 
 export function NumCast(field: FieldResult, defaultVal: number | null = 0) {
-- 
cgit v1.2.3-70-g09d2


From f887fcc528a21fa0e3c1ce6086297d9ed78a856a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 8 Mar 2023 12:52:26 -0500
Subject: from last -- progressivize for images/videos/etc.

---
 src/client/views/nodes/trails/PresBox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index b9397a78a..8738e47af 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -264,8 +264,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     presIndexedItems = (doc: Doc) => {
         const targetList = PresBox.targetRenderedDoc(doc);
         if (doc.presIndexed !== undefined && targetList) {
-            const listItems = DocListCast(targetList[Doc.LayoutFieldKey(targetList)]);
-            return listItems;
+            const listItems = (Cast(targetList[Doc.LayoutFieldKey(targetList)], listSpec(Doc), null)?.filter(d => d instanceof Doc) as Doc[]) ?? DocListCast(targetList[Doc.LayoutFieldKey(targetList) + '-annotations']);
+            return listItems.filter(doc => !doc.unrendered);
         }
     };
     // Called when the user activates 'next' - to move to the next part of the pres. trail
@@ -873,9 +873,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
             if (doc.presIndexed !== undefined && index >= startIndex) {
                 this.presIndexedItems(doc)
-                    ?.slice(1)
+                    ?.slice(doc.type === DocumentType.COL ? 1 : 0)
                     .forEach(indexedDoc => (indexedDoc.opacity = 0));
-                doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, 1);
+                doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, doc.type === DocumentType.COL ? 1 : 0);
             }
             // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
         });
@@ -2345,7 +2345,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </Tooltip>
                 <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}>
                     {inOverlay ? '' : 'Slide'} {this.itemIndex + 1}
-                    {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
+                    {this.activeItem?.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
                 </div>
                 <div className="presPanel-divider"></div>
                 {this.props.PanelWidth() > 250 ? (
-- 
cgit v1.2.3-70-g09d2


From 98fd2ecbbf5168986a5eba889bff6aeea0eebb49 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 8 Mar 2023 21:54:03 -0500
Subject: some cleanup of presBox properties panels.  fixes for undoing some
 slider actions.

---
 src/client/views/MainView.tsx                      |   2 -
 src/client/views/PropertiesView.tsx                |  31 +-
 src/client/views/collections/TabDocView.tsx        |   8 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   3 +-
 src/client/views/nodes/trails/PresBox.tsx          | 722 ++++++++++-----------
 5 files changed, 369 insertions(+), 397 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index e1ba5943d..945cd61db 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -553,8 +553,6 @@ export class MainView extends React.Component {
             Doc.MyTrails && (Doc.ActivePresentation = pres);
             Doc.AddDocToList(Doc.MyTrails, 'data', pres);
             this.closeFlyout();
-        } else {
-            PresBox.NavigateToDoc(DocCast(pres.presentationTargetDoc), pres);
         }
     };
 
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 4a63930bd..7a985628f 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -95,6 +95,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     //Pres Trails booleans:
     @observable openPresTransitions: boolean = true;
+    @observable openPresProgressivize: boolean = false;
+    @observable openPresVisibilityAndDuration: boolean = false;
     @observable openAddSlide: boolean = false;
     @observable openSlideOptions: boolean = false;
 
@@ -1740,7 +1742,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
             if (this.isPres) {
                 const selectedItem: boolean = PresBox.Instance?.selectedArray.size > 0;
-                const type = PresBox.Instance.activeItem?.type;
+                const type = [DocumentType.AUDIO, DocumentType.VID].includes(DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType)
+                    ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType)
+                    : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type;
                 return (
                     <div className="propertiesView" style={{ width: this.props.width }}>
                         <div className="propertiesView-title" style={{ width: this.props.width }}>
@@ -1764,6 +1768,31 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 {this.openPresTransitions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
                             </div>
                         )}
+                        {!selectedItem ? null : (
+                            <div className="propertiesView-presTrails">
+                                <div
+                                    className="propertiesView-presTrails-title"
+                                    onPointerDown={action(() => (this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration))}
+                                    style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
+                                    &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibilty
+                                    <div className="propertiesView-presTrails-title-icon">
+                                        <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                    </div>
+                                </div>
+                                {this.openPresVisibilityAndDuration ? <div className="propertiesView-presTrails-content">{PresBox.Instance.visibiltyDurationDropdown}</div> : null}
+                            </div>
+                        )}
+                        {!selectedItem ? null : (
+                            <div className="propertiesView-presTrails">
+                                <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
+                                    &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
+                                    <div className="propertiesView-presTrails-title-icon">
+                                        <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                    </div>
+                                </div>
+                                {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
+                            </div>
+                        )}
                         {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : (
                             <div className="propertiesView-presTrails">
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))} style={{ backgroundColor: this.openSlideOptions ? 'black' : '' }}>
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 99283996e..9459aaf1e 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -263,9 +263,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             pinDoc.treeViewFieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
             pinDoc.treeViewExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
             pinDoc.treeViewHideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header
-            const presArray: Doc[] = PresBox.Instance?.sortArray();
-            const size: number = PresBox.Instance?.selectedArray.size;
-            const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
             const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
 
             if (!pinProps?.audioRange && duration !== undefined) {
@@ -274,10 +271,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 pinDoc.presStartTime = NumCast(doc.clipStart);
                 pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
             }
-            //PresBox.pinDocView(pinDoc, pinProps.pinDocContent ? { ...pinProps, pinData: PresBox.pinDataTypes(doc) } : pinProps, anchorDoc && anchorDoc !== doc && !anchorDoc.unrendered ? anchorDoc : doc);
-            pinDoc.onClick = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)');
-            Doc.AddDocToList(curPres, 'data', pinDoc, presSelected);
-            //save position
             if (pinProps?.activeFrame !== undefined) {
                 pinDoc.presActiveFrame = pinProps?.activeFrame;
                 pinDoc.title = doc.title + ' (move)';
@@ -294,6 +287,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 pinDoc.presMovement = PresMovement.None;
             }
             if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+            Doc.AddDocToList(curPres, 'data', pinDoc, PresBox.Instance?.sortArray()?.lastElement());
             PresBox.Instance?.clearSelectedArray();
             pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); //Update selected array
         });
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7322f98b5..b92a8ec4d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -181,8 +181,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return this.getContainerTransform().translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY).transform(this.cachedGetLocalTransform);
     }
 
-    _keyTimer: NodeJS.Timeout | undefined;
-
     public static gotoKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], duration: number) {
         if (timer) clearTimeout(timer);
         return DocumentView.SetViewTransition(docs, 'all', duration, undefined, true);
@@ -208,6 +206,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return newTimer;
     }
 
+    _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed.  Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
     changeKeyFrame = (back = false) => {
         const currentFrame = Cast(this.Document._currentFrame, 'number', null);
         if (currentFrame === undefined) {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 8738e47af..b5a24a380 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -3,13 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { ColorState, SketchPicker } from 'react-color';
 import { AnimationSym, Doc, DocListCast, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
 import { Copy, Id } from '../../../../fields/FieldSymbols';
 import { InkField, InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { listSpec } from '../../../../fields/Schema';
+import { ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { AudioField } from '../../../../fields/URLField';
 import { emptyFunction, emptyPath, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../Utils';
@@ -69,9 +69,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(PresBox, fieldKey);
     }
+    static navigateToDocScript: ScriptField;
+
+    constructor(props: any) {
+        super(props);
+        if (!PresBox.navigateToDocScript) {
+            PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)')!;
+        }
+    }
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
     public selectedArray = new ObservableSet<Doc>();
+    _batch: UndoManager.Batch | undefined = undefined; // undo batch for dragging sliders which generate multiple scene edit events as the cursor moves
+    _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed.  Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
+    _unmounting = false; // flag that view is unmounting used to block RemFromMap from deleting things
 
     @observable public static Instance: PresBox;
 
@@ -143,14 +154,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc));
     removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc));
 
-    _unmounting = false;
     @action
     componentWillUnmount() {
         this._unmounting = true;
         if (this._presTimer) clearTimeout(this._presTimer);
         document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
         this.resetPresentation();
-        // Turn of progressivize editors
         this.turnOffEdit(true);
         Object.values(this._disposers).forEach(disposer => disposer?.());
     }
@@ -196,8 +205,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 if (editing) {
                     this.childDocs.forEach(doc => {
                         if (doc.presIndexed !== undefined) {
-                            this.presIndexedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
-                            doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, 1);
+                            this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
+                            doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
                         }
                     });
                 }
@@ -222,7 +231,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     stopTempMedia = (targetDocField: FieldResult) => {
-        const targetDoc = Cast(targetDocField, Doc, null);
+        const targetDoc = DocCast(DocCast(targetDocField).annotationOn) ?? DocCast(targetDocField);
         if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as any)) {
             const targMedia = DocumentManager.Instance.getDocumentView(targetDoc);
             targMedia?.ComponentView?.Pause?.();
@@ -235,7 +244,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     nextSlide = (slideNum?: number) => {
         const nextSlideInd = slideNum ?? this.itemIndex + 1;
         let curSlideInd = nextSlideInd;
-        CollectionStackedTimeline.CurrentlyPlaying?.map(clipView => clipView?.ComponentView?.Pause?.());
+        //CollectionStackedTimeline.CurrentlyPlaying?.map(clipView => clipView?.ComponentView?.Pause?.());
         this.clearSelectedArray();
         const doGroupWithUp =
             (nextSelected: number, force = false) =>
@@ -261,7 +270,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         doGroupWithUp(curSlideInd, true)();
     };
 
-    presIndexedItems = (doc: Doc) => {
+    // docs within a slide target that will be progressively revealed
+    progressivizedItems = (doc: Doc) => {
         const targetList = PresBox.targetRenderedDoc(doc);
         if (doc.presIndexed !== undefined && targetList) {
             const listItems = (Cast(targetList[Doc.LayoutFieldKey(targetList)], listSpec(Doc), null)?.filter(d => d instanceof Doc) as Doc[]) ?? DocListCast(targetList[Doc.LayoutFieldKey(targetList) + '-annotations']);
@@ -278,7 +288,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 targetRenderedDoc._dataTransition = 'all 1s';
                 targetRenderedDoc.opacity = 1;
                 setTimeout(() => (targetRenderedDoc._dataTransition = 'inherit'), 1000);
-                const listItems = this.presIndexedItems(this.activeItem);
+                const listItems = this.progressivizedItems(this.activeItem);
                 if (listItems && presIndexed < listItems.length) {
                     if (!first) {
                         const listItemDoc = listItems[presIndexed];
@@ -365,7 +375,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); //Update selected array
             this.turnOffEdit();
             this.navigateToActiveItem(finished); //Handles movement to element only when presTrail is list
-            this.onHideDocument(); //Handles hide after/before
+            this.doHideBeforeAfter(); //Handles hide after/before
         }
     });
     static pinDataTypes(target?: Doc): pinDataTypes {
@@ -740,7 +750,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * they are hidden each time the presentation is updated.
      */
     @action
-    onHideDocument = () => {
+    doHideBeforeAfter = () => {
         this.childDocs.forEach((doc, index) => {
             const curDoc = Cast(doc, Doc, null);
             const tagDoc = PresBox.targetRenderedDoc(curDoc);
@@ -872,10 +882,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (doc.presHideBefore && index > startIndex) tagDoc.opacity = 0;
             if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
             if (doc.presIndexed !== undefined && index >= startIndex) {
-                this.presIndexedItems(doc)
+                this.progressivizedItems(doc)
                     ?.slice(doc.type === DocumentType.COL ? 1 : 0)
                     .forEach(indexedDoc => (indexedDoc.opacity = 0));
-                doc.presIndexed = Math.min(this.presIndexedItems(doc)?.length ?? 0, doc.type === DocumentType.COL ? 1 : 0);
+                doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, doc.type === DocumentType.COL ? 1 : 0);
             }
             // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
         });
@@ -1338,12 +1348,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (timeInMS > 100000) timeInMS = 100000;
         setter(timeInMS);
     };
-    setTransitionTime = (number: String, change?: number) => {
+
+    @undoBatch
+    updateTransitionTime = (number: String, change?: number) => {
         PresBox.SetTransitionTime(number, (timeInMS: number) => this.selectedArray.forEach(doc => (doc.presTransition = timeInMS)), change);
     };
 
     // Converts seconds to ms and updates presTransition
-    setZoom = (number: String, change?: number) => {
+    @undoBatch
+    updateZoom = (number: String, change?: number) => {
         let scale = Number(number) / 100;
         if (change) scale += change;
         if (scale < 0.01) scale = 0.01;
@@ -1351,8 +1364,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.selectedArray.forEach(doc => (doc.presZoom = scale));
     };
 
-    // Converts seconds to ms and updates presDuration
-    setDurationTime = (number: String, change?: number) => {
+    /*
+     * Converts seconds to ms and updates presDuration
+     */
+    @undoBatch
+    updateDurationTime = (number: String, change?: number) => {
         let timeInMS = Number(number) * 1000;
         if (change) timeInMS += change;
         if (timeInMS < 100) timeInMS = 100;
@@ -1360,9 +1376,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.selectedArray.forEach(doc => (doc.presDuration = timeInMS));
     };
 
-    /**
-     * When the movement dropdown is changes
-     */
     @undoBatch
     updateMovement = action((movement: PresMovement, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presMovement = movement)));
 
@@ -1393,6 +1406,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         activeItem.presOpenInLightbox = !activeItem.presOpenInLightbox;
         this.selectedArray.forEach(doc => (doc.presOpenInLightbox = activeItem.presOpenInLightbox));
     };
+
     @undoBatch
     @action
     updateEaseFunc = (activeItem: Doc) => {
@@ -1408,10 +1422,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presEffect = effect)));
 
-    _batch: UndoManager.Batch | undefined = undefined;
-
+    static _sliderBatch: any;
     public static inputter = (min: string, step: string, max: string, value: number, active: boolean, change: (val: string) => void, hmargin?: number) => {
-        let batch: any;
         return (
             <input
                 type="range"
@@ -1422,10 +1434,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 style={{ marginLeft: hmargin, marginRight: hmargin, width: `calc(100% - ${2 * (hmargin ?? 0)}px)` }}
                 className={`toolbar-slider ${active ? '' : 'none'}`}
                 onPointerDown={e => {
-                    batch = UndoManager.StartBatch('pres slider');
+                    PresBox._sliderBatch = UndoManager.StartBatch('pres slider');
                     e.stopPropagation();
                 }}
-                onPointerUp={() => batch?.end()}
+                onPointerUp={() => PresBox._sliderBatch.end()}
                 onChange={e => {
                     e.stopPropagation();
                     change(e.target.value);
@@ -1433,11 +1445,146 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             />
         );
     };
+
+    @undoBatch
+    @action
+    applyTo = (array: Doc[]) => {
+        this.updateMovement(this.activeItem.presMovement as PresMovement, true);
+        this.updateEffect(this.activeItem.presEffect as PresEffect, false, true);
+        this.updateEffect(this.activeItem.presBulletEffect as PresEffect, true, true);
+        this.updateEffectDirection(this.activeItem.presEffectDirection as PresEffectDirection, true);
+        const { presTransition, presDuration, presHideBefore, presHideAfter } = this.activeItem;
+        array.forEach(curDoc => {
+            curDoc.presTransition = presTransition;
+            curDoc.presDuration = presDuration;
+            curDoc.presHideBefore = presHideBefore;
+            curDoc.presHideAfter = presHideAfter;
+        });
+    };
+
+    @computed get visibiltyDurationDropdown() {
+        const activeItem = this.activeItem;
+        if (activeItem && this.targetDoc) {
+            const targetType = this.targetDoc.type;
+            let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 0;
+            if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
+            return (
+                <div className="presBox-ribbon">
+                    <div className="ribbon-doubleButton">
+                        <Tooltip title={<div className="dash-tooltip">{'Hide before presented'}</div>}>
+                            <div className={`ribbon-toggle ${activeItem.presHideBefore ? 'active' : ''}`} onClick={() => this.updateHideBefore(activeItem)}>
+                                Hide before
+                            </div>
+                        </Tooltip>
+                        <Tooltip title={<div className="dash-tooltip">{'Hide while presented'}</div>}>
+                            <div className={`ribbon-toggle ${activeItem.presHide ? 'active' : ''}`} onClick={() => this.updateHide(activeItem)}>
+                                Hide
+                            </div>
+                        </Tooltip>
+
+                        <Tooltip title={<div className="dash-tooltip">{'Hide after presented'}</div>}>
+                            <div className={`ribbon-toggle ${activeItem.presHideAfter ? 'active' : ''}`} onClick={() => this.updateHideAfter(activeItem)}>
+                                Hide after
+                            </div>
+                        </Tooltip>
+
+                        <Tooltip title={<div className="dash-tooltip">{'Open in lightbox view'}</div>}>
+                            <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presOpenInLightbox ? Colors.LIGHT_BLUE : '' }} onClick={() => this.updateOpenDoc(activeItem)}>
+                                Lightbox
+                            </div>
+                        </Tooltip>
+                        <Tooltip title={<div className="dash-tooltip">{'Transition movement style'}</div>}>
+                            <div className="ribbon-toggle" onClick={() => this.updateEaseFunc(activeItem)}>
+                                {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
+                            </div>
+                        </Tooltip>
+                    </div>
+                    {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : (
+                        <>
+                            <div className="ribbon-doubleButton">
+                                <div className="presBox-subheading">Slide Duration</div>
+                                <div className="ribbon-property">
+                                    <input className="presBox-input" type="number" value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
+                                </div>
+                                <div className="ribbon-propertyUpDown">
+                                    <div className="ribbon-propertyUpDownItem" onClick={() => this.updateDurationTime(String(duration), 1000)}>
+                                        <FontAwesomeIcon icon={'caret-up'} />
+                                    </div>
+                                    <div className="ribbon-propertyUpDownItem" onClick={() => this.updateDurationTime(String(duration), -1000)}>
+                                        <FontAwesomeIcon icon={'caret-down'} />
+                                    </div>
+                                </div>
+                            </div>
+                            {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)}
+                            <div className={'slider-headers'} style={{ display: targetType === DocumentType.AUDIO ? 'none' : 'grid' }}>
+                                <div className="slider-text">Short</div>
+                                <div className="slider-text">Medium</div>
+                                <div className="slider-text">Long</div>
+                            </div>
+                        </>
+                    )}
+                </div>
+            );
+        }
+    }
+    @computed get progressivizeDropdown() {
+        const activeItem = this.activeItem;
+        if (activeItem && this.targetDoc && activeItem.presIndexed !== undefined) {
+            const effect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
+            const bulletEffect = (effect: PresEffect) => (
+                <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, true)}>
+                    {effect}
+                </div>
+            );
+            return (
+                <div className="presBox-ribbon">
+                    <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                        <div className="presBox-subheading">Progressivize Collection</div>
+                        <input
+                            className="presBox-checkbox"
+                            style={{ margin: 10 }}
+                            type="checkbox"
+                            onChange={() => {
+                                activeItem.presIndexed = activeItem.presIndexed === undefined ? 0 : undefined;
+                                activeItem.presHideBefore = activeItem.presIndexed !== undefined;
+                            }}
+                            checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
+                        />
+                    </div>
+                    {activeItem.presIndexed === undefined ? null : (
+                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                            <div className="presBox-subheading">Expand Current Bullet</div>
+                            <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} />
+                        </div>
+                    )}
+                    <div className="presBox-subheading">Progressive effect</div>
+                    <div
+                        className="presBox-dropdown"
+                        onClick={action(e => {
+                            e.stopPropagation();
+                            this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
+                        })}
+                        style={{ borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, border: this._openBulletEffectDropdown ? `solid 2px ${Colors.MEDIUM_BLUE}` : 'solid 1px black' }}>
+                        {effect?.toString()}
+                        <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
+                        <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
+                            {bulletEffect(PresEffect.None)}
+                            {bulletEffect(PresEffect.Fade)}
+                            {bulletEffect(PresEffect.Flip)}
+                            {bulletEffect(PresEffect.Rotate)}
+                            {bulletEffect(PresEffect.Bounce)}
+                            {bulletEffect(PresEffect.Roll)}
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        return null;
+    }
     @computed get transitionDropdown() {
-        const activeItem: Doc = this.activeItem;
-        const targetDoc: Doc = this.targetDoc;
-        const presEffect = (effect: PresEffect, bullet: boolean) => (
-            <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, bullet)}>
+        const activeItem = this.activeItem;
+        const presEffect = (effect: PresEffect) => (
+            <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, false)}>
                 {effect}
             </div>
         );
@@ -1458,15 +1605,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </Tooltip>
             );
         };
-        if (activeItem && targetDoc) {
-            const type = targetDoc.type;
+        if (activeItem && this.targetDoc) {
             const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5;
             const zoom = NumCast(activeItem.presZoom, 1) * 100;
-            let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 0;
-            if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
             const effect = activeItem.presEffect ? activeItem.presEffect : PresMovement.None;
-            const bulletEffect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
-            // activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : PresMovement.Zoom;
             return (
                 <div
                     className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presStatus === PresStatus.Edit ? 'active' : ''}`}
@@ -1500,95 +1642,39 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
                             <div className="presBox-subheading">Zoom (% screen filled)</div>
                             <div className="ribbon-property">
-                                <input className="presBox-input" type="number" value={zoom} onChange={action(e => this.setZoom(e.target.value))} />%
+                                <input className="presBox-input" type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
                             </div>
                             <div className="ribbon-propertyUpDown">
-                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
+                                <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), 0.1)}>
                                     <FontAwesomeIcon icon={'caret-up'} />
                                 </div>
-                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
+                                <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), -0.1)}>
                                     <FontAwesomeIcon icon={'caret-down'} />
                                 </div>
                             </div>
                         </div>
-                        {PresBox.inputter('0', '1', '100', zoom, activeItem.presMovement === PresMovement.Zoom, this.setZoom)}
+                        {PresBox.inputter('0', '1', '100', zoom, activeItem.presMovement === PresMovement.Zoom, this.updateZoom)}
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                            <div className="presBox-subheading">Transition Speed</div>
+                            <div className="presBox-subheading">Transition Time</div>
                             <div className="ribbon-property">
-                                <input className="presBox-input" type="number" value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.setTransitionTime(e.target.value))} /> s
+                                <input className="presBox-input" type="number" value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
                             </div>
                             <div className="ribbon-propertyUpDown">
-                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setTransitionTime(String(transitionSpeed), 1000))}>
+                                <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), 1000)}>
                                     <FontAwesomeIcon icon={'caret-up'} />
                                 </div>
-                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setTransitionTime(String(transitionSpeed), -1000))}>
+                                <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), -1000)}>
                                     <FontAwesomeIcon icon={'caret-down'} />
                                 </div>
                             </div>
                         </div>
-                        {PresBox.inputter('0.1', '0.1', '100', transitionSpeed, true, this.setTransitionTime)}
+                        {PresBox.inputter('0.1', '0.1', '100', transitionSpeed, true, this.updateTransitionTime)}
                         <div className={'slider-headers'}>
                             <div className="slider-text">Fast</div>
                             <div className="slider-text">Medium</div>
                             <div className="slider-text">Slow</div>
                         </div>
                     </div>
-                    <div className="ribbon-box">
-                        Visibility {'&'} Duration
-                        <div className="ribbon-doubleButton">
-                            <Tooltip title={<div className="dash-tooltip">{'Hide before presented'}</div>}>
-                                <div className={`ribbon-toggle ${activeItem.presHideBefore ? 'active' : ''}`} onClick={() => this.updateHideBefore(activeItem)}>
-                                    Hide before
-                                </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">{'Hide while presented'}</div>}>
-                                <div className={`ribbon-toggle ${activeItem.presHide ? 'active' : ''}`} onClick={() => this.updateHide(activeItem)}>
-                                    Hide
-                                </div>
-                            </Tooltip>
-
-                            <Tooltip title={<div className="dash-tooltip">{'Hide after presented'}</div>}>
-                                <div className={`ribbon-toggle ${activeItem.presHideAfter ? 'active' : ''}`} onClick={() => this.updateHideAfter(activeItem)}>
-                                    Hide after
-                                </div>
-                            </Tooltip>
-
-                            <Tooltip title={<div className="dash-tooltip">{'Open in lightbox view'}</div>}>
-                                <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presOpenInLightbox ? Colors.LIGHT_BLUE : '' }} onClick={() => this.updateOpenDoc(activeItem)}>
-                                    Lightbox
-                                </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">{'Transition movement style'}</div>}>
-                                <div className="ribbon-toggle" onClick={() => this.updateEaseFunc(activeItem)}>
-                                    {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
-                                </div>
-                            </Tooltip>
-                        </div>
-                        {type === DocumentType.AUDIO || type === DocumentType.VID ? null : (
-                            <>
-                                <div className="ribbon-doubleButton">
-                                    <div className="presBox-subheading">Slide Duration</div>
-                                    <div className="ribbon-property">
-                                        <input className="presBox-input" type="number" value={duration} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.setDurationTime(e.target.value))} /> s
-                                    </div>
-                                    <div className="ribbon-propertyUpDown">
-                                        <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setDurationTime(String(duration), 1000))}>
-                                            <FontAwesomeIcon icon={'caret-up'} />
-                                        </div>
-                                        <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setDurationTime(String(duration), -1000))}>
-                                            <FontAwesomeIcon icon={'caret-down'} />
-                                        </div>
-                                    </div>
-                                </div>
-                                {PresBox.inputter('0.1', '0.1', '20', duration, targetDoc.type !== DocumentType.AUDIO, this.setDurationTime)}
-                                <div className={'slider-headers'} style={{ display: targetDoc.type === DocumentType.AUDIO ? 'none' : 'grid' }}>
-                                    <div className="slider-text">Short</div>
-                                    <div className="slider-text">Medium</div>
-                                    <div className="slider-text">Long</div>
-                                </div>
-                            </>
-                        )}
-                    </div>
                     <div className="ribbon-box">
                         Effects
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
@@ -1609,12 +1695,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {effect?.toString()}
                             <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
-                                {presEffect(PresEffect.None, false)}
-                                {presEffect(PresEffect.Fade, false)}
-                                {presEffect(PresEffect.Flip, false)}
-                                {presEffect(PresEffect.Rotate, false)}
-                                {presEffect(PresEffect.Bounce, false)}
-                                {presEffect(PresEffect.Roll, false)}
+                                {presEffect(PresEffect.None)}
+                                {presEffect(PresEffect.Fade)}
+                                {presEffect(PresEffect.Flip)}
+                                {presEffect(PresEffect.Rotate)}
+                                {presEffect(PresEffect.Bounce)}
+                                {presEffect(PresEffect.Roll)}
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}>
@@ -1628,49 +1714,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {presDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
                             {presDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
                         </div>
-                        <div className="ribbon-Box">Progressive Disclosure</div>
-                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                            <div className="presBox-subheading">Progressivize Collection</div>
-                            <input
-                                className="presBox-checkbox"
-                                style={{ margin: 10 }}
-                                type="checkbox"
-                                onChange={() => {
-                                    activeItem.presIndexed = activeItem.presIndexed === undefined ? 0 : undefined;
-                                    activeItem.presHideBefore = activeItem.presIndexed !== undefined;
-                                }}
-                                checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
-                            />
-                        </div>
-                        {activeItem.presIndexed === undefined ? null : (
-                            <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                                <div className="presBox-subheading">Expand Current Bullet</div>
-                                <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} />
-                            </div>
-                        )}
-                        {activeItem.presIndexed === undefined ? null : (
-                            <div className="presBox-subheading">
-                                Progressive effect
-                                <div
-                                    className="presBox-dropdown"
-                                    onClick={action(e => {
-                                        e.stopPropagation();
-                                        this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
-                                    })}
-                                    style={{ borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, border: this._openBulletEffectDropdown ? `solid 2px ${Colors.MEDIUM_BLUE}` : 'solid 1px black' }}>
-                                    {bulletEffect?.toString()}
-                                    <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
-                                    <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
-                                        {presEffect(PresEffect.None, true)}
-                                        {presEffect(PresEffect.Fade, true)}
-                                        {presEffect(PresEffect.Flip, true)}
-                                        {presEffect(PresEffect.Rotate, true)}
-                                        {presEffect(PresEffect.Bounce, true)}
-                                        {presEffect(PresEffect.Roll, true)}
-                                    </div>
-                                </div>
-                            </div>
-                        )}
                     </div>
                     <div className="ribbon-final-box">
                         <div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
@@ -1681,174 +1724,154 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             );
         }
     }
-
-    @undoBatch
-    @action
-    applyTo = (array: Doc[]) => {
-        this.updateMovement(this.activeItem.presMovement as PresMovement, true);
-        this.updateEffect(this.activeItem.presEffect as PresEffect, false, true);
-        this.updateEffect(this.activeItem.presBulletEffect as PresEffect, true, true);
-        this.updateEffectDirection(this.activeItem.presEffectDirection as PresEffectDirection, true);
-        const { presTransition, presDuration, presHideBefore, presHideAfter } = this.activeItem;
-        array.forEach(curDoc => {
-            curDoc.presTransition = presTransition;
-            curDoc.presDuration = presDuration;
-            curDoc.presHideBefore = presHideBefore;
-            curDoc.presHideAfter = presHideAfter;
-        });
-    };
-
     @computed get mediaOptionsDropdown() {
-        const activeItem: Doc = this.activeItem;
-        const targetDoc: Doc = this.targetDoc;
-        const clipStart: number = NumCast(activeItem.clipStart);
-        const clipEnd: number = NumCast(activeItem.clipEnd, NumCast(activeItem[Doc.LayoutFieldKey(activeItem) + '-duration']));
-        const mediaStopDocInd: number = NumCast(activeItem.mediaStopDoc);
-        if (activeItem && targetDoc) {
+        const activeItem = this.activeItem;
+        if (activeItem && this.targetDoc) {
+            const clipStart = NumCast(activeItem.clipStart);
+            const clipEnd = NumCast(activeItem.clipEnd, NumCast(activeItem[Doc.LayoutFieldKey(activeItem) + '-duration']));
             return (
-                <div>
-                    <div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                        <div>
-                            <div className="ribbon-box">
-                                Start {'&'} End Time
-                                <div className={'slider-headers'}>
-                                    <div className="slider-block">
-                                        <div className="slider-text" style={{ fontWeight: 500 }}>
-                                            Start time (s)
-                                        </div>
-                                        <div id={'startTime'} className="slider-number" style={{ backgroundColor: Colors.LIGHT_GRAY }}>
-                                            <input
-                                                className="presBox-input"
-                                                style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
-                                                type="number"
-                                                value={NumCast(activeItem.presStartTime).toFixed(2)}
-                                                onKeyDown={e => e.stopPropagation()}
-                                                onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
-                                                    activeItem.presStartTime = Number(e.target.value);
-                                                })}
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className="slider-block">
-                                        <div className="slider-text" style={{ fontWeight: 500 }}>
-                                            Duration (s)
-                                        </div>
-                                        <div className="slider-number" style={{ backgroundColor: Colors.LIGHT_BLUE }}>
-                                            {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10}
-                                        </div>
+                <div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
+                    <div>
+                        <div className="ribbon-box">
+                            Start {'&'} End Time
+                            <div className={'slider-headers'}>
+                                <div className="slider-block">
+                                    <div className="slider-text" style={{ fontWeight: 500 }}>
+                                        Start time (s)
                                     </div>
-                                    <div className="slider-block">
-                                        <div className="slider-text" style={{ fontWeight: 500 }}>
-                                            End time (s)
-                                        </div>
-                                        <div id={'endTime'} className="slider-number" style={{ backgroundColor: Colors.LIGHT_GRAY }}>
-                                            <input
-                                                className="presBox-input"
-                                                onKeyDown={e => e.stopPropagation()}
-                                                style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
-                                                type="number"
-                                                value={NumCast(activeItem.presEndTime).toFixed(2)}
-                                                onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
-                                                    activeItem.presEndTime = Number(e.target.value);
-                                                })}
-                                            />
-                                        </div>
+                                    <div id={'startTime'} className="slider-number" style={{ backgroundColor: Colors.LIGHT_GRAY }}>
+                                        <input
+                                            className="presBox-input"
+                                            style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
+                                            type="number"
+                                            value={NumCast(activeItem.presStartTime).toFixed(2)}
+                                            onKeyDown={e => e.stopPropagation()}
+                                            onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
+                                                activeItem.presStartTime = Number(e.target.value);
+                                            })}
+                                        />
                                     </div>
                                 </div>
-                                <div className="multiThumb-slider">
-                                    <input
-                                        type="range"
-                                        step="0.1"
-                                        min={clipStart}
-                                        max={clipEnd}
-                                        value={NumCast(activeItem.presEndTime)}
-                                        style={{ gridColumn: 1, gridRow: 1 }}
-                                        className={`toolbar-slider ${'end'}`}
-                                        id="toolbar-slider"
-                                        onPointerDown={e => {
-                                            this._batch = UndoManager.StartBatch('presEndTime');
-                                            const endBlock = document.getElementById('endTime');
-                                            if (endBlock) {
-                                                endBlock.style.color = Colors.LIGHT_GRAY;
-                                                endBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
-                                            }
-                                            e.stopPropagation();
-                                        }}
-                                        onPointerUp={() => {
-                                            this._batch?.end();
-                                            const endBlock = document.getElementById('endTime');
-                                            if (endBlock) {
-                                                endBlock.style.color = Colors.BLACK;
-                                                endBlock.style.backgroundColor = Colors.LIGHT_GRAY;
-                                            }
-                                        }}
-                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                            e.stopPropagation();
-                                            activeItem.presEndTime = Number(e.target.value);
-                                        }}
-                                    />
-                                    <input
-                                        type="range"
-                                        step="0.1"
-                                        min={clipStart}
-                                        max={clipEnd}
-                                        value={NumCast(activeItem.presStartTime)}
-                                        style={{ gridColumn: 1, gridRow: 1 }}
-                                        className={`toolbar-slider ${'start'}`}
-                                        id="toolbar-slider"
-                                        onPointerDown={e => {
-                                            this._batch = UndoManager.StartBatch('presStartTime');
-                                            const startBlock = document.getElementById('startTime');
-                                            if (startBlock) {
-                                                startBlock.style.color = Colors.LIGHT_GRAY;
-                                                startBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
-                                            }
-                                            e.stopPropagation();
-                                        }}
-                                        onPointerUp={() => {
-                                            this._batch?.end();
-                                            const startBlock = document.getElementById('startTime');
-                                            if (startBlock) {
-                                                startBlock.style.color = Colors.BLACK;
-                                                startBlock.style.backgroundColor = Colors.LIGHT_GRAY;
-                                            }
-                                        }}
-                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                            e.stopPropagation();
-                                            activeItem.presStartTime = Number(e.target.value);
-                                        }}
-                                    />
-                                </div>
-                                <div className="slider-headers">
-                                    <div className="slider-text">{clipStart.toFixed(2)} s</div>
-                                    <div className="slider-text"></div>
-                                    <div className="slider-text">{clipEnd.toFixed(2)} s</div>
-                                </div>
-                            </div>
-                            <div className="ribbon-final-box">
-                                Playback
-                                <div className="presBox-subheading">Start playing:</div>
-                                <div className="presBox-radioButtons">
-                                    <div className="checkbox-container">
-                                        <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStart = 'manual')} checked={activeItem.mediaStart === 'manual'} />
-                                        <div>On click</div>
+                                <div className="slider-block">
+                                    <div className="slider-text" style={{ fontWeight: 500 }}>
+                                        Duration (s)
                                     </div>
-                                    <div className="checkbox-container">
-                                        <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStart = 'auto')} checked={activeItem.mediaStart === 'auto'} />
-                                        <div>Automatically</div>
+                                    <div className="slider-number" style={{ backgroundColor: Colors.LIGHT_BLUE }}>
+                                        {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10}
                                     </div>
                                 </div>
-                                <div className="presBox-subheading">Stop playing:</div>
-                                <div className="presBox-radioButtons">
-                                    <div className="checkbox-container">
-                                        <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStop = 'manual')} checked={activeItem.mediaStop === 'manual'} />
-                                        <div>At audio end time</div>
+                                <div className="slider-block">
+                                    <div className="slider-text" style={{ fontWeight: 500 }}>
+                                        End time (s)
                                     </div>
-                                    <div className="checkbox-container">
-                                        <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStop = 'auto')} checked={activeItem.mediaStop === 'auto'} />
-                                        <div>On slide change</div>
+                                    <div id={'endTime'} className="slider-number" style={{ backgroundColor: Colors.LIGHT_GRAY }}>
+                                        <input
+                                            className="presBox-input"
+                                            onKeyDown={e => e.stopPropagation()}
+                                            style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
+                                            type="number"
+                                            value={NumCast(activeItem.presEndTime).toFixed(2)}
+                                            onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
+                                                activeItem.presEndTime = Number(e.target.value);
+                                            })}
+                                        />
                                     </div>
-                                    {/* <div className="checkbox-container">
+                                </div>
+                            </div>
+                            <div className="multiThumb-slider">
+                                <input
+                                    type="range"
+                                    step="0.1"
+                                    min={clipStart}
+                                    max={clipEnd}
+                                    value={NumCast(activeItem.presEndTime)}
+                                    style={{ gridColumn: 1, gridRow: 1 }}
+                                    className={`toolbar-slider ${'end'}`}
+                                    id="toolbar-slider"
+                                    onPointerDown={e => {
+                                        this._batch = UndoManager.StartBatch('presEndTime');
+                                        const endBlock = document.getElementById('endTime');
+                                        if (endBlock) {
+                                            endBlock.style.color = Colors.LIGHT_GRAY;
+                                            endBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
+                                        }
+                                        e.stopPropagation();
+                                    }}
+                                    onPointerUp={() => {
+                                        this._batch?.end();
+                                        const endBlock = document.getElementById('endTime');
+                                        if (endBlock) {
+                                            endBlock.style.color = Colors.BLACK;
+                                            endBlock.style.backgroundColor = Colors.LIGHT_GRAY;
+                                        }
+                                    }}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        e.stopPropagation();
+                                        activeItem.presEndTime = Number(e.target.value);
+                                    }}
+                                />
+                                <input
+                                    type="range"
+                                    step="0.1"
+                                    min={clipStart}
+                                    max={clipEnd}
+                                    value={NumCast(activeItem.presStartTime)}
+                                    style={{ gridColumn: 1, gridRow: 1 }}
+                                    className={`toolbar-slider ${'start'}`}
+                                    id="toolbar-slider"
+                                    onPointerDown={e => {
+                                        this._batch = UndoManager.StartBatch('presStartTime');
+                                        const startBlock = document.getElementById('startTime');
+                                        if (startBlock) {
+                                            startBlock.style.color = Colors.LIGHT_GRAY;
+                                            startBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
+                                        }
+                                        e.stopPropagation();
+                                    }}
+                                    onPointerUp={() => {
+                                        this._batch?.end();
+                                        const startBlock = document.getElementById('startTime');
+                                        if (startBlock) {
+                                            startBlock.style.color = Colors.BLACK;
+                                            startBlock.style.backgroundColor = Colors.LIGHT_GRAY;
+                                        }
+                                    }}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        e.stopPropagation();
+                                        activeItem.presStartTime = Number(e.target.value);
+                                    }}
+                                />
+                            </div>
+                            <div className="slider-headers">
+                                <div className="slider-text">{clipStart.toFixed(2)} s</div>
+                                <div className="slider-text"></div>
+                                <div className="slider-text">{clipEnd.toFixed(2)} s</div>
+                            </div>
+                        </div>
+                        <div className="ribbon-final-box">
+                            Playback
+                            <div className="presBox-subheading">Start playing:</div>
+                            <div className="presBox-radioButtons">
+                                <div className="checkbox-container">
+                                    <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStart = 'manual')} checked={activeItem.mediaStart === 'manual'} />
+                                    <div>On click</div>
+                                </div>
+                                <div className="checkbox-container">
+                                    <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStart = 'auto')} checked={activeItem.mediaStart === 'auto'} />
+                                    <div>Automatically</div>
+                                </div>
+                            </div>
+                            <div className="presBox-subheading">Stop playing:</div>
+                            <div className="presBox-radioButtons">
+                                <div className="checkbox-container">
+                                    <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStop = 'manual')} checked={activeItem.mediaStop === 'manual'} />
+                                    <div>At audio end time</div>
+                                </div>
+                                <div className="checkbox-container">
+                                    <input className="presBox-checkbox" type="checkbox" onChange={() => (activeItem.mediaStop = 'auto')} checked={activeItem.mediaStop === 'auto'} />
+                                    <div>On slide change</div>
+                                </div>
+                                {/* <div className="checkbox-container">
                                     <input className="presBox-checkbox"
                                         type="checkbox"
                                         onChange={() => activeItem.mediaStop = "afterSlide"}
@@ -1865,7 +1888,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         </select>
                                     </div>
                                 </div> */}
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -1873,7 +1895,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             );
         }
     }
-
     @computed get newDocumentToolbarDropdown() {
         return (
             <div
@@ -2079,65 +2100,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     }
 
-    _keyTimer: NodeJS.Timeout | undefined;
-
-    /**
-     * Returns the collection type as a string for headers
-     */
-    @computed get stringType() {
-        if (this.activeItem) {
-            // prettier-ignore
-            switch (this.targetDoc.type) {
-                case DocumentType.PDF: return 'PDF';
-                case DocumentType.RTF: return 'Text node';
-                case DocumentType.COL: return 'Collection';
-                case DocumentType.AUDIO: return 'Audio';
-                case DocumentType.VID: return 'Video';
-                case DocumentType.IMG: return 'Image';
-                case DocumentType.WEB: return 'Web page';
-                case DocumentType.MAP: return 'Map';
-                default: return 'Other node';
-            }
-        }
-        return '';
-    }
-
-    @observable private openActiveColorPicker: boolean = false;
-    @observable private openViewedColorPicker: boolean = false;
-
-    @undoBatch
-    @action
-    switchActive = (color: ColorState) => {
-        this.targetDoc['pres-text-color'] = String(color.hex);
-        return true;
-    };
-    @undoBatch
-    @action
-    switchPresented = (color: ColorState) => {
-        this.targetDoc['pres-text-viewed-color'] = String(color.hex);
-        return true;
-    };
-
-    @computed get activeColorPicker() {
-        return !this.openActiveColorPicker ? null : (
-            <SketchPicker
-                onChange={this.switchActive}
-                presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
-                color={StrCast(this.targetDoc['pres-text-color'])}
-            />
-        );
-    }
-
-    @computed get viewedColorPicker() {
-        return !this.openViewedColorPicker ? null : (
-            <SketchPicker
-                onChange={this.switchPresented}
-                presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
-                color={StrCast(this.targetDoc['pres-text-viewed-color'])}
-            />
-        );
-    }
-
     @action
     turnOffEdit = (paths?: boolean) => paths && this.togglePath(true); // Turn off paths
 
@@ -2174,14 +2136,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 {isMini ? null : (
                     <>
                         <div className="toolbar-divider" />
-                        {/* <Tooltip title={<><div className="dash-tooltip">{this._expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
-                            <div className={"toolbar-button"}
-                                style={{ color: this._expandBoolean ? Colors.MEDIUM_BLUE : 'white' }}
-                                onClick={this.toggleExpandMode}>
-                                <FontAwesomeIcon icon={"eye"} />
-                            </div>
-                        </Tooltip>
-                        <div className="toolbar-divider" /> */}
                         <Tooltip title={<div className="dash-tooltip">{this._presKeyEvents ? 'Keys are active' : 'Keys are not active - click anywhere on the presentation trail to activate keys'}</div>}>
                             <div className="toolbar-button" style={{ cursor: this._presKeyEvents ? 'default' : 'pointer', position: 'absolute', right: 30, fontSize: 16 }}>
                                 <FontAwesomeIcon className={'toolbar-thumbtack'} icon={'keyboard'} style={{ color: this._presKeyEvents ? activeColor : inactiveColor }} />
@@ -2256,7 +2210,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     @computed get playButtons() {
-        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.presIndexedItems(this.activeItem)?.length ?? 0));
+        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
         const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         // Case 1: There are still other frames and should go through all frames before going to next slide
@@ -2345,7 +2299,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </Tooltip>
                 <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}>
                     {inOverlay ? '' : 'Slide'} {this.itemIndex + 1}
-                    {this.activeItem?.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
+                    {this.activeItem?.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
                 </div>
                 <div className="presPanel-divider"></div>
                 {this.props.PanelWidth() > 250 ? (
@@ -2392,6 +2346,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.layoutDoc.presStatus = PresStatus.Manual;
         }
     };
+
     @undoBatch
     @action
     exitClicked = () => {
@@ -2423,14 +2378,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return this.childDocs;
     };
 
-    // TODO: [AL] implement sort function for an array of numbers (e.g. arr[1,2,4] v arr[1,2,1])
     sort = (treeViewMap: Map<Doc, number>) => [...treeViewMap.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]);
 
     render() {
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.presIndexedItems(this.activeItem)?.length ?? 0));
+        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
         const presStart = !this.layoutDoc.presLoop && this.itemIndex === 0;
         const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player
@@ -2466,7 +2420,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     </Tooltip>
                     <div className="presPanel-button-text">
                         Slide {this.itemIndex + 1}
-                        {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.presIndexedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
+                        {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
                     </div>
                     <div className="presPanel-divider" />
                     <div className="presPanel-button-text" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.exitClicked, false, false)}>
@@ -2493,6 +2447,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 //childFitWidth={returnTrue}
                                 childOpacity={returnOne}
                                 //childLayoutString={PresElementBox.LayoutString('data')}
+                                childClickScript={PresBox.navigateToDocScript}
                                 childLayoutTemplate={this.childLayoutTemplate}
                                 childXPadding={Doc.IsComicStyle(this.rootDoc) ? 20 : undefined}
                                 filterAddDocument={this.addDocumentFilter}
@@ -2520,11 +2475,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             </div>
         );
     }
-    static NavigateToDoc(bestTarget: Doc, activeItem: Doc) {
-        PresBox.NavigateToTarget(bestTarget, activeItem);
-    }
 }
 
 ScriptingGlobals.add(function navigateToDoc(bestTarget: Doc, activeItem: Doc) {
-    PresBox.NavigateToDoc(bestTarget, activeItem);
+    PresBox.NavigateToTarget(bestTarget, activeItem);
 });
-- 
cgit v1.2.3-70-g09d2


From 8341b50668ddaea01e6a2590c6d3f3b4365d1185 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 8 Mar 2023 23:34:42 -0500
Subject: made startIndex for progressivize an option.  change progressivize
 slide# display

---
 src/client/views/nodes/trails/PresBox.tsx | 66 ++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 28 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index b5a24a380..2975e49ab 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -882,10 +882,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (doc.presHideBefore && index > startIndex) tagDoc.opacity = 0;
             if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
             if (doc.presIndexed !== undefined && index >= startIndex) {
+                const type = DocCast(tagDoc.annotationOn)?.type ?? tagDoc.type;
+                const startInd = NumCast(doc.presIndexedStart);
                 this.progressivizedItems(doc)
-                    ?.slice(doc.type === DocumentType.COL ? 1 : 0)
+                    ?.slice(startInd)
                     .forEach(indexedDoc => (indexedDoc.opacity = 0));
-                doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, doc.type === DocumentType.COL ? 1 : 0);
+                doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, startInd);
             }
             // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
         });
@@ -1529,7 +1531,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     @computed get progressivizeDropdown() {
         const activeItem = this.activeItem;
-        if (activeItem && this.targetDoc && activeItem.presIndexed !== undefined) {
+        if (activeItem && this.targetDoc) {
             const effect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
             const bulletEffect = (effect: PresEffect) => (
                 <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, true)}>
@@ -1547,33 +1549,41 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             onChange={() => {
                                 activeItem.presIndexed = activeItem.presIndexed === undefined ? 0 : undefined;
                                 activeItem.presHideBefore = activeItem.presIndexed !== undefined;
+                                const tagDoc = PresBox.targetRenderedDoc(this.activeItem);
+                                const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type;
+                                activeItem.presIndexedStart = type === DocumentType.COL ? 1 : 0;
                             }}
                             checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
                         />
                     </div>
-                    {activeItem.presIndexed === undefined ? null : (
-                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                            <div className="presBox-subheading">Expand Current Bullet</div>
-                            <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} />
-                        </div>
-                    )}
-                    <div className="presBox-subheading">Progressive effect</div>
-                    <div
-                        className="presBox-dropdown"
-                        onClick={action(e => {
-                            e.stopPropagation();
-                            this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
-                        })}
-                        style={{ borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, border: this._openBulletEffectDropdown ? `solid 2px ${Colors.MEDIUM_BLUE}` : 'solid 1px black' }}>
-                        {effect?.toString()}
-                        <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
-                        <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
-                            {bulletEffect(PresEffect.None)}
-                            {bulletEffect(PresEffect.Fade)}
-                            {bulletEffect(PresEffect.Flip)}
-                            {bulletEffect(PresEffect.Rotate)}
-                            {bulletEffect(PresEffect.Bounce)}
-                            {bulletEffect(PresEffect.Roll)}
+                    <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                        <div className="presBox-subheading">Progressivize First Bullet</div>
+                        <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presIndexedStart = activeItem.presIndexedStart ? 0 : 1)} checked={!NumCast(activeItem.presIndexedStart)} />
+                    </div>
+                    <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                        <div className="presBox-subheading">Expand Current Bullet</div>
+                        <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} />
+                    </div>
+
+                    <div className="ribbon-box">
+                        Bullet Effect
+                        <div
+                            className="presBox-dropdown"
+                            onClick={action(e => {
+                                e.stopPropagation();
+                                this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
+                            })}
+                            style={{ borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, border: this._openBulletEffectDropdown ? `solid 2px ${Colors.MEDIUM_BLUE}` : 'solid 1px black' }}>
+                            {effect?.toString()}
+                            <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
+                            <div className={'presBox-dropdownOptions'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
+                                {bulletEffect(PresEffect.None)}
+                                {bulletEffect(PresEffect.Fade)}
+                                {bulletEffect(PresEffect.Flip)}
+                                {bulletEffect(PresEffect.Rotate)}
+                                {bulletEffect(PresEffect.Bounce)}
+                                {bulletEffect(PresEffect.Roll)}
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -2299,7 +2309,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </Tooltip>
                 <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}>
                     {inOverlay ? '' : 'Slide'} {this.itemIndex + 1}
-                    {this.activeItem?.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
+                    {this.activeItem?.presIndexed !== undefined ? `(${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
                 </div>
                 <div className="presPanel-divider"></div>
                 {this.props.PanelWidth() > 250 ? (
@@ -2420,7 +2430,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     </Tooltip>
                     <div className="presPanel-button-text">
                         Slide {this.itemIndex + 1}
-                        {this.activeItem.presIndexed !== undefined ? `.${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length}` : ''} / {this.childDocs.length}
+                        {this.activeItem.presIndexed !== undefined ? `(${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
                     </div>
                     <div className="presPanel-divider" />
                     <div className="presPanel-button-text" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.exitClicked, false, false)}>
-- 
cgit v1.2.3-70-g09d2


From 096371e683b3f91edfadb2aaf9f8da3309b86014 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 9 Mar 2023 21:39:21 -0500
Subject: added reordering of progressivized docs

---
 src/client/documents/Documents.ts                  |  1 +
 src/client/util/CurrentUserUtils.ts                |  2 +-
 .../views/collections/CollectionTreeView.tsx       |  4 +--
 src/client/views/collections/CollectionView.tsx    |  4 +--
 src/client/views/collections/TreeView.tsx          | 12 ++++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 +-
 src/client/views/nodes/trails/PresBox.tsx          | 41 ++++++++++++----------
 7 files changed, 37 insertions(+), 29 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a7378c431..6296b0df4 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -335,6 +335,7 @@ export class DocumentOptions {
     strokeWidth?: number;
     freezeChildren?: string; // whether children are now allowed to be added and or removed from a collection
     treeViewHideTitle?: boolean; // whether to hide the top document title of a tree view
+    treeViewHideUnrendered?: boolean; // tells tree view not to display documents that have an 'unrendered' tag unless they also have a treeViewFieldKey tag (presBox)
     treeViewHideHeaderIfTemplate?: boolean; // whether to hide the header for a document in a tree view only if a childLayoutTemplate is provided (presBox)
     treeViewHideHeader?: boolean; // whether to hide the header for a document in a tree view
     treeViewHideHeaderFields?: boolean; // whether to hide the drop down options for tree view items.
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a7b2c3d04..2b0a2cdac 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -269,7 +269,7 @@ export class CurrentUserUtils {
             {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, _isLinkButton: true }},
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             // {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument(opts),         opts: { _width: 300, _height: 300 }},
-            {key: "Header",     creator: headerTemplate,                                    opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true,}},
+            {key: "Header",     creator: headerTemplate,                                    opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, treeViewHideUnrendered: true}},
             {key: "Trail",      creator: Docs.Create.PresDocument,                          opts: { _width: 400, _height: 30, _viewType: CollectionViewType.Stacking, targetDropAction: "alias" as any, treeViewHideTitle: true, _fitWidth:true, _chromeHidden: true, boxShadow: "0 0" }},
             {key: "Tab",        creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 500, _height: 800, _fitWidth: true, _backgroundGridShow: true, }},
             {key: "Slide",      creator: opts => Docs.Create.TreeDocument([], opts),        opts: { _width: 300, _height: 200, _viewType: CollectionViewType.Tree, 
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 330e116d1..553967b95 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -38,8 +38,8 @@ export type collectionTreeViewProps = {
     onCheckedClick?: () => ScriptField;
     onChildClick?: () => ScriptField;
     // TODO: [AL] add these fields
-    AddToMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
-    RemFromMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
+    AddToMap?: (treeViewDoc: Doc, index: number[]) => void;
+    RemFromMap?: (treeViewDoc: Doc, index: number[]) => void;
     hierarchyIndex?: number[];
 };
 
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 316f1e4e9..48e5748a0 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -64,8 +64,8 @@ interface CollectionViewProps_ extends FieldViewProps {
     childClickScript?: ScriptField;
     childDoubleClickScript?: ScriptField;
     //TODO: [AL] add these fields
-    AddToMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
-    RemFromMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
+    AddToMap?: (treeViewDoc: Doc, index: number[]) => void;
+    RemFromMap?: (treeViewDoc: Doc, index: number[]) => void;
     hierarchyIndex?: number[]; // hierarchical index of a document up to the rendering root (primarily used for tree views)
 }
 export interface CollectionViewProps extends React.PropsWithChildren<CollectionViewProps_> {}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 0d2968ba1..c8dc68eae 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -66,8 +66,8 @@ export interface TreeViewProps {
     skipFields?: string[];
     firstLevel: boolean;
     // TODO: [AL] add these
-    AddToMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
-    RemFromMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
+    AddToMap?: (treeViewDoc: Doc, index: number[]) => void;
+    RemFromMap?: (treeViewDoc: Doc, index: number[]) => void;
     hierarchyIndex?: number[];
 }
 
@@ -1028,7 +1028,9 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     // renders the text version of a document as the header.  This is used in the file system mode and in other vanilla tree views.
     @computed get renderTitleAsHeader() {
-        return (
+        return this.props.treeView.Document.treeViewHideUnrendered && this.doc.unrendered && !this.doc.treeViewFieldKey ? (
+            <div></div>
+        ) : (
             <>
                 {this.renderBullet}
                 {this.renderTitle}
@@ -1146,8 +1148,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         unobserveHeight: (ref: any) => void,
         contextMenuItems: { script: ScriptField; filter: ScriptField; label: string; icon: string }[],
         // TODO: [AL] add these
-        AddToMap?: (treeViewDoc: Doc, index: number[]) => Doc[],
-        RemFromMap?: (treeViewDoc: Doc, index: number[]) => Doc[],
+        AddToMap?: (treeViewDoc: Doc, index: number[]) => void,
+        RemFromMap?: (treeViewDoc: Doc, index: number[]) => void,
         hierarchyIndex?: number[],
         renderCount?: number
     ) {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b92a8ec4d..87177cd74 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -519,7 +519,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._clusterSets.push([doc]);
             } else if (this._clusterSets.length) {
                 for (let i = this._clusterSets.length; i <= doc.cluster; i++) !this._clusterSets[i] && this._clusterSets.push([]);
-                this._clusterSets[doc.cluster].push(doc);
+                this._clusterSets[doc.cluster ?? 0].push(doc);
             }
         }
     }
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 2975e49ab..2d9aaeca4 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -9,7 +9,7 @@ import { InkField, InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { listSpec } from '../../../../fields/Schema';
-import { ScriptField } from '../../../../fields/ScriptField';
+import { ComputedField, ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { AudioField } from '../../../../fields/URLField';
 import { emptyFunction, emptyPath, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../Utils';
@@ -35,6 +35,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { ScriptingBox } from '../ScriptingBox';
 import './PresBox.scss';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
+import { tag } from 'xregexp/types';
 const { Howl } = require('howler');
 
 export interface pinDataTypes {
@@ -306,8 +307,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         this.activeItem.presIndexed = presIndexed + 1;
                     }
                     return true;
-                } else {
-                    console.log(this.activeItem.presIndexed);
                 }
             }
         };
@@ -359,8 +358,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         Doc.UnBrushAllDocs();
         if (index >= 0 && index < this.childDocs.length) {
             this.rootDoc._itemIndex = index;
-            const activeItem: Doc = this.activeItem;
-            const targetDoc: Doc = this.targetDoc;
             if (from?.mediaStopTriggerList && this.layoutDoc.presStatus !== PresStatus.Edit) {
                 DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia);
             }
@@ -368,8 +365,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 this.stopTempMedia(from.presentationTargetDoc);
             }
             // If next slide is audio / video 'Play automatically' then the next slide should be played
-            if (this.layoutDoc.presStatus !== PresStatus.Edit && (targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && activeItem.mediaStart === 'auto') {
-                this.startTempMedia(targetDoc, activeItem);
+            if (this.layoutDoc.presStatus !== PresStatus.Edit && (this.targetDoc.type === DocumentType.AUDIO || this.targetDoc.type === DocumentType.VID) && this.activeItem.mediaStart === 'auto') {
+                this.startTempMedia(this.targetDoc, this.activeItem);
             }
             if (!group) this.clearSelectedArray();
             this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); //Update selected array
@@ -755,17 +752,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const curDoc = Cast(doc, Doc, null);
             const tagDoc = PresBox.targetRenderedDoc(curDoc);
             const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc);
+            let opacity: Opt<number> = index === this.itemIndex ? 1 : undefined;
             if (curDoc.presHide) {
                 if (index !== this.itemIndex) {
-                    tagDoc.opacity = 1;
+                    opacity = 1;
                 }
             }
             const hidingIndBef = itemIndexes.find(item => item >= this.itemIndex) ?? itemIndexes.slice().reverse().lastElement();
             if (curDoc.presHideBefore && index === hidingIndBef) {
                 if (index > this.itemIndex) {
-                    tagDoc.opacity = 0;
+                    opacity = 0;
                 } else if (index === this.itemIndex || !curDoc.presHideAfter) {
-                    tagDoc.opacity = 1;
+                    opacity = 1;
                     setTimeout(() => (tagDoc._dataTransition = undefined), 1000);
                 }
             }
@@ -776,17 +774,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     .find(item => item <= this.itemIndex) ?? itemIndexes.lastElement();
             if (curDoc.presHideAfter && index === hidingIndAft) {
                 if (index < this.itemIndex) {
-                    tagDoc.opacity = 0;
+                    opacity = 0;
                 } else if (index === this.itemIndex || !curDoc.presHideBefore) {
-                    tagDoc.opacity = 1;
+                    opacity = 1;
                 }
             }
             const hidingInd = itemIndexes.find(item => item === this.itemIndex);
             if (curDoc.presHide && index === hidingInd) {
                 if (index === this.itemIndex) {
-                    tagDoc.opacity = 0;
+                    opacity = 0;
                 }
             }
+            opacity !== undefined && (tagDoc.opacity = opacity);
         });
     };
 
@@ -882,7 +881,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (doc.presHideBefore && index > startIndex) tagDoc.opacity = 0;
             if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
             if (doc.presIndexed !== undefined && index >= startIndex) {
-                const type = DocCast(tagDoc.annotationOn)?.type ?? tagDoc.type;
                 const startInd = NumCast(doc.presIndexedStart);
                 this.progressivizedItems(doc)
                     ?.slice(startInd)
@@ -1552,6 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 const tagDoc = PresBox.targetRenderedDoc(this.activeItem);
                                 const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type;
                                 activeItem.presIndexedStart = type === DocumentType.COL ? 1 : 0;
+                                // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized.
+                                // to avoid creating a new slide to correspond to each of the target's data list, we simply reference the target's data list.
+                                let dataField = Doc.LayoutFieldKey(tagDoc);
+                                if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '-annotations';
+
+                                if (DocCast(activeItem.presentationTargetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`self.presentationTargetDoc.annotationOn["${dataField}"]`);
+                                else activeItem.data = ComputedField.MakeFunction(`self.presentationTargetDoc["${dataField}"]`);
                             }}
                             checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
                         />
@@ -2364,7 +2369,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         clearTimeout(this._presTimer);
     };
 
-    AddToMap = (treeViewDoc: Doc, index: number[]): Doc[] => {
+    AddToMap = (treeViewDoc: Doc, index: number[]) => {
+        if (!treeViewDoc.presentationTargetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
         var indexNum = 0;
         for (let i = 0; i < index.length; i++) {
             indexNum += index[i] * 10 ** -i;
@@ -2377,15 +2383,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 this.dataDoc[this.presFieldKey] = new List<Doc>(sorted); // this is a flat array of Docs
             }
         }
-        return this.childDocs;
     };
 
-    RemFromMap = (treeViewDoc: Doc, index: number[]): Doc[] => {
+    RemFromMap = (treeViewDoc: Doc, index: number[]) => {
+        if (!treeViewDoc.presentationTargetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
         if (!this._unmounting && this.isTree) {
             this._treeViewMap.delete(treeViewDoc);
             this.dataDoc[this.presFieldKey] = new List<Doc>(this.sort(this._treeViewMap));
         }
-        return this.childDocs;
     };
 
     sort = (treeViewMap: Map<Doc, number>) => [...treeViewMap.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]);
-- 
cgit v1.2.3-70-g09d2


From 0fb643d13dc7dbdcd4ae0f4785f8f2bd3fbbc764 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 10 Mar 2023 21:48:11 -0500
Subject: fixed image anchors to save zoom/pan info and to focus() on content
 when following anchors.  fixed progresivized items in trails to not allow
 dragging items out or dropping new items in.

---
 src/client/documents/Documents.ts         |  3 ++
 src/client/views/collections/TreeView.tsx | 81 +++++++++++++++++--------------
 src/client/views/nodes/ImageBox.tsx       | 17 ++++++-
 src/client/views/nodes/MapBox/MapBox.tsx  |  7 +--
 src/client/views/nodes/trails/PresBox.tsx |  2 +-
 5 files changed, 68 insertions(+), 42 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6296b0df4..4dc1c3b71 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -261,6 +261,9 @@ export class DocumentOptions {
     activeFrame?: number; // the active frame of a document in a frame base collection
     appearFrame?: number; // the frame in which the document appears
     viewTransitionTime?: number; // transition duration for view parameters
+    presPanX?: number; // panX saved as a view spec
+    presPanY?: number; // panY saved as a view spec
+    presViewScale?: number; // viewScale saved as a view Spec
     presTransition?: number; //the time taken for the transition TO a document
     presDuration?: number; //the duration of the slide in presentation view
     presZoomText?: boolean; // whether text anchors should shown in a larger box when following links to make them stand out
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index c8dc68eae..054d61d0c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -8,7 +8,7 @@ import { List } from '../../../fields/List';
 import { RichTextField } from '../../../fields/RichTextField';
 import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
@@ -169,23 +169,6 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get selected() {
         return SelectionManager.IsSelected(this._docRef);
     }
-    //      SelectionManager.Views().lastElement()?.props.Document === this.props.document; }
-
-    @observable _presTimer!: NodeJS.Timeout;
-    @observable _presKeyEventsActive: boolean = false;
-
-    @observable _selectedArray: ObservableMap = new ObservableMap<Doc, any>();
-    // the selected item's index
-    @computed get itemIndex() {
-        return NumCast(this.doc._itemIndex);
-    }
-    // the item that's active
-    @computed get activeItem() {
-        return this.childDocs ? Cast(this.childDocs[NumCast(this.doc._itemIndex)], Doc, null) : undefined;
-    }
-    @computed get targetDoc() {
-        return Cast(this.activeItem?.presentationTargetDoc, Doc, null);
-    }
 
     childDocList(field: string) {
         const layout = Cast(Doc.LayoutField(this.doc), Doc, null);
@@ -195,11 +178,17 @@ export class TreeView extends React.Component<TreeViewProps> {
             DocListCastOrNull(this.doc[field])
         ); // otherwise use the document's data field
     }
+    moving: boolean = false;
     @undoBatch move = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => {
         if (this.doc !== target && addDoc !== returnFalse) {
+            const canAdd1 = (this.props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this.props.parentTreeView?.doc.data)) instanceof ComputedField);
+
             // bcz: this should all be running in a Temp undo batch instead of hackily testing for returnFalse
-            if (this.props.removeDoc?.(doc) === true) {
-                return addDoc(doc);
+            if (canAdd1 && this.props.removeDoc?.(doc) === true) {
+                this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = true);
+                const res = addDoc(doc);
+                this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = false);
+                return res;
             }
         }
         return false;
@@ -207,6 +196,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     @undoBatch @action remove = (doc: Doc | Doc[], key: string) => {
         this.props.treeView.props.select(false);
         const ind = this.dataDoc[key].indexOf(doc);
+
         const res = (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && Doc.RemoveDocFromList(this.dataDoc, key, doc), true);
         res && ind > 0 && DocumentManager.Instance.getDocumentView(this.dataDoc[key][ind - 1], this.props.treeView.props.CollectionView)?.select(false);
         return res;
@@ -378,20 +368,32 @@ export class TreeView extends React.Component<TreeViewProps> {
         const docDragData = de.complete.docDragData;
         if (docDragData && pt[0] < rect.left + rect.width) {
             if (docDragData.draggedDocuments[0] === this.doc) return true;
-            if (this.dropDocuments(docDragData.droppedDocuments, before, inside, docDragData.dropAction, docDragData.moveDocument, docDragData.treeViewDoc === this.props.treeView.props.Document)) {
+            if (this.dropDocuments(docDragData.droppedDocuments, before, inside, docDragData.dropAction, docDragData.removeDocument, docDragData.moveDocument, docDragData.treeViewDoc === this.props.treeView.props.Document)) {
                 e.stopPropagation();
             }
         }
     };
 
-    dropDocuments(droppedDocuments: Doc[], before: boolean, inside: number | boolean, dropAction: dropActionType, moveDocument: DragManager.MoveFunction | undefined, forceAdd: boolean) {
+    dropping: boolean = false;
+    dropDocuments(droppedDocuments: Doc[], before: boolean, inside: number | boolean, dropAction: dropActionType, removeDocument: DragManager.RemoveFunction | undefined, moveDocument: DragManager.MoveFunction | undefined, forceAdd: boolean) {
         const parentAddDoc = (doc: Doc | Doc[]) => this.props.addDocument(doc, undefined, before);
-        const canAdd = (!this.props.treeView.outlineMode && !StrCast((inside ? this.props.document : this.props.containerCollection)?.freezeChildren).includes('add')) || forceAdd;
-        const localAdd = (doc: Doc) => (Doc.AddDocToList(this.dataDoc, this.fieldKey, doc) && ((doc.context = this.doc.context) || true) ? true : false);
-        const addDoc = !inside ? parentAddDoc : (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && localAdd(doc), true as boolean);
+        const localAdd = (doc: Doc | Doc[]) => {
+            const innerAdd = (doc: Doc) => {
+                const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[this.fieldKey])) instanceof ComputedField;
+                const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, this.fieldKey, doc);
+                dataIsComputed && (doc.context = this.doc.context);
+                return added;
+            };
+            return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
+        };
+        const addDoc = inside ? localAdd : parentAddDoc;
         const move = (!dropAction || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same') && moveDocument;
+        const canAdd = (!this.props.treeView.outlineMode && !StrCast((inside ? this.props.document : this.props.containerCollection)?.freezeChildren).includes('add')) || forceAdd;
         if (canAdd) {
-            return UndoManager.RunInTempBatch(() => droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === 'proto' ? addDoc(d) : false) : addDoc(d)) || added, false));
+            this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = true);
+            const res = UndoManager.RunInTempBatch(() => droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === 'proto' ? addDoc(d) : false) : addDoc(d)) || added, false));
+            this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = false);
+            return res;
         }
         return false;
     }
@@ -437,12 +439,16 @@ export class TreeView extends React.Component<TreeViewProps> {
             const expandedWidth = () => this.props.panelWidth() - leftOffset.width;
             if (contents instanceof Doc || (Cast(contents, listSpec(Doc)) && Cast(contents, listSpec(Doc))!.length && Cast(contents, listSpec(Doc))![0] instanceof Doc)) {
                 const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key);
-                const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => {
-                    const added = Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                    added && (doc.context = this.doc.context);
-                    return added;
+                const moveDoc = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.move(doc, target, addDoc);
+                const addDoc = (doc: Doc | Doc[], addBefore?: Doc, before?: boolean) => {
+                    const innerAdd = (doc: Doc) => {
+                        const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
+                        const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
+                        dataIsComputed && (doc.context = this.doc.context);
+                        return added;
+                    };
+                    return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
                 };
-                const addDoc = (doc: Doc | Doc[], addBefore?: Doc, before?: boolean) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && localAdd(doc, addBefore, before), true);
                 contentElement = TreeView.GetChildElements(
                     contents instanceof Doc ? [contents] : DocListCast(contents),
                     this.props.treeView,
@@ -453,7 +459,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     this.props.prevSibling,
                     addDoc,
                     remDoc,
-                    this.move,
+                    moveDoc,
                     this.props.dropAction,
                     this.props.addDocTab,
                     this.titleStyleProvider,
@@ -533,6 +539,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             );
             const key = (expandKey === 'annotations' ? `${this.fieldKey}-` : '') + expandKey;
             const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key);
+            const moveDoc = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.move(doc, target, addDoc);
             const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => {
                 // if there's a sort ordering specified that can be modified on drop (eg, zorder can be modified, alphabetical can't),
                 // then the modification would be done here
@@ -543,8 +550,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                     docs.push(doc);
                     docs.sort((a, b) => (NumCast(a.zIndex) > NumCast(b.zIndex) ? 1 : -1)).forEach((d, i) => (d.zIndex = i));
                 }
-                const added = Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                added && (doc.context = this.doc.context);
+                const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
+                const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
+                !dataIsComputed && added && (doc.context = this.doc.context);
+
                 return added;
             };
             const addDoc = (doc: Doc | Doc[], addBefore?: Doc, before?: boolean) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && localAdd(doc, addBefore, before), true);
@@ -593,7 +602,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                                   this.props.prevSibling,
                                   addDoc,
                                   remDoc,
-                                  this.move,
+                                  moveDoc,
                                   StrCast(this.doc.childDropAction, this.props.dropAction) as dropActionType,
                                   this.props.addDocTab,
                                   this.titleStyleProvider,
@@ -1064,7 +1073,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         const before = pt[1] < rect.top + rect.height / 2;
         const inside = this.props.treeView.fileSysMode && !this.doc.isFolder ? false : pt[0] > Math.min(rect.left + 75, rect.left + rect.width * 0.75) || (!before && this.treeViewOpen && this.childDocs?.length ? true : false);
 
-        const docs = this.props.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, false));
+        const docs = this.props.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, undefined, false));
     };
 
     render() {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c6d4cb694..e60a03190 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -27,7 +27,7 @@ import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComp
 import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { StyleProp } from '../StyleProvider';
-import { OpenWhere } from './DocumentView';
+import { DocFocusOptions, OpenWhere } from './DocumentView';
 import { FaceRectangles } from './FaceRectangles';
 import { FieldView, FieldViewProps } from './FieldView';
 import './ImageBox.scss';
@@ -73,7 +73,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const anchor =
             this._getAnchor?.(this._savedAnnotations, false) ?? // use marquee anchor, otherwise, save zoom/pan as anchor
-            Docs.Create.ImageanchorDocument({ title: 'ImgAnchor:' + this.rootDoc.title, presTransition: 1000, unrendered: true, annotationOn: this.rootDoc });
+            Docs.Create.ImageanchorDocument({
+                title: 'ImgAnchor:' + this.rootDoc.title,
+                presPanX: NumCast(this.layoutDoc._panX),
+                presPanY: NumCast(this.layoutDoc._panY),
+                presViewScale: Cast(this.layoutDoc._viewScale, 'number', null),
+                presTransition: 1000,
+                unrendered: true,
+                annotationOn: this.rootDoc,
+            });
         if (anchor) {
             if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
             /* addAsAnnotation &&*/ this.addDocument(anchor);
@@ -433,6 +441,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._marqueeing = undefined;
         this.props.select(false);
     };
+    focus = (anchor: Doc, options: DocFocusOptions) => this._ffref.current?.focus(anchor, options);
+
+    _ffref = React.createRef<CollectionFreeFormView>();
     savedAnnotations = () => this._savedAnnotations;
     render() {
         TraceMobx();
@@ -460,6 +471,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     overflow: this.layoutDoc.fitWidth || this.props.fitWidth?.(this.rootDoc) ? 'auto' : undefined,
                 }}>
                 <CollectionFreeFormView
+                    ref={this._ffref}
                     {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
                     renderDepth={this.props.renderDepth + 1}
                     fieldKey={this.annotationKey}
@@ -471,6 +483,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     PanelHeight={this.props.PanelHeight}
                     ScreenToLocalTransform={this.screenToLocalTransform}
                     select={emptyFunction}
+                    focus={this.focus}
                     getScrollHeight={this.getScrollHeight}
                     NativeDimScaling={returnOne}
                     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index c182dfd19..0064a2022 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -21,6 +21,7 @@ import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { FieldView, FieldViewProps } from '../FieldView';
+import { PinProps } from '../trails';
 import './MapBox.scss';
 import { MapBoxInfoWindow } from './MapBoxInfoWindow';
 
@@ -133,8 +134,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _sidebarRef = React.createRef<SidebarAnnos>();
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
-    constructor(props: any) {
-        super(props);
+    componentDidMount() {
+        this.props.setContentView?.(this);
     }
 
     @action
@@ -525,7 +526,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 
-    getAnchor = (addAsAnnotation: boolean) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc;
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc;
 
     /**
      * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 2d9aaeca4..dda96d8e7 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -557,7 +557,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 });
             setTimeout(() => Array.from(transitioned).forEach(action(doc => (doc._dataTransition = undefined))), transTime + 10);
         }
-        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.presPinViewBounds !== undefined || activeItem.presPanX !== undefined || activeItem.presViewScale !== undefined))) && !PresBox.targetRenderedDoc(activeItem)._isGroup) {
+        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.presPinViewBounds !== undefined || activeItem.presPanX !== undefined || activeItem.presViewScale !== undefined))) && !bestTarget._isGroup) {
             const contentBounds = Cast(activeItem.presPinViewBounds, listSpec('number'));
             if (contentBounds) {
                 const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] };
-- 
cgit v1.2.3-70-g09d2


From b599afe5fdcf8afc38432e34b1e175f82499d25b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 11 Mar 2023 14:05:18 -0500
Subject: changed links from being a computed field on documents to being
 accessed by a function call on LinkManager

---
 src/client/documents/Documents.ts                  | 101 ++++++---------------
 src/client/util/CaptureManager.tsx                 |  23 +++--
 src/client/util/CurrentUserUtils.ts                |   3 +-
 src/client/util/LinkFollower.ts                    |   3 +-
 src/client/util/LinkManager.ts                     |  17 +++-
 src/client/util/SelectionManager.ts                |   4 +-
 src/client/views/LightboxView.tsx                  |   9 +-
 src/client/views/PropertiesButtons.tsx             |  10 +-
 src/client/views/PropertiesView.tsx                |   8 +-
 src/client/views/SidebarAnnos.tsx                  |   7 +-
 src/client/views/StyleProvider.tsx                 |  11 ++-
 .../collections/CollectionStackedTimeline.tsx      |   7 +-
 src/client/views/collections/CollectionSubView.tsx |   1 -
 src/client/views/collections/TreeView.tsx          |   3 +-
 src/client/views/linking/LinkMenu.tsx              |   1 -
 src/client/views/linking/LinkMenuItem.tsx          |   6 +-
 src/client/views/nodes/AudioBox.tsx                |   3 +-
 src/client/views/nodes/DocumentView.tsx            |   6 +-
 src/client/views/nodes/LinkDocPreview.tsx          |   9 +-
 src/client/views/nodes/VideoBox.tsx                |   5 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  18 ++--
 src/client/views/nodes/trails/PresBox.tsx          |   3 +-
 src/client/views/search/SearchBox.tsx              |   3 +-
 src/fields/util.ts                                 |  23 ++---
 24 files changed, 121 insertions(+), 163 deletions(-)

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4dc1c3b71..251e432ef 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -2,7 +2,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { action, runInAction } from 'mobx';
 import { basename } from 'path';
 import { DateField } from '../../fields/DateField';
-import { Doc, DocListCast, DocListCastAsync, Field, Initializing, Opt, updateCachedAcls } from '../../fields/Doc';
+import { Doc, DocListCast, Field, Initializing, Opt, updateCachedAcls } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { HtmlField } from '../../fields/HtmlField';
 import { InkField, PointData } from '../../fields/InkField';
@@ -403,7 +403,6 @@ export namespace Docs {
                         nativeDimModifiable: true,
                         nativeHeightUnfrozen: true,
                         forceReflow: true,
-                        links: '@links(self)',
                     },
                 },
             ],
@@ -411,35 +410,35 @@ export namespace Docs {
                 DocumentType.SEARCH,
                 {
                     layout: { view: SearchBox, dataField: defaultDataKey },
-                    options: { _width: 400, links: '@links(self)' },
+                    options: { _width: 400 },
                 },
             ],
             [
                 DocumentType.COLOR,
                 {
                     layout: { view: ColorBox, dataField: defaultDataKey },
-                    options: { _nativeWidth: 220, _nativeHeight: 300, links: '@links(self)' },
+                    options: { _nativeWidth: 220, _nativeHeight: 300 },
                 },
             ],
             [
                 DocumentType.IMG,
                 {
                     layout: { view: ImageBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.WEB,
                 {
                     layout: { view: WebBox, dataField: defaultDataKey },
-                    options: { _height: 300, _fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, links: '@links(self)' },
+                    options: { _height: 300, _fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true },
                 },
             ],
             [
                 DocumentType.COL,
                 {
                     layout: { view: CollectionView, dataField: defaultDataKey },
-                    options: { _fitWidth: true, _panX: 0, _panY: 0, _viewScale: 1, links: '@links(self)' },
+                    options: { _fitWidth: true, _panX: 0, _panY: 0, _viewScale: 1 },
                 },
             ],
             [
@@ -453,35 +452,35 @@ export namespace Docs {
                 DocumentType.VID,
                 {
                     layout: { view: VideoBox, dataField: defaultDataKey },
-                    options: { _currentTimecode: 0, links: '@links(self)' },
+                    options: { _currentTimecode: 0 },
                 },
             ],
             [
                 DocumentType.AUDIO,
                 {
                     layout: { view: AudioBox, dataField: defaultDataKey },
-                    options: { _height: 100, backgroundColor: 'lightGray', _fitWidth: true, forceReflow: true, nativeDimModifiable: true, links: '@links(self)' },
+                    options: { _height: 100, forceReflow: true, nativeDimModifiable: true },
                 },
             ],
             [
                 DocumentType.REC,
                 {
                     layout: { view: VideoBox, dataField: defaultDataKey },
-                    options: { _height: 100, backgroundColor: 'pink', links: '@links(self)' },
+                    options: { _height: 100, backgroundColor: 'pink' },
                 },
             ],
             [
                 DocumentType.PDF,
                 {
                     layout: { view: PDFBox, dataField: defaultDataKey },
-                    options: { _curPage: 1, _fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, links: '@links(self)' },
+                    options: { _curPage: 1, _fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true },
                 },
             ],
             [
                 DocumentType.MAP,
                 {
                     layout: { view: MapBox, dataField: defaultDataKey },
-                    options: { _height: 600, _width: 800, nativeDimModifiable: true, links: '@links(self)' },
+                    options: { _height: 600, _width: 800, nativeDimModifiable: true },
                 },
             ],
             [
@@ -502,7 +501,6 @@ export namespace Docs {
                         description: '',
                         showCaption: 'description',
                         backgroundColor: 'lightblue', // lightblue is default color for linking dot and link documents text comment area
-                        links: '@links(self)',
                         _removeDropProperties: new List(['isLinkButton']),
                     },
                 },
@@ -527,7 +525,7 @@ export namespace Docs {
                 DocumentType.SCRIPTING,
                 {
                     layout: { view: ScriptingBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
@@ -540,56 +538,56 @@ export namespace Docs {
                 DocumentType.LABEL,
                 {
                     layout: { view: LabelBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)', _singleLine: true },
+                    options: { _singleLine: true },
                 },
             ],
             [
                 DocumentType.EQUATION,
                 {
                     layout: { view: EquationBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)', nativeDimModifiable: true, fontSize: '14px', hideResizeHandles: true, hideDecorationTitle: true },
+                    options: { nativeDimModifiable: true, fontSize: '14px', hideResizeHandles: true, hideDecorationTitle: true },
                 },
             ],
             [
                 DocumentType.FUNCPLOT,
                 {
                     layout: { view: FunctionPlotBox, dataField: defaultDataKey },
-                    options: { nativeDimModifiable: true, links: '@links(self)' },
+                    options: { nativeDimModifiable: true },
                 },
             ],
             [
                 DocumentType.BUTTON,
                 {
                     layout: { view: LabelBox, dataField: 'onClick' },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.SLIDER,
                 {
                     layout: { view: SliderBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.PRES,
                 {
                     layout: { view: PresBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.FONTICON,
                 {
                     layout: { view: FontIconBox, dataField: defaultDataKey },
-                    options: { allowClickBeforeDoubleClick: true, hideLinkButton: true, _width: 40, _height: 40, borderRounding: '100%', links: '@links(self)' },
+                    options: { allowClickBeforeDoubleClick: true, hideLinkButton: true, _width: 40, _height: 40, borderRounding: '100%' },
                 },
             ],
             [
                 DocumentType.WEBCAM,
                 {
                     layout: { view: RecordingBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
@@ -603,7 +601,7 @@ export namespace Docs {
                 DocumentType.MARKER,
                 {
                     layout: { view: CollectionView, dataField: defaultDataKey },
-                    options: { links: '@links(self)', hideLinkButton: true, pointerEvents: 'none' },
+                    options: { hideLinkButton: true, pointerEvents: 'none' },
                 },
             ],
             [
@@ -611,21 +609,21 @@ export namespace Docs {
                 {
                     // NOTE: this is unused!! ink fields are filled in directly within the InkDocument() method
                     layout: { view: InkingStroke, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.SCREENSHOT,
                 {
                     layout: { view: ScreenshotBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.COMPARISON,
                 {
                     layout: { view: ComparisonBox, dataField: defaultDataKey },
-                    options: { clipWidth: 50, nativeDimModifiable: true, backgroundColor: 'gray', targetDropAction: 'alias', links: '@links(self)' },
+                    options: { clipWidth: 50, nativeDimModifiable: true, backgroundColor: 'gray', targetDropAction: 'alias' },
                 },
             ],
             [
@@ -640,21 +638,21 @@ export namespace Docs {
                 DocumentType.GROUP,
                 {
                     layout: { view: EmptyBox, dataField: defaultDataKey },
-                    options: { links: '@links(self)' },
+                    options: {},
                 },
             ],
             [
                 DocumentType.DATAVIZ,
                 {
                     layout: { view: DataVizBox, dataField: defaultDataKey },
-                    options: { _fitWidth: true, nativeDimModifiable: true, links: '@links(self)' },
+                    options: { _fitWidth: true, nativeDimModifiable: true },
                 },
             ],
             [
                 DocumentType.LOADING,
                 {
                     layout: { view: LoadingBox, dataField: '' },
-                    options: { _fitWidth: true, _fitHeight: true, nativeDimModifiable: true, links: '@links(self)' },
+                    options: { _fitWidth: true, _fitHeight: true, nativeDimModifiable: true },
                 },
             ],
         ]);
@@ -881,15 +879,7 @@ export namespace Docs {
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
-            return InstanceFromProto(
-                Prototypes.get(DocumentType.AUDIO),
-                new AudioField(url),
-                { ...options, backgroundColor: ComputedField.MakeFunction("this._mediaState === 'playing' ? 'green':'gray'") as any },
-                undefined,
-                undefined,
-                undefined,
-                overwriteDoc
-            );
+            return InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(url), options, undefined, undefined, undefined, overwriteDoc);
         }
 
         export function RecordingDocument(url: string, options: DocumentOptions = {}) {
@@ -992,7 +982,6 @@ export namespace Docs {
             I.creationDate = new DateField();
             I['acl-Public'] = Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
             //I['acl-Override'] = SharingPermissions.Unset;
-            I.links = ComputedField.MakeFunction('links(self)');
             I[Initializing] = false;
             return I;
         }
@@ -1282,38 +1271,6 @@ export namespace DocUtils {
         return rangeFilteredDocs;
     }
 
-    export function Publish(promoteDoc: Doc, targetID: string, addDoc: any, remDoc: any) {
-        targetID = targetID.replace(/^-/, '').replace(/\([0-9]*\)$/, '');
-        DocServer.GetRefField(targetID).then(doc => {
-            if (promoteDoc !== doc) {
-                let copy = doc as Doc;
-                if (copy) {
-                    Doc.Overwrite(promoteDoc, copy, true);
-                } else {
-                    copy = Doc.MakeCopy(promoteDoc, true, targetID);
-                }
-                !doc && (copy.title = undefined) && (Doc.GetProto(copy).title = targetID);
-                addDoc && addDoc(copy);
-                remDoc && remDoc(promoteDoc);
-                if (!doc) {
-                    DocListCastAsync(promoteDoc.links).then(links => {
-                        links &&
-                            links.map(async link => {
-                                if (link) {
-                                    const a1 = await Cast(link.anchor1, Doc);
-                                    if (a1 && Doc.AreProtosEqual(a1, promoteDoc)) link.anchor1 = copy;
-                                    const a2 = await Cast(link.anchor2, Doc);
-                                    if (a2 && Doc.AreProtosEqual(a2, promoteDoc)) link.anchor2 = copy;
-                                    LinkManager.Instance.deleteLink(link);
-                                    LinkManager.Instance.addLink(link);
-                                }
-                            });
-                    });
-                }
-            }
-        });
-    }
-
     export function DefaultFocus(doc: Doc, options: DocFocusOptions) {
         return undefined;
     }
@@ -1711,7 +1668,7 @@ export namespace DocUtils {
     export function LeavePushpin(doc: Doc, annotationField: string) {
         if (doc.followLinkToggle) return undefined;
         const context = Cast(doc.context, Doc, null) ?? Cast(doc.annotationOn, Doc, null);
-        const hasContextAnchor = DocListCast(doc.links).some(l => (l.anchor2 === doc && Cast(l.anchor1, Doc, null)?.annotationOn === context) || (l.anchor1 === doc && Cast(l.anchor2, Doc, null)?.annotationOn === context));
+        const hasContextAnchor = LinkManager.Links(doc).some(l => (l.anchor2 === doc && Cast(l.anchor1, Doc, null)?.annotationOn === context) || (l.anchor1 === doc && Cast(l.anchor2, Doc, null)?.annotationOn === context));
         if (context && !hasContextAnchor && (context.type === DocumentType.VID || context.type === DocumentType.WEB || context.type === DocumentType.PDF || context.type === DocumentType.IMG)) {
             const pushpin = Docs.Create.FontIconDocument({
                 title: 'pushpin',
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index 735b06f6d..c9fcc84a3 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -2,12 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast } from '../../fields/Doc';
-import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
+import { DocCast, StrCast } from '../../fields/Types';
 import { addStyleSheet } from '../../Utils';
 import { LightboxView } from '../views/LightboxView';
 import { MainViewModal } from '../views/MainViewModal';
 import './CaptureManager.scss';
+import { LinkManager } from './LinkManager';
 import { SelectionManager } from './SelectionManager';
 
 @observer
@@ -48,16 +49,14 @@ export class CaptureManager extends React.Component<{}> {
         const doc = this._document;
         const order: JSX.Element[] = [];
         if (doc) {
-            DocListCast(doc.links).forEach((l, i) => {
-                if (l) {
-                    order.push(
-                        <div className="list-item">
-                            <div className="number">{i}</div>
-                            {StrCast((l.anchor1 as Doc).title)}
-                        </div>
-                    );
-                }
-            });
+            LinkManager.Links(doc).forEach((l, i) =>
+                order.push(
+                    <div className="list-item">
+                        <div className="number">{i}</div>
+                        {StrCast(DocCast(l.anchor1)?.title)}
+                    </div>
+                )
+            );
         }
 
         return (
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2b0a2cdac..c4fb4788c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -22,7 +22,7 @@ import { Colors } from "../views/global/globalEnums";
 import { MainView } from "../views/MainView";
 import { ButtonType, NumButtonType } from "../views/nodes/button/FontIconBox";
 import { OverlayView } from "../views/OverlayView";
-import { DragManager, dropActionType } from "./DragManager";
+import { DragManager } from "./DragManager";
 import { MakeTemplate } from "./DropConverter";
 import { LinkManager } from "./LinkManager";
 import { ScriptingGlobals } from "./ScriptingGlobals";
@@ -949,6 +949,5 @@ ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Do
 ScriptingGlobals.add(function createNewPresentation() { return MainView.Instance.createNewPresentation(); }, "creates a new presentation when called");
 ScriptingGlobals.add(function openPresentation(pres:Doc) { return MainView.Instance.openPresentation(pres); }, "creates a new presentation when called");
 ScriptingGlobals.add(function createNewFolder() { return MainView.Instance.createNewFolder(); }, "creates a new folder in myFiles when called");
-ScriptingGlobals.add(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); }, "returns all the links to the document or its annotations", "(doc: any)");
 ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar");
 ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; });
\ No newline at end of file
diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts
index e28687561..eacbcc0e3 100644
--- a/src/client/util/LinkFollower.ts
+++ b/src/client/util/LinkFollower.ts
@@ -6,6 +6,7 @@ import { DocumentDecorations } from '../views/DocumentDecorations';
 import { DocFocusOptions, DocumentViewSharedProps, OpenWhere } from '../views/nodes/DocumentView';
 import { PresBox } from '../views/nodes/trails';
 import { DocumentManager } from './DocumentManager';
+import { LinkManager } from './LinkManager';
 import { SelectionManager } from './SelectionManager';
 import { UndoManager } from './UndoManager';
 
@@ -41,7 +42,7 @@ export class LinkFollower {
     };
 
     public static traverseLink(link: Opt<Doc>, sourceDoc: Doc, finished?: () => void, traverseBacklink?: boolean) {
-        const linkDocs = link ? [link] : DocListCast(sourceDoc.links);
+        const linkDocs = link ? [link] : LinkManager.Links(sourceDoc);
         const firstDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor1 as Doc, sourceDoc) || Doc.AreProtosEqual((linkDoc.anchor1 as Doc).annotationOn as Doc, sourceDoc)); // link docs where 'doc' is anchor1
         const secondDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor2 as Doc, sourceDoc) || Doc.AreProtosEqual((linkDoc.anchor2 as Doc).annotationOn as Doc, sourceDoc)); // link docs where 'doc' is anchor2
         const fwdLinkWithoutTargetView = firstDocs.find(d => DocumentManager.Instance.getDocumentViews((d.anchor2 as Doc).type === DocumentType.MARKER ? DocCast((d.anchor2 as Doc).annotationOn) : (d.anchor2 as Doc)).length === 0);
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 46d44fea4..555215417 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -4,6 +4,7 @@ import { DirectLinksSym, Doc, DocListCast, DocListCastAsync, Field, Opt } from '
 import { List } from '../../fields/List';
 import { ProxyField } from '../../fields/Proxy';
 import { Cast, DocCast, PromiseValue, StrCast } from '../../fields/Types';
+import { ScriptingGlobals } from './ScriptingGlobals';
 /*
  * link doc:
  * - anchor1: doc
@@ -24,6 +25,10 @@ export class LinkManager {
     public static get Instance() {
         return LinkManager._instance;
     }
+
+    public static Links(doc: Doc | undefined) {
+        return doc ? LinkManager.Instance.getAllRelatedLinks(doc) : [];
+    }
     public static addLinkDB = async (linkDb: any) => {
         await Promise.all(
             ((await DocListCastAsync(linkDb.data)) ?? []).map(link =>
@@ -34,7 +39,7 @@ export class LinkManager {
         LinkManager.userLinkDBs.push(linkDb);
     };
     public static AutoKeywords = 'keywords:Usages';
-    static links: Doc[] = [];
+    static _links: Doc[] = [];
     constructor() {
         LinkManager._instance = this;
         this.createLinkrelationshipLists();
@@ -72,7 +77,7 @@ export class LinkManager {
             );
         };
         const watchUserLinkDB = (userLinkDBDoc: Doc) => {
-            LinkManager.links.push(...DocListCast(userLinkDBDoc.data));
+            LinkManager._links.push(...DocListCast(userLinkDBDoc.data));
             const toRealField = (field: Field) => (field instanceof ProxyField ? field.value : field); // see List.ts.  data structure is not a simple list of Docs, but a list of ProxyField/Fields
             if (userLinkDBDoc.data) {
                 observe(
@@ -193,3 +198,11 @@ export class LinkManager {
         if (Doc.AreProtosEqual(anchor, linkDoc)) return linkDoc;
     }
 }
+
+ScriptingGlobals.add(
+    function links(doc: any) {
+        return new List(LinkManager.Links(doc));
+    },
+    'returns all the links to the document or its annotations',
+    '(doc: any)'
+);
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 646942569..c0fc25376 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,6 +1,6 @@
 import { action, observable, ObservableMap } from 'mobx';
 import { computedFn } from 'mobx-utils';
-import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { Doc, Opt } from '../../fields/Doc';
 import { DocCast } from '../../fields/Types';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { DocumentView } from '../views/nodes/DocumentView';
@@ -22,7 +22,7 @@ export namespace SelectionManager {
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedViews.get(docView) && docView.props.Document.type !== DocumentType.MARKER) {
                 if (!ctrlPressed) {
-                    if (LinkManager.currentLink && !DocListCast(docView.rootDoc.links).includes(LinkManager.currentLink) && docView.rootDoc !== LinkManager.currentLink) {
+                    if (LinkManager.currentLink && !LinkManager.Links(docView.rootDoc).includes(LinkManager.currentLink) && docView.rootDoc !== LinkManager.currentLink) {
                         LinkManager.currentLink = undefined;
                     }
                     this.DeselectAll();
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 2567d44bb..976c8763e 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -4,9 +4,8 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { InkTool } from '../../fields/InkField';
-import { List } from '../../fields/List';
-import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
+import { Cast, NumCast, StrCast } from '../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { LinkManager } from '../util/LinkManager';
@@ -88,7 +87,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                 ...future
                     .slice()
                     .sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))
-                    .sort((a, b) => DocListCast(a.links).length - DocListCast(b.links).length),
+                    .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length),
             ];
         }
         this._doc = doc;
@@ -214,7 +213,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
         if (coll) {
             const fieldKey = Doc.LayoutFieldKey(coll);
             const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '-annotations'])];
-            const links = DocListCast(coll.links)
+            const links = LinkManager.Links(coll)
                 .map(link => LinkManager.getOppositeAnchor(link, coll))
                 .filter(doc => doc)
                 .map(doc => doc!);
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index ac1b66013..ebbe20077 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -9,8 +9,10 @@ import { RichTextField } from '../../fields/RichTextField';
 import { ScriptField } from '../../fields/ScriptField';
 import { BoolCast, ScriptCast, StrCast } from '../../fields/Types';
 import { ImageField } from '../../fields/URLField';
+import { Utils } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
+import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
 import { undoBatch } from '../util/UndoManager';
 import { Colors } from './global/globalEnums';
@@ -19,8 +21,6 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
-import { LinkManager } from '../util/LinkManager';
-import { Utils } from '../../Utils';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -139,9 +139,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                     containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
                     const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
                     dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
-                    containerContents.forEach(doc => {
-                        DocListCast(doc.links).forEach(link => (link.linkDisplay = false));
-                    });
+                    containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.linkDisplay = false)));
                 });
             }
         );
@@ -330,7 +328,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             const click = () => this.handleOptionChange(value[0]);
             const linkButton = BoolCast(this.selectedDoc._isLinkButton);
             const followLoc = this.selectedDoc._followLinkLocation;
-            const linkedToLightboxView = () => DocListCast(this.selectedDoc.links).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
+            const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
 
             let active = false;
             // prettier-ignore
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 7a985628f..03b4100a7 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -4,10 +4,10 @@ import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-soli
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
 import { intersection } from 'lodash';
-import { action, autorun, computed, Lambda, observable } from 'mobx';
+import { action, computed, Lambda, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import { AclAdmin, AclSym, HierarchyMapping, DataSym, Doc, DocListCast, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc';
+import { AclAdmin, AclSym, DataSym, Doc, Field, HeightSym, HierarchyMapping, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
@@ -23,10 +23,10 @@ import { SharingManager } from '../util/SharingManager';
 import { Transform } from '../util/Transform';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { EditableView } from './EditableView';
+import { FilterPanel } from './FilterPanel';
 import { Colors } from './global/globalEnums';
 import { InkStrokeProperties } from './InkStrokeProperties';
 import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
-import { FilterPanel } from './FilterPanel';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
 import { PropertiesButtons } from './PropertiesButtons';
@@ -1486,7 +1486,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
         const targZoom = this.sourceAnchor?.followLinkZoom;
         const indent = 30;
-        const hasSelectedAnchor = SelectionManager.Views().some(dv => DocListCast(this.sourceAnchor?.links).includes(LinkManager.currentLink!));
+        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!);
         if (!this.selectedDoc && !this.isPres) {
             return (
                 <div className="propertiesView" style={{ width: this.props.width }}>
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 74ea624a6..7519cbb05 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -3,10 +3,12 @@ import { observer } from 'mobx-react';
 import { Doc, DocListCast, Field, FieldResult, StrListCast } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
+import { RichTextField } from '../../fields/RichTextField';
 import { DocCast, NumCast, StrCast } from '../../fields/Types';
 import { emptyFunction, OmitKeys, returnAll, returnOne, returnTrue, returnZero } from '../../Utils';
 import { Docs, DocUtils } from '../documents/Documents';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
+import { LinkManager } from '../util/LinkManager';
 import { Transform } from '../util/Transform';
 import { CollectionStackingView } from './collections/CollectionStackingView';
 import { FieldViewProps } from './nodes/FieldView';
@@ -15,7 +17,6 @@ import { SearchBox } from './search/SearchBox';
 import './SidebarAnnos.scss';
 import { StyleProp } from './StyleProvider';
 import React = require('react');
-import { RichTextField } from '../../fields/RichTextField';
 
 interface ExtraProps {
     fieldKey: string;
@@ -174,8 +175,8 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     showTitle = () => 'title';
     setHeightCallback = (height: number) => this.props.setHeight?.(height + this.filtersHeight());
     sortByLinkAnchorY = (a: Doc, b: Doc) => {
-        const ay = DocListCast(a.links).length && DocCast(DocListCast(a.links)[0].anchor1).y;
-        const by = DocListCast(b.links).length && DocCast(DocListCast(b.links)[0].anchor1).y;
+        const ay = LinkManager.Links(a).length && DocCast(LinkManager.Links(a)[0].anchor1).y;
+        const by = LinkManager.Links(b).length && DocCast(LinkManager.Links(b)[0].anchor1).y;
         return NumCast(ay) - NumCast(by);
     };
     render() {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 153c30052..ce764c7bf 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,12 +1,15 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Shadows } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { extname } from 'path';
-import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { BoolCast, Cast, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
+import { Doc, Opt } from '../../fields/Doc';
+import { BoolCast, Cast, ImageCast, NumCast, StrCast } from '../../fields/Types';
 import { DashColor, emptyFunction, lightOrDark } from '../../Utils';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { DocFocusOrOpen } from '../util/DocumentManager';
+import { LinkManager } from '../util/LinkManager';
+import { SelectionManager } from '../util/SelectionManager';
 import { ColorScheme } from '../util/SettingsManager';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { TreeSort } from './collections/TreeView';
@@ -18,8 +21,6 @@ import { FieldViewProps } from './nodes/FieldView';
 import { SliderBox } from './nodes/SliderBox';
 import './StyleProvider.scss';
 import React = require('react');
-import { Shadows } from 'browndash-components';
-import { SelectionManager } from '../util/SelectionManager';
 
 export enum StyleProp {
     TreeViewIcon = 'treeViewIcon',
@@ -261,7 +262,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.BoxShadow: {
             if (!doc || opacity() === 0 || doc.noShadow) return undefined; // if it's not visible, then no shadow)
             if (doc.boxShadow === 'standard') return Shadows.STANDARD_SHADOW;
-            if (doc?.isLinkButton && DocListCast(doc?.links).length && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
+            if (doc?.isLinkButton && LinkManager.Links(doc).length && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
             switch (doc?.type) {
                 case DocumentType.COL:
                     return StrCast(
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 572fbfec2..5bdff347c 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -2,7 +2,7 @@ import React = require('react');
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
-import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
+import { Doc, Opt, StrListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
@@ -15,6 +15,7 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
+import { LinkManager } from '../../util/LinkManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SnappingManager } from '../../util/SnappingManager';
@@ -740,14 +741,14 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps>
             () => this.props.currentTimecode(),
             time => {
                 const dictationDoc = Cast(this.props.layoutDoc['data-dictation'], Doc, null);
-                const isDictation = dictationDoc && DocListCast(this.props.mark.links).some(link => Cast(link.anchor1, Doc, null)?.annotationOn === dictationDoc);
+                const isDictation = dictationDoc && LinkManager.Links(this.props.mark).some(link => Cast(link.anchor1, Doc, null)?.annotationOn === dictationDoc);
                 if (
                     !LightboxView.LightboxDoc &&
                     // bcz: when should links be followed?  we don't want to move away from the video to follow a link but we can open it in a sidebar/etc.  But we don't know that upfront.
                     // for now, we won't follow any links when the lightbox is oepn to avoid "losing" the video.
                     /*(isDictation || !Doc.AreProtosEqual(LightboxView.LightboxDoc, this.props.layoutDoc))*/
                     !this.props.layoutDoc.dontAutoFollowLinks &&
-                    DocListCast(this.props.mark.links).length &&
+                    LinkManager.Links(this.props.mark).length &&
                     time > NumCast(this.props.mark[this.props.startTag]) &&
                     time < NumCast(this.props.mark[this.props.endTag]) &&
                     this._lastTimecode < NumCast(this.props.mark[this.props.startTag]) - 1e-5
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c88ae314e..e46220f02 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -1,5 +1,4 @@
 import { action, computed, observable } from 'mobx';
-import ReactLoading from 'react-loading';
 import * as rp from 'request-promise';
 import CursorField from '../../../fields/CursorField';
 import { AclPrivate, Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 08ffa1466..2bdcf472f 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -15,6 +15,7 @@ import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
+import { LinkManager } from '../../util/LinkManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SnappingManager } from '../../util/SnappingManager';
@@ -708,7 +709,7 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     @computed get validExpandViewTypes() {
         const annos = () => (DocListCast(this.doc[this.fieldKey + '-annotations']).length && !this.props.treeView.dashboardMode ? 'annotations' : '');
-        const links = () => (DocListCast(this.doc.links).length && !this.props.treeView.dashboardMode ? 'links' : '');
+        const links = () => (LinkManager.Links(this.doc).length && !this.props.treeView.dashboardMode ? 'links' : '');
         const data = () => (this.childDocs || this.props.treeView.dashboardMode ? this.fieldKey : '');
         const aliases = () => (this.props.treeView.dashboardMode ? '' : 'aliases');
         const fields = () => (Doc.noviceMode ? '' : 'fields');
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index c9112eec3..3f6369898 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,7 +1,6 @@
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
-import { DocCast } from '../../../fields/Types';
 import { LinkManager } from '../../util/LinkManager';
 import { DocumentView } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index cdac91a62..4741fc6f2 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { Doc } from '../../../fields/Doc';
 import { Cast, DocCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
 import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
@@ -15,11 +15,11 @@ import { LinkManager } from '../../util/LinkManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { undoBatch } from '../../util/UndoManager';
+import { MainView } from '../MainView';
 import { DocumentView, OpenWhere } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenuItem.scss';
 import React = require('react');
-import { MainView } from '../MainView';
 
 interface LinkMenuItemProps {
     groupType: string;
@@ -34,7 +34,7 @@ interface LinkMenuItemProps {
 
 // drag links and drop link targets (aliasing them if needed)
 export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: DocumentView, downX: number, downY: number, sourceDoc: Doc, specificLinks?: Doc[]) {
-    const draggedDocs = (specificLinks ? specificLinks : DocListCast(sourceDoc.links)).map(link => LinkManager.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[];
+    const draggedDocs = (specificLinks ? specificLinks : LinkManager.Links(sourceDoc)).map(link => LinkManager.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[];
 
     if (draggedDocs.length) {
         const moddrag: Doc[] = [];
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 4c26468b9..890ecc1b2 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -11,6 +11,7 @@ import { emptyFunction, formatTime, OmitKeys, returnFalse, setupMoveUpEvents } f
 import { DocUtils } from '../../documents/Documents';
 import { Networking } from '../../Network';
 import { DragManager } from '../../util/DragManager';
+import { LinkManager } from '../../util/LinkManager';
 import { undoBatch } from '../../util/UndoManager';
 import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline';
 import { ContextMenu } from '../ContextMenu';
@@ -84,7 +85,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return this.props.PanelHeight() < 50;
     } // used to collapse timeline when node is shrunk
     @computed get links() {
-        return DocListCast(this.dataDoc.links);
+        return LinkManager.Links(this.dataDoc);
     }
     @computed get mediaState() {
         return this.dataDoc.mediaState as media_state;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2b6629913..964231e9d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -929,7 +929,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     },
                     icon: 'eye',
                 });
-            DocListCast(this.Document.links).length &&
+            LinkManager.Links(this.Document).length &&
                 appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? 'Show' : 'Hide'} Link Button`, event: action(() => (this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton)), icon: 'eye' });
             !appearance && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });
 
@@ -969,7 +969,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     onClicks.push({ description: (this.Document.followLinkToggle ? 'Remove' : 'Make') + ' Target Visibility Toggle', event: () => this.toggleFollowLink(false, true), icon: 'map-pin' });
                     onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
                     !existingOnClick && cm.addItem({ description: 'OnClick...', addDivider: true, noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
-                } else if (DocListCast(this.Document.links).length) {
+                } else if (LinkManager.Links(this.Document).length) {
                     onClicks.push({ description: 'Select on Click', event: () => this.selectOnClick(), icon: 'link' });
                     onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(undefined, false), icon: 'link' });
                     onClicks.push({ description: 'Toggle Link Target on Click', event: () => this.toggleTargetOnClick(), icon: 'map-pin' });
@@ -1907,7 +1907,7 @@ ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc) {
     const linkSource = Cast(linkCollection.linkSource, Doc, null);
     const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
     let wid = linkSource[WidthSym]();
-    const links = DocListCast(linkSource.links);
+    const links = LinkManager.Links(linkSource);
     links.forEach(link => {
         const other = LinkManager.getOppositeAnchor(link, linkSource);
         const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index bbe9b4323..16b352e4f 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import wiki from 'wikijs';
-import { Doc, DocCastAsync, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
+import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
 import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils';
 import { DocServer } from '../../DocServer';
@@ -14,11 +14,10 @@ import { LinkFollower } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { Transform } from '../../util/Transform';
+import { SearchBox } from '../search/SearchBox';
 import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView';
 import './LinkDocPreview.scss';
 import React = require('react');
-import { SearchUtil } from '../../util/SearchUtil';
-import { SearchBox } from '../search/SearchBox';
 
 interface LinkDocPreviewProps {
     linkDoc?: Doc;
@@ -110,8 +109,8 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                 const anchorDoc = anchorDocId ? PromiseValue(DocCast(DocServer.GetCachedRefField(anchorDocId) ?? DocServer.GetRefField(anchorDocId))) : undefined;
                 anchorDoc?.then?.(
                     action(anchor => {
-                        if (anchor instanceof Doc && DocListCast(anchor.links).length) {
-                            this._linkDoc = this._linkDoc ?? DocListCast(anchor.links)[0];
+                        if (anchor instanceof Doc && LinkManager.Links(anchor).length) {
+                            this._linkDoc = this._linkDoc ?? LinkManager.Links(anchor)[0];
                             const automaticLink = this._linkDoc.linkRelationship === LinkManager.AutoKeywords;
                             if (automaticLink) {
                                 // automatic links specify the target in the link info, not the source
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 7df3d5f24..dc6bf6f9e 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, untracked } from 'mobx';
 import { observer } from 'mobx-react';
 import { basename } from 'path';
-import { Doc, DocListCast, HeightSym, WidthSym } from '../../../fields/Doc';
+import { Doc, HeightSym, WidthSym } from '../../../fields/Doc';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
@@ -14,6 +14,7 @@ import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Networking } from '../../Network';
 import { DocumentManager } from '../../util/DocumentManager';
+import { LinkManager } from '../../util/LinkManager';
 import { ReplayMovements } from '../../util/ReplayMovements';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SnappingManager } from '../../util/SnappingManager';
@@ -85,7 +86,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _scrubbing: boolean = false;
 
     @computed get links() {
-        return DocListCast(this.dataDoc.links);
+        return LinkManager.Links(this.dataDoc);
     }
     @computed get heightPercent() {
         return NumCast(this.layoutDoc._timelineHeightPercent, 100);
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index d9ce9a0b0..a76f9623a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEqual } from 'lodash';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { baseKeymap, selectAll } from 'prosemirror-commands';
 import { history } from 'prosemirror-history';
@@ -11,7 +11,7 @@ import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DateField } from '../../../../fields/DateField';
-import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DataSym, Doc, DocListCast, DocListCastAsync, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, Doc, DocListCast, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { PrefetchProxy } from '../../../../fields/Proxy';
@@ -48,6 +48,7 @@ import { StyleProp } from '../../StyleProvider';
 import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { LinkDocPreview } from '../LinkDocPreview';
+import { PinProps, PresBox } from '../trails';
 import { DashDocCommentView } from './DashDocCommentView';
 import { DashDocView } from './DashDocView';
 import { DashFieldView } from './DashFieldView';
@@ -63,7 +64,6 @@ import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
 import React = require('react');
-import { PinProps, PresBox } from '../trails';
 const translateGoogleApi = require('translate-google-api');
 
 export const GoogleRef = 'googleDocId';
@@ -363,7 +363,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         let linkTime;
         let linkAnchor;
         let link;
-        DocListCast(this.dataDoc.links).forEach((l, i) => {
+        LinkManager.Links(this.dataDoc).forEach((l, i) => {
             const anchor = (l.anchor1 as Doc).annotationOn ? (l.anchor1 as Doc) : (l.anchor2 as Doc).annotationOn ? (l.anchor2 as Doc) : undefined;
             if (anchor && (anchor.annotationOn as Doc).mediaState === 'recording') {
                 linkTime = NumCast(anchor._timecodeToShow /* audioStart */);
@@ -400,7 +400,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     autoLink = () => {
         const newAutoLinks = new Set<Doc>();
-        const oldAutoLinks = DocListCast(this.props.Document.links).filter(link => link.linkRelationship === LinkManager.AutoKeywords);
+        const oldAutoLinks = LinkManager.Links(this.props.Document).filter(link => link.linkRelationship === LinkManager.AutoKeywords);
         if (this._editorView?.state.doc.textContent) {
             const isNodeSel = this._editorView.state.selection instanceof NodeSelection;
             const f = this._editorView.state.selection.from;
@@ -453,7 +453,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) {
                             alink =
                                 alink ??
-                                (DocListCast(this.Document.links).find(link => Doc.AreProtosEqual(Cast(link.anchor1, Doc, null), this.rootDoc) && Doc.AreProtosEqual(Cast(link.anchor2, Doc, null), target)) ||
+                                (LinkManager.Links(this.Document).find(link => Doc.AreProtosEqual(Cast(link.anchor1, Doc, null), this.rootDoc) && Doc.AreProtosEqual(Cast(link.anchor2, Doc, null), target)) ||
                                     DocUtils.MakeLink({ doc: this.props.Document }, { doc: target }, LinkManager.AutoKeywords)!);
                             newAutoLinks.add(alink);
                             const allAnchors = [{ href: Doc.localServerPath(target), title: 'a link', anchorId: this.props.Document[Id] }];
@@ -687,7 +687,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     @undoBatch
     deleteAnnotation = (anchor: Doc) => {
-        LinkManager.Instance.deleteLink(DocListCast(anchor.links)[0]);
+        LinkManager.Instance.deleteLink(LinkManager.Links(anchor)[0]);
         // const docAnnotations = DocListCast(this.props.dataDoc[this.fieldKey]);
         // this.props.dataDoc[this.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
         // AnchorMenu.Instance.fadeOut(true);
@@ -1014,7 +1014,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     componentDidMount() {
         !this.props.dontSelectOnLoad && this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
-        this._cachedLinks = DocListCast(this.Document.links);
+        this._cachedLinks = LinkManager.Links(this.Document);
         this._disposers.breakupDictation = reaction(() => DocumentManager.Instance.RecordingEvent, this.breakupDictation);
         this._disposers.autoHeight = reaction(
             () => this.autoHeight,
@@ -1041,7 +1041,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             { fireImmediately: true }
         );
         this._disposers.links = reaction(
-            () => DocListCast(this.dataDoc.links), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
+            () => LinkManager.Links(this.dataDoc), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
             newLinks => {
                 this._cachedLinks.forEach(l => !newLinks.includes(l) && this.RemoveLinkFromDoc(l));
                 this._cachedLinks = newLinks;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index dda96d8e7..be40b3592 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -35,7 +35,6 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { ScriptingBox } from '../ScriptingBox';
 import './PresBox.scss';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
-import { tag } from 'xregexp/types';
 const { Howl } = require('howler');
 
 export interface pinDataTypes {
@@ -1551,7 +1550,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type;
                                 activeItem.presIndexedStart = type === DocumentType.COL ? 1 : 0;
                                 // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized.
-                                // to avoid creating a new slide to correspond to each of the target's data list, we simply reference the target's data list.
+                                // to avoid creating a new slide to correspond to each of the target's data list, we create a computedField to refernce the target's data list.
                                 let dataField = Doc.LayoutFieldKey(tagDoc);
                                 if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '-annotations';
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3ba60edd7..fe9b13fbe 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { DirectLinksSym, Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { DocCast, StrCast } from '../../../fields/Types';
-import { StopEvent } from '../../../Utils';
 import { DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
@@ -470,7 +469,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                                       }
                             }
                             style={{
-                                fontWeight: DocListCast(fromDoc?.links).find(
+                                fontWeight: LinkManager.Links(fromDoc).find(
                                     link => Doc.AreProtosEqual(LinkManager.getOppositeAnchor(link, fromDoc!), result[0] as Doc) || Doc.AreProtosEqual(DocCast(LinkManager.getOppositeAnchor(link, fromDoc!)?.annotationOn), result[0] as Doc)
                                 )
                                     ? 'bold'
diff --git a/src/fields/util.ts b/src/fields/util.ts
index e517e7604..6ff13d5d3 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -1,8 +1,8 @@
-import { forEach } from 'lodash';
 import { $mobx, action, observable, runInAction, trace } from 'mobx';
 import { computedFn } from 'mobx-utils';
 import { DocServer } from '../client/DocServer';
 import { CollectionViewType } from '../client/documents/DocumentTypes';
+import { LinkManager } from '../client/util/LinkManager';
 import { SerializationHelper } from '../client/util/SerializationHelper';
 import { UndoManager } from '../client/util/UndoManager';
 import { returnZero } from '../Utils';
@@ -18,7 +18,6 @@ import {
     Doc,
     DocListCast,
     DocListCastAsync,
-    FieldResult,
     ForceServerWrite,
     HeightSym,
     HierarchyMapping,
@@ -259,7 +258,7 @@ function getEffectiveAcl(target: any, user?: string): symbol {
  */
 export function distributeAcls(key: string, acl: SharingPermissions, target: Doc, inheritingFromCollection?: boolean, visited?: Doc[], isDashboard?: boolean) {
     if (!visited) visited = [] as Doc[];
-    if (visited.includes(target)) return;
+    if (!target || visited.includes(target)) return;
 
     if ((target._viewType === CollectionViewType.Docking && visited.length > 1) || Doc.GetProto(visited[0]) !== Doc.GetProto(target)) {
         target[key] = acl;
@@ -293,26 +292,18 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc
         }
 
         // maps over the links of the document
-        DocListCast(dataDoc.links).forEach(link => distributeAcls(key, acl, link, inheritingFromCollection, visited));
+        LinkManager.Links(dataDoc).forEach(link => distributeAcls(key, acl, link, inheritingFromCollection, visited));
 
         // maps over the children of the document
-        DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc) + (isDashboard ? '-all' : '')]).map(d => {
+        DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc)]).forEach(d => {
             distributeAcls(key, acl, d, inheritingFromCollection, visited);
-            // }
-            const data = d[DataSym];
-            if (data) {
-                distributeAcls(key, acl, data, inheritingFromCollection, visited);
-            }
+            distributeAcls(key, acl, d[DataSym], inheritingFromCollection, visited);
         });
 
         // maps over the annotations of the document
-        DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc) + '-annotations']).map(d => {
+        DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc) + '-annotations']).forEach(d => {
             distributeAcls(key, acl, d, inheritingFromCollection, visited);
-            // }
-            const data = d[DataSym];
-            if (data) {
-                distributeAcls(key, acl, data, inheritingFromCollection, visited);
-            }
+            distributeAcls(key, acl, d[DataSym], inheritingFromCollection, visited);
         });
     }
 
-- 
cgit v1.2.3-70-g09d2


From 0e55893d0f7f2a0aa5098df73d0ece5a7f1a4ddf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 15 Mar 2023 22:33:22 -0400
Subject: fixed up Clone() and export/import collection to work with links,
 presentations, and contexts better.

---
 .eslintrc.json                                     |  4 ++
 package-lock.json                                  | 78 +++++++++++++---------
 package.json                                       |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  6 +-
 src/client/views/nodes/DocumentView.tsx            |  1 +
 src/client/views/nodes/trails/PresBox.tsx          |  7 +-
 src/decycler/decycler.d.ts                         |  2 +
 src/decycler/decycler.js                           | 51 ++++++++++++++
 src/fields/Doc.ts                                  | 75 ++++++++++++---------
 src/server/ApiManagers/UploadManager.ts            | 24 +++----
 tsconfig.json                                      | 24 ++-----
 11 files changed, 170 insertions(+), 104 deletions(-)
 create mode 100644 src/decycler/decycler.d.ts
 create mode 100644 src/decycler/decycler.js

(limited to 'src/client/views/nodes/trails/PresBox.tsx')

diff --git a/.eslintrc.json b/.eslintrc.json
index b9f8e1b7a..43bb53566 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,5 +10,9 @@
         "object-shorthand": "off",
         "class-methods-use-this": "off",
         "single-quote": "off"
+    },
+    "parserOptions": {
+        "ecmaVersion": 11,
+        "sourceType": "module"
     }
 }
diff --git a/package-lock.json b/package-lock.json
index 4695adf40..cc51ad9e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -590,15 +590,30 @@
             "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
             "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
         },
+        "@eslint-community/eslint-utils": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.2.0.tgz",
+            "integrity": "sha512-gB8T4H4DEfX2IV9zGDJPOBgP1e/DbfCPDTtEqUMckpvzS1OYtva8JdFYBqMwYk7xAQ429WGF/UPqn8uQ//h2vQ==",
+            "dev": true,
+            "requires": {
+                "eslint-visitor-keys": "^3.3.0"
+            }
+        },
+        "@eslint-community/regexpp": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz",
+            "integrity": "sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==",
+            "dev": true
+        },
         "@eslint/eslintrc": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
-            "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.1.tgz",
+            "integrity": "sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw==",
             "dev": true,
             "requires": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
-                "espree": "^9.4.0",
+                "espree": "^9.5.0",
                 "globals": "^13.19.0",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.2.1",
@@ -660,6 +675,12 @@
                 }
             }
         },
+        "@eslint/js": {
+            "version": "8.36.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.36.0.tgz",
+            "integrity": "sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==",
+            "dev": true
+        },
         "@ffmpeg/core": {
             "version": "0.10.0",
             "resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.10.0.tgz",
@@ -6683,12 +6704,15 @@
             }
         },
         "eslint": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
-            "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
+            "version": "8.36.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.36.0.tgz",
+            "integrity": "sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==",
             "dev": true,
             "requires": {
-                "@eslint/eslintrc": "^1.4.1",
+                "@eslint-community/eslint-utils": "^4.2.0",
+                "@eslint-community/regexpp": "^4.4.0",
+                "@eslint/eslintrc": "^2.0.1",
+                "@eslint/js": "8.36.0",
                 "@humanwhocodes/config-array": "^0.11.8",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@nodelib/fs.walk": "^1.2.8",
@@ -6699,10 +6723,9 @@
                 "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
                 "eslint-scope": "^7.1.1",
-                "eslint-utils": "^3.0.0",
                 "eslint-visitor-keys": "^3.3.0",
-                "espree": "^9.4.0",
-                "esquery": "^1.4.0",
+                "espree": "^9.5.0",
+                "esquery": "^1.4.2",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
@@ -6723,7 +6746,6 @@
                 "minimatch": "^3.1.2",
                 "natural-compare": "^1.4.0",
                 "optionator": "^0.9.1",
-                "regexpp": "^3.2.0",
                 "strip-ansi": "^6.0.1",
                 "strip-json-comments": "^3.1.0",
                 "text-table": "^0.2.0"
@@ -6811,6 +6833,15 @@
                         "estraverse": "^5.2.0"
                     }
                 },
+                "esquery": {
+                    "version": "1.5.0",
+                    "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+                    "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+                    "dev": true,
+                    "requires": {
+                        "estraverse": "^5.1.0"
+                    }
+                },
                 "estraverse": {
                     "version": "5.3.0",
                     "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
@@ -7852,23 +7883,6 @@
                 "estraverse": "^4.1.1"
             }
         },
-        "eslint-utils": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-            "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-            "dev": true,
-            "requires": {
-                "eslint-visitor-keys": "^2.0.0"
-            },
-            "dependencies": {
-                "eslint-visitor-keys": {
-                    "version": "2.1.0",
-                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-                    "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-                    "dev": true
-                }
-            }
-        },
         "eslint-visitor-keys": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
@@ -7876,9 +7890,9 @@
             "dev": true
         },
         "espree": {
-            "version": "9.4.1",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
-            "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==",
+            "version": "9.5.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.0.tgz",
+            "integrity": "sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw==",
             "dev": true,
             "requires": {
                 "acorn": "^8.8.0",
diff --git a/package.json b/package.json
index 00ce356f9..2c4c41917 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
         "cross-env": "^5.2.1",
         "css-loader": "^2.1.1",
         "dotenv": "^8.6.0",
-        "eslint": "^8.18.0",
+        "eslint": "^8.36.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-node": "^4.1.0",
         "eslint-config-prettier": "^8.5.0",
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 15d8144fc..f0c140ef1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1796,11 +1796,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         !options && ContextMenu.Instance.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
         const mores = ContextMenu.Instance.findByDescription('More...');
         const moreItems = mores && 'subitems' in mores ? mores.subitems : [];
-        if (!Doc.noviceMode) {
-            e.persist();
-            moreItems.push({ description: 'Export collection', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
-            moreItems.push({ description: 'Import exported collection', icon: 'upload', event: ({ x, y }) => this.importDocument(e.clientX, e.clientY) });
-        }
+        moreItems.push({ description: 'Import exported collection', icon: 'upload', event: ({ x, y }) => this.importDocument(e.clientX, e.clientY) });
         !mores && ContextMenu.Instance.addItem({ description: 'More...', subitems: moreItems, icon: 'eye' });
     };
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 02af30d0c..b7a760c1e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1002,6 +1002,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     }
                     moreItems.push({ description: 'Copy ID', event: () => Utils.CopyText(Doc.globalServerPath(this.props.Document)), icon: 'fingerprint' });
                 }
+                moreItems.push({ description: 'Export collection', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
             }
 
             if (this.props.removeDocument && !Doc.IsSystem(this.rootDoc) && Doc.ActiveDashboard !== this.props.Document) {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index be40b3592..e79e7472a 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -570,9 +570,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 }
             } else {
                 if (bestTarget._panX !== activeItem.presPanX || bestTarget._panY !== activeItem.presPanY || bestTarget._viewScale !== activeItem.presViewScale) {
-                    bestTarget._panX = activeItem.presPanX;
-                    bestTarget._panY = activeItem.presPanY;
-                    bestTarget._viewScale = activeItem.presViewScale;
+                    bestTarget._panX = activeItem.presPanX ?? bestTarget._panX;
+                    bestTarget._panY = activeItem.presPanY ?? bestTarget._panY;
+                    bestTarget._viewScale = activeItem.presViewScale ?? bestTarget._viewScale;
                     changed = true;
                 }
             }
@@ -717,6 +717,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             zoomTime: activeItem.presMovement === PresMovement.Jump ? 0 : Math.min(Math.max(effect ? 750 : 500, (effect ? 0.2 : 1) * presTime), presTime),
             effect: activeItem,
             noSelect: true,
+            openLocation: OpenWhere.addLeft,
             anchorDoc: activeItem,
             easeFunc: StrCast(activeItem.presEaseFunc, 'ease') as any,
             zoomTextSelections: BoolCast(activeItem.presZoomText),
diff --git a/src/decycler/decycler.d.ts b/src/decycler/decycler.d.ts
new file mode 100644
index 000000000..84620f79c
--- /dev/null
+++ b/src/decycler/decycler.d.ts
@@ -0,0 +1,2 @@
+export declare const decycle: Function;
+export declare const retrocycle: Function;
diff --git a/src/decycler/decycler.js b/src/decycler/decycler.js
new file mode 100644
index 000000000..7fb8a45c7
--- /dev/null
+++ b/src/decycler/decycler.js
@@ -0,0 +1,51 @@
+///
+///  this is a modified copy of the npm project: https://www.npmjs.com/package/json-decycle
+///  the original code is used as replacer when stringifying JSON objects that have cycles.
+///  However, we want an additional replacer that stringifies Dash Fields and Docs in a custom way.
+///  So this modified code allows for a custom replacer to be added to this object that will run before this replacer
+///
+
+const g = e => typeof e === 'object' && e != null && !(e instanceof Boolean) && !(e instanceof Date) && !(e instanceof Number) && !(e instanceof RegExp) && !(e instanceof String);
+const b = e => String('#') + e.map(t => String(t).replace(/~/g, '~0').replace(/\//g, '~1')).join('/');
+// eslint-disable-next-line node/no-unsupported-features/es-syntax
+export function decycle(replacer) {
+    const e = new WeakMap();
+    return function (n, rr) {
+        const r = replacer(n, rr);
+        if (n !== '$ref' && g(r)) {
+            if (e.has(r)) return { $ref: b(e.get(r)) };
+            e.set(r, [...(e.get(this) === undefined ? [] : e.get(this)), n]);
+        }
+        return r;
+    };
+}
+// eslint-disable-next-line node/no-unsupported-features/es-syntax
+export function retrocycle() {
+    const e = new WeakMap();
+    const t = new WeakMap();
+    const n = new Set();
+    function r(o) {
+        const c = o.$ref.slice(1).split('/');
+        let s;
+        let a = this;
+        // eslint-disable-next-line no-plusplus
+        for (let p = 0; p < c.length; p++) {
+            s = c[p].replace(/~1/g, '/').replace(/~0/g, '~');
+            a = a[s];
+        }
+        const f = e.get(o);
+        f[t.get(o)] = a;
+    }
+    return function (c, s) {
+        if (c === '$ref') n.add(this);
+        else if (g(s)) {
+            const f = c === '' && Object.keys(this).length === 1;
+            if (f) n.forEach(r, this);
+            else {
+                e.set(s, this);
+                t.set(s, c);
+            }
+        }
+        return s;
+    };
+}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index de94ed5db..168e29dd5 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -10,6 +10,7 @@ import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGloba
 import { SelectionManager } from '../client/util/SelectionManager';
 import { afterDocDeserialize, autoObject, Deserializable, SerializationHelper } from '../client/util/SerializationHelper';
 import { UndoManager } from '../client/util/UndoManager';
+import { decycle } from '../decycler/decycler';
 import { DashColor, incrementTitleCopy, intersectRect, Utils } from '../Utils';
 import { DateField } from './DateField';
 import { Copy, HandleUpdate, Id, OnUpdate, Parent, Self, SelfProxy, ToScriptString, ToString, Update } from './FieldSymbols';
@@ -25,7 +26,6 @@ import { Cast, DocCast, FieldValue, NumCast, StrCast, ToConstructor } from './Ty
 import { AudioField, ImageField, MapField, PdfField, VideoField, WebField } from './URLField';
 import { deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, updateFunction } from './util';
 import JSZip = require('jszip');
-
 export namespace Field {
     export function toKeyValueString(doc: Doc, key: string): string {
         const onDelegate = Object.keys(doc).includes(key);
@@ -701,22 +701,12 @@ export namespace Doc {
         return bestAlias ?? Doc.MakeAlias(doc);
     }
 
-    export async function makeClone(
-        doc: Doc,
-        cloneMap: Map<string, Doc>,
-        linkMap: Map<Doc, Doc>,
-        rtfs: { copy: Doc; key: string; field: RichTextField }[],
-        exclusions: string[],
-        topLevelExclusions: string[],
-        dontCreate: boolean,
-        asBranch: boolean
-    ): Promise<Doc> {
+    export async function makeClone(doc: Doc, cloneMap: Map<string, Doc>, linkMap: Map<string, Doc>, rtfs: { copy: Doc; key: string; field: RichTextField }[], exclusions: string[], dontCreate: boolean, asBranch: boolean): Promise<Doc> {
         if (Doc.IsBaseProto(doc)) return doc;
         if (cloneMap.get(doc[Id])) return cloneMap.get(doc[Id])!;
-        const copy = dontCreate ? (asBranch ? Cast(doc.branchMaster, Doc, null) || doc : doc) : new Doc(undefined, true);
+        const copy = dontCreate ? (asBranch ? Cast(doc.branchMaster, Doc, null) ?? doc : doc) : new Doc(undefined, true);
         cloneMap.set(doc[Id], copy);
-        const fieldExclusions = doc.type === DocumentType.MARKER ? exclusions.filter(ex => ex !== 'annotationOn') : exclusions;
-        const filter = [...fieldExclusions, ...topLevelExclusions, ...Cast(doc.cloneFieldFilter, listSpec('string'), [])];
+        const filter = [...exclusions, ...Cast(doc.cloneFieldFilter, listSpec('string'), [])];
         await Promise.all(
             Object.keys(doc).map(async key => {
                 if (filter.includes(key)) return;
@@ -727,10 +717,10 @@ export namespace Doc {
                     const list = await Cast(doc[key], listSpec(Doc));
                     const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc);
                     if (docs !== undefined && docs.length) {
-                        const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, linkMap, rtfs, exclusions, [], dontCreate, asBranch)));
+                        const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, linkMap, rtfs, exclusions, dontCreate, asBranch)));
                         !dontCreate && assignKey(new List<Doc>(clones));
                     } else if (doc[key] instanceof Doc) {
-                        assignKey(key.includes('layout[') ? undefined : key.startsWith('layout') ? (doc[key] as Doc) : await Doc.makeClone(doc[key] as Doc, cloneMap, linkMap, rtfs, exclusions, [], dontCreate, asBranch)); // reference documents except copy documents that are expanded template fields
+                        assignKey(key.includes('layout[') ? undefined : key.startsWith('layout') ? (doc[key] as Doc) : await Doc.makeClone(doc[key] as Doc, cloneMap, linkMap, rtfs, exclusions, dontCreate, asBranch)); // reference documents except copy documents that are expanded template fields
                     } else {
                         !dontCreate && assignKey(ObjectField.MakeCopy(field));
                         if (field instanceof RichTextField) {
@@ -740,13 +730,12 @@ export namespace Doc {
                         }
                     }
                 };
-                if (key === 'proto') {
-                    if (doc[key] instanceof Doc) {
-                        assignKey(await Doc.makeClone(doc[key] as Doc, cloneMap, linkMap, rtfs, exclusions, [], dontCreate, asBranch));
-                    }
-                } else if (key === 'anchor1' || key === 'anchor2') {
-                    if (doc[key] instanceof Doc) {
-                        assignKey(await Doc.makeClone(doc[key] as Doc, cloneMap, linkMap, rtfs, exclusions, [], true, asBranch));
+                const docAtKey = doc[key];
+                if (docAtKey instanceof Doc) {
+                    if (!Doc.IsSystem(docAtKey) && (key === 'annotationOn' || (key === 'proto' && cloneMap.has(doc[Id])) || ((key === 'anchor1' || key === 'anchor2') && doc.author === Doc.CurrentUserEmail))) {
+                        assignKey(await Doc.makeClone(docAtKey, cloneMap, linkMap, rtfs, exclusions, dontCreate, asBranch));
+                    } else {
+                        assignKey(docAtKey);
                     }
                 } else {
                     if (field instanceof RefField) {
@@ -765,8 +754,8 @@ export namespace Doc {
             })
         );
         for (const link of Array.from(doc[DirectLinksSym])) {
-            const linkClone = await Doc.makeClone(link, cloneMap, linkMap, rtfs, exclusions, [], dontCreate, asBranch);
-            linkMap.set(link, linkClone);
+            const linkClone = await Doc.makeClone(link, cloneMap, linkMap, rtfs, exclusions, dontCreate, asBranch);
+            linkMap.set(link[Id], linkClone);
         }
         if (!dontCreate) {
             Doc.SetInPlace(copy, 'title', (asBranch ? 'BRANCH: ' : 'CLONE: ') + doc.title, true);
@@ -779,11 +768,29 @@ export namespace Doc {
         Doc.AddFileOrphan(copy);
         return copy;
     }
+    export function repairClone(doc: Doc, cloned: Doc[], visited: Set<Doc>) {
+        if (visited.has(doc)) return;
+        visited.add(doc);
+        Object.keys(doc).map(key => {
+            const docAtKey = DocCast(doc[key]);
+            if (docAtKey && !Doc.IsSystem(docAtKey)) {
+                if (!cloned.includes(docAtKey)) {
+                    doc[key] = undefined;
+                } else {
+                    repairClone(docAtKey, cloned, visited);
+                }
+            }
+        });
+    }
     export async function MakeClone(doc: Doc, dontCreate: boolean = false, asBranch = false, cloneMap: Map<string, Doc> = new Map()) {
-        const linkMap = new Map<Doc, Doc>();
+        const linkMap = new Map<string, Doc>();
         const rtfMap: { copy: Doc; key: string; field: RichTextField }[] = [];
-        const copy = await Doc.makeClone(doc, cloneMap, linkMap, rtfMap, ['cloneOf', 'branches', 'branchOf'], ['context'], dontCreate, asBranch);
-        Array.from(linkMap.entries()).map((links: Doc[]) => LinkManager.Instance.addLink(links[1], true));
+        const copy = await Doc.makeClone(doc, cloneMap, linkMap, rtfMap, ['cloneOf', 'branches', 'branchOf'], dontCreate, asBranch);
+        const repaired = new Set<Doc>();
+        const linkedDocs = Array.from(linkMap.values());
+        const clonedDocs = [...Array.from(cloneMap.values()), ...linkedDocs];
+        clonedDocs.map(clone => Doc.repairClone(clone, Array.from(cloneMap.values()), repaired));
+        linkedDocs.map((link: Doc) => LinkManager.Instance.addLink(link, true));
         rtfMap.map(({ copy, key, field }) => {
             const replacer = (match: any, attr: string, id: string, offset: any, string: any) => {
                 const mapped = cloneMap.get(id);
@@ -797,7 +804,7 @@ export namespace Doc {
             const re = new RegExp(regex, 'g');
             copy[key] = new RichTextField(field.Data.replace(/("textId":|"audioId":|"anchorId":)"([^"]+)"/g, replacer).replace(re, replacer2), field.Text);
         });
-        return { clone: copy, map: cloneMap };
+        return { clone: copy, map: cloneMap, linkMap };
     }
 
     export async function Zip(doc: Doc) {
@@ -806,9 +813,10 @@ export namespace Doc {
         // a.href = url;
         // a.download = `DocExport-${this.props.Document[Id]}.zip`;
         // a.click();
-        const { clone, map } = await Doc.MakeClone(doc, true);
+        const { clone, map, linkMap } = await Doc.MakeClone(doc, true);
+        clone.LINKS = new List<Doc>(Array.from(linkMap.values()));
         function replacer(key: any, value: any) {
-            if (['branchOf', 'cloneOf', 'context', 'cursors'].includes(key)) return undefined;
+            if (['branchOf', 'cloneOf', 'cursors'].includes(key)) return undefined;
             else if (value instanceof Doc) {
                 if (key !== 'field' && Number.isNaN(Number(key))) {
                     const __fields = value[FieldsSym]();
@@ -833,7 +841,7 @@ export namespace Doc {
 
         const docs: { [id: string]: any } = {};
         Array.from(map.entries()).forEach(f => (docs[f[0]] = f[1]));
-        const docString = JSON.stringify({ id: doc[Id], docs }, replacer);
+        const docString = JSON.stringify({ id: doc[Id], docs }, decycle(replacer));
 
         const zip = new JSZip();
 
@@ -1520,7 +1528,8 @@ export namespace Doc {
             const response = await fetch(upload, { method: 'POST', body: formData });
             const json = await response.json();
             if (json !== 'error') {
-                const doc = await DocServer.GetRefField(json);
+                const doc = DocCast(await DocServer.GetRefField(json));
+                (await DocListCastAsync(doc?.LINKS))?.forEach(link => LinkManager.Instance.addLink(link));
                 return doc;
             }
         }
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index fe4c475c9..9bacbd5c8 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -1,19 +1,19 @@
-import ApiManager, { Registration } from './ApiManager';
-import { Method, _success } from '../RouteManager';
 import * as formidable from 'formidable';
-import v4 = require('uuid/v4');
-const AdmZip = require('adm-zip');
-import { extname, basename, dirname } from 'path';
 import { createReadStream, createWriteStream, unlink, writeFile } from 'fs';
-import { publicDirectory, filesDirectory } from '..';
-import { Database } from '../database';
-import { DashUploadUtils, InjectSize, SizeSuffix } from '../DashUploadUtils';
+import { basename, dirname, extname, normalize } from 'path';
 import * as sharp from 'sharp';
-import { AcceptableMedia, Upload } from '../SharedMediaTypes';
-import { normalize } from 'path';
+import { filesDirectory, publicDirectory } from '..';
+import { retrocycle } from '../../decycler/decycler';
+import { DashUploadUtils, InjectSize, SizeSuffix } from '../DashUploadUtils';
+import { Database } from '../database';
+import { Method, _success } from '../RouteManager';
 import RouteSubscriber from '../RouteSubscriber';
-const imageDataUri = require('image-data-uri');
+import { AcceptableMedia, Upload } from '../SharedMediaTypes';
+import ApiManager, { Registration } from './ApiManager';
 import { SolrManager } from './SearchManager';
+import v4 = require('uuid/v4');
+const AdmZip = require('adm-zip');
+const imageDataUri = require('image-data-uri');
 const fs = require('fs');
 
 export enum Directory {
@@ -252,7 +252,7 @@ export default class UploadManager extends ApiManager {
                                 });
                                 const json = zip.getEntry('doc.json');
                                 try {
-                                    const data = JSON.parse(json.getData().toString('utf8'));
+                                    const data = JSON.parse(json.getData().toString('utf8'), retrocycle());
                                     const datadocs = data.docs;
                                     id = getId(data.id);
                                     const docs = Object.keys(datadocs).map(key => datadocs[key]);
diff --git a/tsconfig.json b/tsconfig.json
index 993ab13b9..bff9255db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,34 +2,22 @@
     "compilerOptions": {
         "target": "es5",
         "downlevelIteration": true,
-        // "module": "system",
         "removeComments": true,
         "experimentalDecorators": true,
         "allowSyntheticDefaultImports": true,
+        "moduleDetection": "auto",
         "strict": true,
         "jsx": "react",
         "allowJs": true,
         "sourceMap": true,
         "outDir": "dist",
-        "lib": [
-            "dom",
-            "es2015"
-        ],
-        "typeRoots": [
-            "node_modules/@types",
-            "./src/typings"
-        ],
-        "types": [
-            "youtube",
-            "node"
-        ]
+        "lib": ["dom", "es2015"],
+        "typeRoots": ["node_modules/@types", "./src/typings"],
+        "types": ["youtube", "node"]
     },
     // "exclude": [
     //   "node_modules",
     //   "static"
     // ],
-    "typeRoots": [
-        "./node_modules/@types",
-        "./src/typings"
-    ]
-}
\ No newline at end of file
+    "typeRoots": ["./node_modules/@types", "./src/typings"]
+}
-- 
cgit v1.2.3-70-g09d2

