1 files changed, 112 insertions, 0 deletions
diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx
new file mode 100644
index 000000000..44cec6922
--- /dev/null
+++ b/src/client/util/BranchingTrailManager.tsx
@@ -0,0 +1,112 @@
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc } from '../../fields/Doc';
+import { Id } from '../../fields/FieldSymbols';
+import { PresBox } from '../views/nodes/trails';
+import { OverlayView } from '../views/OverlayView';
+import { DocumentManager } from './DocumentManager';
+
+@observer
+export class BranchingTrailManager extends React.Component {
+    public static Instance: BranchingTrailManager;
+
+    constructor(props: any) {
+        super(props);
+        if (!BranchingTrailManager.Instance) {
+            BranchingTrailManager.Instance = this;
+        }
+    }
+
+    setupUi = () => {
+        OverlayView.Instance.addWindow(<BranchingTrailManager></BranchingTrailManager>, { x: 100, y: 150, width: 1000, title: 'Branching Trail' });
+    };
+
+    // stack of the history
+    @observable private slideHistoryStack: String[] = [];
+    @action setSlideHistoryStack = action((newArr: String[]) => {
+        this.slideHistoryStack = newArr;
+    });
+
+    @observable private containsSet: Set<String> = new Set<String>();
+
+    // prev pres to copmare with
+    @observable private prevPresId: String | null = null;
+    @action setPrevPres = action((newId: String | null) => {
+        this.prevPresId = newId;
+    });
+
+    // docId to Doc map
+    @observable private docIdToDocMap: Map<String, Doc> = new Map<String, Doc>();
+
+    observeDocumentChange = (targetDoc: Doc, pres: PresBox) => {
+        const presId = pres.props.Document[Id];
+        if (this.prevPresId === presId) {
+            return;
+        }
+
+        const targetDocId = targetDoc[Id];
+        this.docIdToDocMap.set(targetDocId, targetDoc);
+
+        if (this.prevPresId === null) {
+            this.setupUi();
+        }
+
+        if (this.prevPresId === null || this.prevPresId !== presId) {
+            this.setPrevPres(presId);
+            // REVERT THE SET
+            const stringified = [presId, targetDocId].toString();
+            if (this.containsSet.has([presId, targetDocId].toString())) {
+                // remove all the elements after the targetDocId
+                const newStack = this.slideHistoryStack.slice(0, this.slideHistoryStack.indexOf(stringified));
+                const removed = this.slideHistoryStack.slice(this.slideHistoryStack.indexOf(stringified));
+                this.setSlideHistoryStack(newStack);
+
+                removed.forEach(info => this.containsSet.delete(info.toString()));
+            } else {
+                this.setSlideHistoryStack([...this.slideHistoryStack, stringified]);
+                this.containsSet.add(stringified);
+            }
+        }
+    };
+
+    clickHandler = (e: React.PointerEvent<HTMLButtonElement>, targetDocId: string, removeIndex: number) => {
+        const targetDoc = this.docIdToDocMap.get(targetDocId);
+        if (!targetDoc) {
+            return;
+        }
+        const newStack = this.slideHistoryStack.slice(0, removeIndex);
+        const removed = this.slideHistoryStack.slice(removeIndex);
+        this.setSlideHistoryStack(newStack);
+
+        removed.forEach(info => this.containsSet.delete(info.toString()));
+        DocumentManager.Instance.showDocument(targetDoc, { willZoomCentered: true });
+        //PresBox.NavigateToTarget(targetDoc, targetDoc);
+    };
+
+    @computed get trailBreadcrumbs() {
+        return (
+            <div style={{ border: '.5rem solid green', padding: '5px', backgroundColor: 'white', minHeight: '50px' }}>
+                {this.slideHistoryStack.map((info, index) => {
+                    const [presId, targetDocId] = info.split(',');
+                    const doc = this.docIdToDocMap.get(targetDocId);
+                    if (!doc) {
+                        return <></>;
+                    }
+                    return (
+                        <span key={targetDocId}>
+                            <button key={index} onPointerDown={e => this.clickHandler(e, targetDocId, index)}>
+                                {presId.slice(0, 3) + ':' + doc.title}
+                            </button>
+                            -{'>'}
+                        </span>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    render() {
+        return <div>{BranchingTrailManager.Instance.trailBreadcrumbs}</div>;
+    }
+}