Merge branch 'master' into alyssa-starter

1 files changed, 12 insertions, 15 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 1b1431373..06e7e576b 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -19,6 +19,7 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { DocUtils } from '../../documents/DocUtils';
 import { Networking } from '../../Network';
 import { DragManager } from '../../util/DragManager';
+import { SnappingManager } from '../../util/SnappingManager';
 import { undoBatch } from '../../util/UndoManager';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 import { ContextMenu } from '../ContextMenu';
@@ -95,15 +96,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _imageRef: HTMLImageElement | null = null; // <video> ref
     @observable private _quizBoxes: Doc[] = [];
-    @observable private _width: number = 0;
-    @observable private _height: number = 0;
-    @observable private searchInput = '';
+    @observable private _searchInput = '';
     @observable private _quizMode = quizMode.NONE;
-    @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
-    @observable _curSuffix = '';
-    @observable _error = '';
+    @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>();
+    @observable private _curSuffix = '';
+    @observable private _error = '';
     @observable private _loading = false;
-    @observable _isHovering = false; // flag to switch between primary and alternate images on hover
+    @observable private _isHovering = false; // flag to switch between primary and alternate images on hover
     _ffref = React.createRef<CollectionFreeFormView>();
 
     constructor(props: FieldViewProps) {
@@ -177,7 +176,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     fetchImages = async () => {
         try {
-            const { data } = await axios.get(`${API_URL}?query=${this.searchInput}&page=1&per_page=${1}&client_id=${process.env.VITE_API_KEY}`);
+            const { data } = await axios.get(`${API_URL}?query=${this._searchInput}&page=1&per_page=${1}&client_id=${process.env.VITE_API_KEY}`);
             console.log('data', data);
             console.log(data.results);
             const imageSnapshot = Docs.Create.ImageDocument(data.results[0].urls.small, {
@@ -197,7 +196,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     handleSelection = async (selection: string) => {
-        this.searchInput = selection;
+        this._searchInput = selection;
         const images = await this.fetchImages();
     };
 
@@ -683,7 +682,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         })
                     }
                     style={{
-                        display: (this._props.isContentActive() !== false && DragManager.DocDragData?.canEmbed) || this.dataDoc[this.fieldKey + '_alternates'] ? 'block' : 'none',
+                        display: (this._props.isContentActive() !== false && SnappingManager.CanEmbed) || this.dataDoc[this.fieldKey + '_alternates'] ? 'block' : 'none',
                         width: 'min(10%, 25px)',
                         height: 'min(10%, 25px)',
                         background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray',
@@ -701,7 +700,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png'));
         const altpaths =
             alts
-                ?.map(doc => (doc instanceof Doc ? ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url ?? defaultUrl : defaultUrl))
+                ?.map(doc => (doc instanceof Doc ? (ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url ?? defaultUrl) : defaultUrl))
                 .filter(url => url)
                 .map(url => this.choosePath(url)) ?? []; // acc  ess the primary layout data of the alternate documents
         const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
@@ -711,7 +710,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get content() {
         TraceMobx();
 
-        const backColor = DashColor(this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) ?? Colors.WHITE);
+        const backColor = DashColor((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string) ?? Colors.WHITE);
         const backAlpha = backColor.red() === 0 && backColor.green() === 0 && backColor.blue() === 0 ? backColor.alpha() : 1;
         const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0];
         const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
@@ -788,8 +787,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 action(moveEv => {
                     MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
                     this._marqueeref.current?.onInitiateSelection([moveEv.clientX, moveEv.clientY]);
-                    this._width = moveEv.clientX;
-                    this._height = moveEv.clientY;
                     return true;
                 }),
                 returnFalse,
@@ -819,7 +816,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     savedAnnotations = () => this._savedAnnotations;
     render() {
         TraceMobx();
-        const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding);
+        const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
         const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
         return (
             <div