Merge branch 'master' of https://github.com/brown-dash/Dash-Web into joanne-tutorialagent

3 files changed, 51 insertions, 44 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 8f9b132e8..a447a6ae4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -564,7 +564,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 const B = this.screenToFreeformContentsXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
                 const inkDoc = this.createInkDoc(points, B);
                 if (Doc.ActiveInk === InkInkTool.Highlight) inkDoc.$backgroundColor = 'transparent';
-                if (Doc.ActiveInk === InkInkTool.Write) {
+                if ([InkInkTool.Write, InkInkTool.Math].includes(Doc.ActiveInk)) {
                     this.unprocessedDocs.push(inkDoc);
                     CollectionFreeFormView.collectionsWithUnprocessedInk.add(this);
                 }
@@ -2260,18 +2260,41 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         );
     };
 
+    @computed get inkEraser() {
+        return (
+            Doc.ActiveTool === InkTool.Eraser &&
+            Doc.ActiveEraser === InkEraserTool.Radius &&
+            this._showEraserCircle && (
+                <div
+                    onPointerMove={this.onCursorMove}
+                    style={{
+                        position: 'fixed',
+                        left: this._eraserX,
+                        top: this._eraserY,
+                        width: (ActiveEraserWidth() + 5) * 2,
+                        height: (ActiveEraserWidth() + 5) * 2,
+                        borderRadius: '50%',
+                        border: '1px solid gray',
+                        transform: 'translate(-50%, -50%)',
+                    }}
+                />
+            )
+        );
+    }
+
+    setRef = (r: HTMLDivElement | null) => {
+        this.createDashEventsTarget(r);
+        this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel);
+        r?.addEventListener('mouseleave', this.onMouseLeave);
+        r?.addEventListener('mouseenter', this.onMouseEnter);
+    };
     render() {
         TraceMobx();
         return (
             <div
                 className="collectionfreeformview-container"
                 id={this._paintedId}
-                ref={r => {
-                    this.createDashEventsTarget(r);
-                    this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel);
-                    r?.addEventListener('mouseleave', this.onMouseLeave);
-                    r?.addEventListener('mouseenter', this.onMouseEnter);
-                }}
+                ref={this.setRef}
                 onWheel={this.onPointerWheel}
                 onClick={this.onClick}
                 onPointerDown={this.onPointerDown}
@@ -2286,21 +2309,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     width: `${100 / this.nativeDimScaling}%`,
                     height: this._props.getScrollHeight?.() ?? `${100 / this.nativeDimScaling}%`,
                 }}>
-                {Doc.ActiveTool === InkTool.Eraser && Doc.ActiveEraser === InkEraserTool.Radius && this._showEraserCircle && (
-                    <div
-                        onPointerMove={this.onCursorMove}
-                        style={{
-                            position: 'fixed',
-                            left: this._eraserX,
-                            top: this._eraserY,
-                            width: (ActiveEraserWidth() + 5) * 2,
-                            height: (ActiveEraserWidth() + 5) * 2,
-                            borderRadius: '50%',
-                            border: '1px solid gray',
-                            transform: 'translate(-50%, -50%)',
-                        }}
-                    />
-                )}
+                {this.inkEraser}
                 {this.paintFunc ? (
                     <FormattedTextBox {...this.props} /> // need this so that any live dashfieldviews will update the underlying text that the code eval reads
                 ) : this._lightboxDoc ? (
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 142085e14..c31558dff 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -150,6 +150,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
         FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this.Document);
     }, 'remove doc from face');
 
+    setRef = (r: HTMLDivElement | null) => this.fixWheelEvents(r, this._props.isContentActive);
     render() {
         return (
             <div className="face-document-item" ref={ele => this.createDropTarget(ele!)}>
@@ -176,7 +177,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         style={{
                             pointerEvents: this._props.isContentActive() ? undefined : 'none',
                         }}
-                        ref={r => this.fixWheelEvents(r, this._props.isContentActive)}>
+                        ref={this.setRef}>
                         {FaceRecognitionHandler.UniqueFaceImages(this.Document).map((doc, i) => {
                             const [name, type] = ImageCastToNameType(doc?.[Doc.LayoutDataKey(doc)]) ?? ['-missing-', '.png'];
                             return (
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ff78b332a..4191aaca8 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -762,29 +762,26 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         }
         e.stopPropagation();
     };
+    setRef = (r: HTMLDivElement | null) => {
+        r?.addEventListener('dashDragMovePause', this.onDragMovePause as EventListenerOrEventListenerObject);
+        this.MarqueeRef = r;
+    };
     render() {
         return (
-            <>
-                <div
-                    className="marqueeView"
-                    ref={r => {
-                        r?.addEventListener('dashDragMovePause', this.onDragMovePause as EventListenerOrEventListenerObject);
-                        this.MarqueeRef = r;
-                    }}
-                    style={{
-                        overflow: StrCast(this._props.Document._overflow),
-                        cursor: Doc.ActiveTool === InkTool.Ink || this._visible ? 'crosshair' : 'pointer',
-                    }}
-                    onDragOver={e => e.preventDefault()}
-                    onScroll={e => {
-                        e.currentTarget.scrollTop = e.currentTarget.scrollLeft = 0;
-                    }}
-                    onClick={this.onClick}
-                    onPointerDown={this.onPointerDown}>
-                    {this._visible ? this.marqueeDiv : null}
-                    {this.props.children}
-                </div>
-            </>
+            <div
+                className="marqueeView"
+                ref={this.setRef}
+                style={{
+                    overflow: StrCast(this._props.Document._overflow),
+                    cursor: Doc.ActiveTool === InkTool.Ink || this._visible ? 'crosshair' : 'pointer',
+                }}
+                onDragOver={e => e.preventDefault()}
+                onScroll={e => (e.currentTarget.scrollTop = (e.currentTarget.scrollLeft = 0))} // prettier-ignore
+                onClick={this.onClick}
+                onPointerDown={this.onPointerDown}>
+                {this._visible ? this.marqueeDiv : null}
+                {this.props.children}
+            </div>
         );
     }
 }