7 files changed, 111 insertions, 6 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6b18caed0..1aeb93d42 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -15,6 +15,7 @@ import { TrackMovements } from '../util/TrackMovements';
 import { CollectionView } from './collections/CollectionView';
 import { MainView } from './MainView';
 import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
+import { BranchingTrailManager } from '../util/BranchingTrailManager';
 dotenv.config();
 
 AssignAllExtensions();
@@ -48,6 +49,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure
         new LinkManager();
         new TrackMovements();
         new ReplayMovements();
+        new BranchingTrailManager();
         root.render(<MainView />);
     }, 0);
 })();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 60459cf30..1fc5ee1d7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -63,6 +63,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { BranchingTrailManager } from '../util/BranchingTrailManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7eab03e1d..cb6432687 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -25,10 +25,11 @@
         width: 100%;
         height: 100%;
         position: absolute;
+        left: 10px;
 
         .treeView-expandIcon {
-            display: none;
-            left: -10px;
+            // display: none;
+            left: -8px;
             position: absolute;
         }
 
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 75e76019e..153c2c71a 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -227,6 +227,37 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
     };
 
+    @undoBatch
+    @action
+    recurToggle = (childList: Doc[]) => {
+        if (childList.length > 0) {
+            childList.forEach(child => {
+                console.log(child);
+                child.runProcess = !!!child.runProcess;
+                child.toggleChildrenRun?.();
+            });
+        }
+    };
+
+    @undoBatch
+    @action
+    getRunningChildren = (childList: Doc[]) => {
+        if (childList.length === 0) {
+            return [];
+        }
+
+        const runningChildren = [];
+        childList.forEach(child => {
+            if (child.runProcess && child.getChildrenToRun) {
+                if (child.runProcess) {
+                    runningChildren.push(child);
+                }
+                runningChildren.push(...(child.getChildrenToRun?.() ?? []));
+            }
+        });
+        return runningChildren;
+    };
+
     constructor(props: any) {
         super(props);
         if (!TreeView._openLevelScript) {
@@ -235,6 +266,18 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
         this._openScript = Doc.IsSystem(this.props.document) ? undefined : () => TreeView._openLevelScript!;
         this._editTitleScript = Doc.IsSystem(this.props.document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!;
+
+        // set for child processing highligting
+        // this.dataDoc.testing = 'testing';
+        this.dataDoc.hasChildren = this.childDocs.length > 0;
+        // this.dataDoc.children = this.childDocs;
+        this.dataDoc.toggleChildrenRun = () => {
+            this.recurToggle(this.childDocs);
+        };
+
+        this.dataDoc.getChildrenToRun = () => {
+            return this.getRunningChildren(this.childDocs);
+        };
     }
 
     _treeEle: any;
@@ -696,7 +739,11 @@ export class TreeView extends React.Component<TreeViewProps> {
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
                         <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}>
-                            <FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />
+                            <FontAwesomeIcon
+                                size="sm"
+                                style={{ display: this.childDocs?.length >= 1 ? 'block' : 'none' }}
+                                icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'}
+                            />
                         </div>
                         {this.onCheckedClick ? null : typeof iconType === 'string' ? <FontAwesomeIcon icon={iconType as IconProp} /> : iconType}
                     </div>
@@ -899,7 +946,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 })}
                 Document={this.doc}
                 fitWidth={returnTrue}
-                DataDoc={undefined}
+                DataDoc={this.dataDoc}
                 scriptContext={this}
                 hideDecorationTitle={this.props.treeView.outlineMode}
                 hideResizeHandles={this.props.treeView.outlineMode}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3589a9065..2836a39fb 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -35,6 +35,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { ScriptingBox } from '../ScriptingBox';
 import './PresBox.scss';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
+import { BranchingTrailManager } from '../../../util/BranchingTrailManager';
 const { Howl } = require('howler');
 
 export interface pinDataTypes {
@@ -278,6 +279,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             return listItems.filter(doc => !doc.unrendered);
         }
     };
