Fixed bugs in ImageViewer load and annotations (#7485)

Author: david-yz-liu

Changelog.md

@@ -26,6 +26,8 @@
 - Fix tag creation failing in tags table (#7426)
 - Ensure tag names are unique within an assignment (#7430)
 - Update flash style to "notice" for "setting up test env" message (#7445)
+- Fixed bug in `ImageViewer` where image width was set to 0 on initial load (#7485)
+- Fixed bug in `ImageViewer` where annotations did not disappear when moving the mouse out of the image (#7485)
 
 ### 🔧 Internal changes
 

app/assets/javascripts/Annotations/image_annotation_manager.js

@@ -77,6 +77,7 @@ class ImageAnnotationManager extends AnnotationManager {
         } else {
           holder.style.cursor = "auto";
         }
+        holder.onmouseleave = this.check_for_annotations.bind(this);
 
         this.image_preview.parentNode.insertBefore(holder, this.image_preview);
       }
@@ -201,6 +202,7 @@ class ImageAnnotationManager extends AnnotationManager {
       holder.onmousemove = this.check_for_annotations.bind(this);
       holder.onmousedown = this.start_select_box.bind(this);
       holder.onmouseup = null;
+      holder.onmouseleave = this.check_for_annotations.bind(this);
     }
   }
 

app/javascript/Components/Result/image_viewer.jsx

@@ -26,13 +26,7 @@ export class ImageViewer extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.setImageURL().then(() => {
-      document.getElementById("image_preview").onload = () => {
-        this.display_annotations();
-        this.adjustPictureSize();
-        this.rotateImage();
-      };
-    });
+    this.setImageURL();
   }
 
   componentWillUnmount() {
@@ -231,7 +225,11 @@ export class ImageViewer extends React.PureComponent {
             src={this.state.url}
             data-zoom={this.state.zoom}
             className={this.props.released_to_students ? "" : "enable-annotations"}
-            onLoad={this.display_annotations}
+            onLoad={() => {
+              this.display_annotations();
+              this.adjustPictureSize();
+              this.rotateImage();
+            }}
             alt={I18n.t("results.cant_display_image")}
           />
         </div>