Compile and make compatible all the scattered code I had for empowering trails for dash meeting. Still much to do with ui, but basic functionaltiy is there. Two key things, 1) navigation for branching trails, and 2) ability to runSubroutines on tested trails.

1 files changed, 113 insertions, 0 deletions

diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx
new file mode 100644
index 000000000..5a9dd7743
--- /dev/null
+++ b/src/client/util/BranchingTrailManager.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { action, observable, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { PresBox } from '../views/nodes/trails';
+import { Id } from '../../fields/FieldSymbols';
+import { DocumentManager } from './DocumentManager';
+import { OverlayView } from '../views/OverlayView';
+import { compute } from 'googleapis/build/src/apis/compute';
+
+@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.PointerEventHandler<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>;
+    }
+}