fixed invalidations to not trigger creating new refs when ref= was assigned to an anonymous function. fixed scribble erase to not delete everything it overlaps, just things it intersects with or contains. fixed ink to have a Math mode and fixed math recognition myscript calls.

1 files changed, 31 insertions, 22 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 32ace463d..6e9e503f4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -562,7 +562,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);
                 }
@@ -2220,18 +2220,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}
@@ -2246,21 +2269,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 ? (