Handle async get_img_src() everywhere

will-moore · Dec 5, 2024 · dca4fe0 · dca4fe0
1 parent f0f89c3
commit dca4fe0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 46 deletions.
diff --git a/src/js/views/crop_modal_view.js b/src/js/views/crop_modal_view.js
@@ -513,7 +513,6 @@ export const CropModalView = Backbone.View.extend({
                 let rotation = rect.rotation || 0;
                 if (rect.theT > -1) this.m.set('theT', rect.theT, {'silent': true});
                 if (rect.theZ > -1) this.m.set('theZ', rect.theZ, {'silent': true});
-                src = this.m.get_img_src(true);
                 if (rect.width > rect.height) {
                     div_w = size;
                     div_h = (rect.height/rect.width) * div_w;
@@ -529,8 +528,12 @@ export const CropModalView = Backbone.View.extend({
                 rect.theT = rect.theT !== undefined ? rect.theT : origT;
                 rect.theZ = rect.theZ !== undefined ? rect.theZ : origZ;
                 let css = this.m._viewport_css(left, top, img_w, img_h, size, size, rotation);
+                let random_id = "rect_" + Math.random();
+                this.m.get_img_src(true)
+                    .then(src => document.getElementById(random_id).src = src);
 
                 var json = {
+                    'id': random_id,
                     'msg': msg,
                     'src': src,
                     'rect': rect,
@@ -586,15 +589,15 @@ export const CropModalView = Backbone.View.extend({
             this.m.set('zoom', 100);
             this.m.set('width', newW);
             this.m.set('height', newH);
-            var src = this.m.get_img_src(true);
+            this.m.get_img_src(true)
+                .then(src => this.$cropImg.attr('src', src));
             var css = this.m.get_vp_full_plane_css(100, newW, newH);
 
             this.paper.setSize(newW, newH);
             $("#crop_paper").css({'height': newH, 'width': newW});
             $("#cropViewer").css({'height': newH, 'width': newW});
 
-            this.$cropImg.css(css)
-                    .attr('src', src);
+            this.$cropImg.css(css);
 
             var roiX = this.currentROI.x * scale,
                 roiY = this.currentROI.y * scale,

diff --git a/src/js/views/roi_modal_view.js b/src/js/views/roi_modal_view.js
@@ -466,48 +466,9 @@ export const RoiModalView = Backbone.View.extend({
             $("#roiModalTip").show().html(tip);
         },
 
-        // for rendering bounding-box viewports for shapes
-        getBboxJson: function(bbox, theZ, theT) {
-            var size = 50;   // longest side
-            var orig_width = this.m.get('orig_width'),
-                orig_height = this.m.get('orig_height');
-                // origT = this.m.get('theT'),
-                // origZ = this.m.get('theZ');
-            // theT = (theT !== undefined ? theT : this.m.get('theT'))
-            var div_w, div_h;
-            // get src for image by temp setting Z & T
-            if (theT !== undefined) this.m.set('theT', bbox.theT, {'silent': true});
-            if (theZ !== undefined) this.m.set('theZ', bbox.theZ, {'silent': true});
-            var src = this.m.get_img_src();
-            if (bbox.width > bbox.height) {
-                div_w = size;
-                div_h = (bbox.height/bbox.width) * div_w;
-            } else {
-                div_h = size;
-                div_w = (bbox.width/bbox.height) * div_h;
-            }
-            var zoom = div_w/bbox.width;
-            var img_w = orig_width * zoom;
-            var img_h = orig_height * zoom;
-            var top = -(zoom * bbox.y);
-            var left = -(zoom * bbox.x);
-            // bbox.theT = bbox.theT !== undefined ? bbox.theT : origT;
-            // bbox.theZ = bbox.theZ !== undefined ? bbox.theZ : origZ;
-
-            return {
-                'src': src,
-                'w': div_w,
-                'h': div_h,
-                'top': top,
-                'left': left,
-                'img_w': img_w,
-                'img_h': img_h
-            };
-        },
-
         renderImagePlane: function() {
-            var src = this.m.get_img_src();
-            this.$roiImg.attr('src', src);
+            this.m.get_img_src()
+                .then(src => this.$roiImg.attr('src', src));
 
             var orig_model = this.model.getSelected().head();
             var json = {'theZ': this.m.get('theZ'),

diff --git a/src/templates/modal_dialogs/crop_modal_roi.template.html b/src/templates/modal_dialogs/crop_modal_roi.template.html
@@ -2,7 +2,8 @@
 <tr class="roiPickMe">
     <td>
         <div class="roi_wrapper" style="position: relative; overflow: hidden; margin: 5px; height: <%= h %>px; width: <%= w %>px">
-            <img class="roi_content"
+            <img id="<%= id %>"
+                class="roi_content"
                 data-roiId="<%= roiId %>"
                 data-rotation="<%= rect.rotation %>"
                 data-x="<%= rect.x %>" data-y="<%= rect.y %>"