+
+    // go to documents chain
+    runSubroutines = (childrenToRun: Doc[], normallyNextSlide: Doc) => {
+        console.log(childrenToRun, normallyNextSlide, 'runSUBFUNC');
+        if (childrenToRun[0] === normallyNextSlide) {
+            return;
+        }
+
+        childrenToRun.forEach(child => {
+            DocumentManager.Instance.showDocument(child, {});
+        });
+    };
+
     // Called when the user activates 'next' - to move to the next part of the pres. trail
     @action
     next = () => {
@@ -314,6 +328,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             // 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;
+
+            // before moving onto next slide, run the subroutines :)
+            const currentDoc = this.childDocs[this.itemIndex];
+            this.runSubroutines(currentDoc.getChildrenToRun?.(), this.childDocs[this.itemIndex + 1]);
+
             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 {
@@ -684,6 +703,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     navigateToActiveItem = (afterNav?: () => void) => {
         const activeItem: Doc = this.activeItem;
         const targetDoc: Doc = this.targetDoc;
+        BranchingTrailManager.Instance.observeDocumentChange(targetDoc, this);
         const finished = () => {
             afterNav?.();
             console.log('Finish Slide Nav: ' + targetDoc.title);
diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss
index 4f95f0c1f..9ac2b5a94 100644
--- a/src/client/views/nodes/trails/PresElementBox.scss
+++ b/src/client/views/nodes/trails/PresElementBox.scss
@@ -4,6 +4,10 @@ $light-background: #ececec;
 $slide-background: #d5dce2;
 $slide-active: #5b9fdd;
 
+.testingv2 {
+    background-color: red;
+}
+
 .presItem-container {
     cursor: grab;
     display: flex;
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 92696240b..96f6a514b 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -180,7 +180,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 e.stopPropagation();
                 e.preventDefault();
                 this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
-                this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
+                // this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
             });
         }
     };
@@ -403,6 +403,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
+    @undoBatch
+    @action
+    lfg = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        console.log('lfg called');
+        // TODO: fix this bug
+        const { toggleChildrenRun } = this.rootDoc;
+        toggleChildrenRun?.();
+
+        // call this.rootDoc.recurChildren() to get all the children
+        // if (iconClick) PresElementBox.showVideo = false;
+    };
+
     @computed
     get toolbarWidth(): number {
         const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
@@ -418,6 +431,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false;
         const targetDoc: Doc = this.targetDoc;
         const activeItem: Doc = this.rootDoc;
+        const hasChildren: boolean = Cast(this.rootDoc?.hasChildren, 'boolean') || false;
 
         const items: JSX.Element[] = [];
         items.push(
@@ -482,6 +496,22 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </div>
             </Tooltip>
         );
+        if (!Doc.noviceMode && hasChildren) {
+            // TODO: replace with if treeveiw, has childrenDocs
+            items.push(
+                <Tooltip key="children" title={<div className="dash-tooltip">Run child processes (tree only)</div>}>
+                    <div
+                        className="slideButton"
+                        onClick={e => {
+                            e.stopPropagation();
+                            this.lfg(e);
+                        }}
+                        style={{ fontWeight: 700 }}>
+                        <FontAwesomeIcon icon={'circle-play'} onPointerDown={e => e.stopPropagation()} />
+                    </div>
+                </Tooltip>
+            );
+        }
         items.push(
             <Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}>
                 <div className={'slideButton'} onClick={this.removeItem}>
@@ -528,7 +558,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 ) : (
                     <div
                         ref={this._dragRef}
-                        className={`presItem-slide ${isCurrent ? 'active' : ''}`}
+                        className={`presItem-slide ${isCurrent ? 'active' : ''}${this.rootDoc.runProcess ? ' testingv2' : ''}`}
                         style={{
                             display: 'infline-block',
                             backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),