Label on rois

.gitignore

@@ -1,6 +1,8 @@
 *.pyc
 .DS_Store
 .omero
+.idea
+.vscode
 demo/omero_figure/
 demo/figure.js
 demo/index.html

omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py

@@ -278,13 +278,14 @@ def draw_point(self, shape):
 class ShapeToPdfExport(ShapeExport):
     point_radius = 5
 
-    def __init__(self, canvas, panel, page, crop, page_height):
+    def __init__(self, canvas, panel, page, crop, page_height, page_width):
 
         self.canvas = canvas
         self.page = page
         # The crop region on the original image coordinates...
         self.crop = crop
         self.page_height = page_height
+        self.page_width = page_width
         # Get a mapping from original coordinates to the actual size of panel
         self.scale = float(panel['width']) / crop['width']
 
@@ -304,9 +305,9 @@ def panel_to_page_coords(self, shape_x, shape_y):
         h_flip = self.panel.get('horizontal_flip', False)
         v_flip = self.panel.get('vertical_flip', False)
         if h_flip:
-            shape_x = self.crop['width'] - shape_x + 2*self.crop['x']
+            shape_x = self.crop['width'] - shape_x + 2 * self.crop['x']
         if v_flip:
-            shape_y = self.crop['height'] - shape_y + 2*self.crop['y']
+            shape_y = self.crop['height'] - shape_y + 2 * self.crop['y']
 
         rotation = self.panel['rotation']
         if v_flip != h_flip:
@@ -370,6 +371,48 @@ def draw_shape_label(self, shape, bounds):
         para.drawOn(
             self.canvas, center[0] - w / 2, center[1] - h / 2 + size / 4)
 
+    def draw_text(self, shape):
+        text_coords = self.panel_to_page_coords(shape['x'], shape['y'])
+        text = ""
+
+        if markdown_imported:
+            # convert markdown to html
+            text = markdown.markdown(shape.get('text'))
+
+        size = shape.get('fontSize', 12)
+        stroke_width = shape.get('strokeWidth', 2)
+        r, g, b, a = self.get_rgba(shape['strokeColor'])
+        # bump up alpha a bit to make text more readable
+        rgba = (r, g, b, 0.5 + a / 2.0)
+
+        x = text_coords["x"]
+        y = self.page_height - text_coords["y"]
+        anchor = shape['textAnchor']
+        aligment = TA_LEFT
+
+        if (anchor == 'middle'):
+            aligment = TA_CENTER
+            x = x - (self.page_width / 2)
+        elif (anchor == "end"):
+            aligment = TA_RIGHT
+            x = x - self.page_width
+
+        style = ParagraphStyle(
+            'label',
+            parent=getSampleStyleSheet()['Normal'],
+            alignment=aligment,
+            textColor=Color(*rgba),
+            fontSize=size,
+            leading=size,
+        )
+        para = Paragraph(text, style)
+
+        w, h = para.wrap(self.page_width, 100)
+        para.drawOn(
+            self.canvas,
+            x + int(stroke_width * 0.25),
+            y - h / 2 - int(size * 0.25) - int(stroke_width * 0.25))
+
     def draw_line(self, shape):
         start = self.panel_to_page_coords(shape['x1'], shape['y1'])
         end = self.panel_to_page_coords(shape['x2'], shape['y2'])
@@ -599,9 +642,9 @@ def get_panel_coords(self, shape_x, shape_y):
 
         # Apply flip transformations to the shape coordinates
         if h_flip:
-            shape_x = self.crop['width'] - shape_x + 2*self.crop['x']
+            shape_x = self.crop['width'] - shape_x + 2 * self.crop['x']
         if v_flip:
-            shape_y = self.crop['height'] - shape_y + 2*self.crop['y']
+            shape_y = self.crop['height'] - shape_y + 2 * self.crop['y']
 
         rotation = self.panel['rotation']
         if v_flip != h_flip:
@@ -733,7 +776,7 @@ def draw_rectangle(self, shape):
         # with correct stroke width
         r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
         if 'fillOpacity' in shape:
-            a = int(float(shape['fillOpacity'])*255)
+            a = int(float(shape['fillOpacity']) * 255)
         rgba = (r, g, b, a)
 
         # need to draw on separate image and then paste on to get transparency
@@ -792,7 +835,7 @@ def draw_polygon(self, shape, closed=True):
         # with correct stroke width
         r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
         if 'fillOpacity' in shape:
-            a = int(float(shape['fillOpacity'])*255)
+            a = int(float(shape['fillOpacity']) * 255)
         rgba = (r, g, b, a)
 
         # need to draw on separate image and then paste on to get transparency
@@ -878,7 +921,7 @@ def draw_ellipse(self, shape):
 
         r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
         if 'fillOpacity' in shape:
-            a = int(float(shape['fillOpacity'])*255)
+            a = int(float(shape['fillOpacity']) * 255)
         rgba = (r, g, b, a)
 
         # when rx is ~zero (for a Point, scaled down) don't need inner ellipse
@@ -1281,7 +1324,7 @@ def add_rois(self, panel, page):
 
         crop = self.get_crop_region(panel)
         ShapeToPdfExport(self.figure_canvas, panel, page, crop,
-                         self.page_height)
+                         self.page_height, self.page_width)
 
     def draw_labels(self, panel, page):
         """

src/css/figure.css

@@ -928,6 +928,10 @@
         padding-left: 3px;
         padding-right: 3px;
     }
+    .text-group{
+        padding-left: 0px;
+        padding-right: 0px;
+    }
     .navbar-nav > li > a {
         padding-bottom: 12px;
         padding-top: 12px;

src/index.html

@@ -209,21 +209,6 @@ <h5 class="modal-title" style="float: left; padding-right: 20px">
                 </div>
               </div>
               <div id="roiModalSidebar" class="col-4" style="padding: 0">
-                <span
-                  id="roiPageControls"
-                  style="color: #999; line-height: 30px"
-                >
-                </span>
-                <div style="clear: both"></div>
-                <div style="padding: 0; height: 550px; overflow-y: auto; position: relative;">
-                  <div id="roiModalRoiList">
-                    <table
-                      style="width: 100%"
-                      class="table table-hover table-condensed"
-                    ></table>
-                  </div>
-                  <p id="roiModalTip" style="position: absolute; top: 0"></p>
-                </div>
               </div>
             </div>
             <div class="modal-footer" style="margin-top: 0">

src/js/models/panel_model.js

@@ -40,7 +40,7 @@
 
         initialize: function() {
             // listen for changes to the viewport...
-            this.on("change:zoom change:dx change:dy change:width change:height change:rotation", (panel) => {
+            this.on("change:zoom change:dx change:dy change:width change:height change:rotation change:labels", (panel) => {
                 // if this panel has 'insetRoiId' it is an "inset" panel so we need to
                 // notify other panels that contain the corresponding ROI (rectangle)
                 if (this.get('insetRoiId') && this.figureModel) {
@@ -81,8 +81,24 @@
 
             // find Rectangle from panel that corresponds to this panel
             let rect = (panel.get("shapes") || []).find(shape => shape.id == insetRoiId);
+
             if (rect) {
                 this.cropToRoi(rect);
+                let text = panel.get("shapes").find(shape => shape.id == rect.textId);
+                if(text){
+                    let insetLabel = (this.get("labels") || []).find(lbl => lbl.inset == true);
+                    if(insetLabel){
+                        var lbl_key = this.get_label_key(insetLabel)
+                        var new_txt = "**"+text.text+"**"
+                        if(insetLabel.text !== new_txt){
+                            insetLabel.text = new_txt
+                            var newlbls = {};
+                            newlbls[lbl_key] = insetLabel;
+                            this.edit_labels(newlbls)
+                            this.trigger("change:labels")
+                        }
+                    }
+                }
             }
 
             this.silenceTriggers = false;
@@ -92,6 +108,8 @@
             // An inset panel has zoomed/panned or deleted. If we have corresponding inset
             // Rectangle then update or delete it accordingly...
             var insetRoiId = panel.get('insetRoiId');
+            var inset_lbl = panel.get('labels').filter(lbl => lbl.inset == true);
+
             if (!insetRoiId) return;
             // find Rectangles that have insetRoiId...
             let insetShapes = this.get('shapes');
@@ -105,24 +123,51 @@
                         // Delete the inset Rectangle IF there are NO other remaining insets
                         let insets = figureModel.panels.filter(p => p.get('insetRoiId') == insetRoiId);
                         if (insets.length == 0) {
-                            updated = updated.filter(shape => shape.id != insetRoiId);
+                            let rect = updated.filter(shape => shape.id == insetRoiId);
+                            updated = updated.filter(shape => (shape.id != insetRoiId && shape.id != rect[0].textId));
+                            this.save('lastInsetTextIndex', this.get('lastInsetTextIndex') - 1)
                         }
                         this.save('shapes', updated);
                     } else {
                         let rect = panel.getViewportAsRect();
+                        let textId = -1;
                         updated = updated.map(shape => {
                             if (shape.type == 'Rectangle' && shape.id == insetRoiId) {
+                                textId = shape.textId
                                 return {...shape, ...rect}
                             }
                             return shape;
                         });
+                        updated = updated.map(shape => {
+                            if (shape.type == 'Text' && shape.id == textId) {
+                                var prev = shape.parentShapeCoords
+                                shape.parentShapeCoords = {...rect}
+                                shape.x = shape.x + rect.x - prev.x
+                                shape.y = shape.y + rect.y - prev.y
+                                if(inset_lbl && inset_lbl[0]){
+                                    if(inset_lbl[0].text !== shape.text){
+                                        shape.text = inset_lbl[0].text.replaceAll("*","")
+                                    }
+                                }
+                            }
+                            return shape;
+                        });
                         this.save('shapes', updated);
+                        this.trigger("change:shapes")
                     }
                     this.silenceTriggers = false;
                 }
             }
         },
 
+        getLastInsetTextIndex: function(){
+            return this.get('lastInsetTextIndex')
+        },
+
+        setLastInsetTextIndex: function(index){
+            this.save('lastInsetTextIndex', index)
+        },
+
         // When we're creating a Panel, we process the data a little here:
         parse: function(data, options) {
             var greyscale = data.rdefs.model === "greyscale";
@@ -303,6 +348,8 @@
                 points = shape.points.split(' ').map(function(p){
                     return p.split(",");
                 });
+            } else if (shape.type === "Text"){
+                points = [[shape.x, shape.y]];
             }
             if (points) {
                 for (var p=0; p<points.length; p++) {
@@ -602,7 +649,11 @@
                 if (labels_map.hasOwnProperty(lbl_key)) {
                     if (labels_map[lbl_key]) {
                         // replace with the new label
-                        lbl = $.extend(true, {}, labels_map[lbl_key]);
+                        var new_lbl =  labels_map[lbl_key]
+                        if(lbl.inset){
+                            new_lbl.inset = true
+                        }
+                        lbl = $.extend(true, {}, new_lbl);
                         labs.push( lbl );
                     }
                     // else 'false' are ignored (deleted)

src/js/shapeEditorTest.js

@@ -10,10 +10,10 @@
 // 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following
 // disclaimer in the documentation // and/or other materials provided with the distribution.
 //
-// 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived 
+// 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived
 // from this software without specific prior written permission.
 
-// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, 
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING,
 // BUT NOT LIMITED TO,
 // THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
 // THE COPYRIGHT HOLDER OR CONTRIBUTORS
@@ -78,6 +78,21 @@ $(function() {
         shapeManager.setFillOpacity(fillOpacity);
     });
 
+    $("select[name='fontSize']").change(function(){
+        var fontSize = $(this).val();
+        shapeManager.setTextFontSize(fontSize);
+    });
+
+    $("select[name='textPosition']").change(function(){
+        var textPosition = $(this).val();
+        shapeManager.setTextPosition(textPosition);
+    });
+
+    $("select[name='rotateText']").change(function(){
+        var rotateText = $(this).val();
+        shapeManager.setTextRotated(rotateText);
+    });
+
     var updateZoom = function updateZoom() {
         $("#zoomDisplay").text(zoomPercent + " %");
         shapeManager.setZoom(zoomPercent);
@@ -111,6 +126,14 @@ $(function() {
         shapesClipboard = shapeManager.getSelectedShapesJson();
     });
 
+    $("button[name='setText']").click(function(){
+        shapeManager.setText("A");
+    });
+
+    $("button[name='clearText']").click(function(){
+        shapeManager.setText("");
+    });
+
     $("button[name='pasteShapes']").click(function(){
         // paste shapes, constraining to the image coords
         var p = shapeManager.pasteShapesJson(shapesClipboard, true);
@@ -200,7 +223,7 @@ $(function() {
                                "strokeWidth": 4});
 
     shapeManager.addShapeJson({"id": 1234,
-                               "rotation": 45,
+                               "rotation": 25,
                                "type": "Rectangle",
                                "strokeColor": "#ff00ff",
                                "strokeWidth": 6,