Merge pull request #577 from Rdornier/fill-rois

Fill rois

omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py

@@ -430,6 +430,8 @@ def draw_polygon(self, shape, closed=True):
 
         if 'fillColor' in shape:
             r, g, b, a = self.get_rgba(shape['fillColor'])
+            if 'fillOpacity' in shape:
+                a = float(shape['fillOpacity'])
             self.canvas.setFillColorRGB(r, g, b, alpha=a)
             fill = 1 if closed else 0
         else:
@@ -471,6 +473,8 @@ def draw_ellipse(self, shape):
 
         if 'fillColor' in shape:
             r, g, b, a = self.get_rgba(shape['fillColor'])
+            if 'fillOpacity' in shape:
+                a = float(shape['fillOpacity'])
             self.canvas.setFillColorRGB(r, g, b, alpha=a)
             fill = 1
         else:
@@ -646,7 +650,10 @@ def draw_rectangle(self, shape):
 
         # if fill, draw filled polygon without outline, then add line later
         # with correct stroke width
-        rgba = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+        r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+        if 'fillOpacity' in shape:
+            a = int(float(shape['fillOpacity'])*255)
+        rgba = (r, g, b, a)
 
         # need to draw on separate image and then paste on to get transparency
         bounds = Bounds(*points).round()
@@ -702,7 +709,10 @@ def draw_polygon(self, shape, closed=True):
 
         # if fill, draw filled polygon without outline, then add line later
         # with correct stroke width
-        rgba = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+        r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+        if 'fillOpacity' in shape:
+            a = int(float(shape['fillOpacity'])*255)
+        rgba = (r, g, b, a)
 
         # need to draw on separate image and then paste on to get transparency
         bounds = Bounds(*points).round()
@@ -771,7 +781,12 @@ def draw_ellipse(self, shape):
         # Draw outer ellipse, then remove inner ellipse with full opacity
         rgba = ShapeToPdfExport.get_rgba_int(shape['strokeColor'])
         ellipse_draw.ellipse((0, 0, width, height), fill=rgba)
-        rgba = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+
+        r, g, b, a = self.get_rgba_int(shape.get('fillColor', '#00000000'))
+        if 'fillOpacity' in shape:
+            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
         if (width - w) >= w:
             ellipse_draw.ellipse((w, w, width - w, height - w), fill=rgba)

src/css/figure.css

@@ -1008,6 +1008,7 @@
 
     .colorpicker span,
     .inset-color span:first-child,
+    .fill-color span:first-child,
     .label-color span:first-child,
     .shape-color span:first-child {
         border: solid 1px #bbb;
@@ -1238,7 +1239,8 @@
 
     .roi_toolbar {
         overflow: visible;
-        padding-bottom: 10px;
+        margin: 15px;
+        margin-bottom: 5px;
     }
 
     .roi_toolbar .pressed {

src/index.html

@@ -175,14 +175,14 @@ <h5 class="modal-title" style="float: left; padding-right: 20px">
             </p>
           </div>
           <form class="roiModalForm" role="form">
+            <div
+            id="roi_toolbar"
+            class="roi_toolbar btn-toolbar"
+            role="toolbar"
+            aria-label="..."
+          ></div>
             <div class="modal-body row">
               <div class="col-8">
-                <div
-                  id="roi_toolbar"
-                  class="roi_toolbar btn-toolbar"
-                  role="toolbar"
-                  aria-label="..."
-                ></div>
                 <div id="roiViewer" class="roiViewer">
                   <!-- Show / add ROIs on image -->
                   <!-- <div id="roi_image" style="position: absolute"> -->
@@ -213,7 +213,7 @@ <h5 class="modal-title" style="float: left; padding-right: 20px">
                   style="color: #999; line-height: 30px"
                 >
                 </span>
-                <div style="clear: both; padding: 5px"></div>
+                <div style="clear: both"></div>
                 <div style="padding: 0; height: 550px; overflow-y: auto; position: relative;">
                   <div id="roiModalRoiList">
                     <table

src/js/models/roi_model.js

@@ -14,6 +14,14 @@ var ShapeModel = Backbone.Model.extend({
             intAsHex = ("00000000" + intAsHex).slice(-8);
             return '#' + intAsHex.substring(0,6);
         }
+
+        var rgbint_to_opacity = function(signed_integer) {
+            if (signed_integer < 0) signed_integer = signed_integer >>> 0;
+            var intAsHex = signed_integer.toString(16);
+            intAsHex = ("00000000" + intAsHex).slice(-2);
+             return parseInt(intAsHex, 16) / 255;
+        }
+
         shape.id = shape['@id'];
         shape.type = shape['@type'].split('#')[1];
         delete shape['@id']
@@ -27,6 +35,9 @@ var ShapeModel = Backbone.Model.extend({
         _.each(["StrokeColor", "FillColor", ], function(attr) {
             if (shape[attr] !== undefined) {
                 shape[lowerFirst(attr)] = rgbint_to_css(shape[attr]);
+                // strokeColor -> strokeOpacity, fillColor -> fillOpacity
+                let opacityAttr = lowerFirst(attr).replace("Color", "Opacity")
+                shape[opacityAttr] = rgbint_to_opacity(shape[attr]);
                 delete shape[attr];
             }
         });

src/js/shape_editor/ellipse.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
@@ -66,6 +66,16 @@ var Ellipse = function Ellipse(options) {
   }
 
   this._strokeColor = options.strokeColor;
+  if(options.fillColor){
+    this._fillColor = options.fillColor;
+  }else{
+      this._fillColor = "#ffffff";
+  }
+  if(options.fillOpacity){
+      this._fillOpacity = options.fillOpacity;
+  }else{
+      this._fillOpacity = 0;
+  }
   this._strokeWidth = options.strokeWidth || 2;
   this._selected = false;
   this._zoomFraction = 1;
@@ -80,7 +90,7 @@ var Ellipse = function Ellipse(options) {
   this.handle_wh = 6;
 
   this.element = this.paper.ellipse();
-  this.element.attr({ "fill-opacity": 0.01, fill: "#fff", cursor: "pointer" });
+  this.element.attr({ "fill-opacity": this._fillOpacity, fill: this._fillColor, cursor: "pointer" });
 
   // Drag handling of ellipse
   if (this.manager.canEdit) {
@@ -138,6 +148,8 @@ Ellipse.prototype.toJson = function toJson() {
     rotation: this._rotation,
     strokeWidth: this._strokeWidth,
     strokeColor: this._strokeColor,
+    fillColor: this._fillColor,
+    fillOpacity: this._fillOpacity
   };
   if (this._id) {
     rv.id = this._id;
@@ -204,6 +216,24 @@ Ellipse.prototype.getStrokeWidth = function getStrokeWidth() {
   return this._strokeWidth;
 };
 
+Ellipse.prototype.setFillColor = function setFillColor(fillColor) {
+  this._fillColor = fillColor;
+  this.drawShape();
+};
+
+Ellipse.prototype.getFillColor = function getFillColor() {
+  return this._fillColor;
+};
+
+Ellipse.prototype.setFillOpacity = function setFillOpacity(fillOpacity) {
+  this._fillOpacity = fillOpacity;
+  this.drawShape();
+};
+
+Ellipse.prototype.getFillOpacity = function getFillOpacity() {
+  return this._fillOpacity;
+};
+
 Ellipse.prototype.destroy = function destroy() {
   this.element.remove();
   this.handles.remove();
@@ -353,7 +383,9 @@ Ellipse.prototype.updateShapeFromHandles = function updateShapeFromHandles(
 
 Ellipse.prototype.drawShape = function drawShape() {
   var strokeColor = this._strokeColor,
-    strokeW = this._strokeWidth;
+    strokeW = this._strokeWidth,
+    fillColor = this._fillColor,
+    fillOpacity = this._fillOpacity;
 
   var f = this._zoomFraction,
     x = this._x * f,
@@ -368,6 +400,8 @@ Ellipse.prototype.drawShape = function drawShape() {
     ry: radiusY,
     stroke: strokeColor,
     "stroke-width": strokeW,
+    fill: fillColor,
+    'fill-opacity': fillOpacity
   });
   this.element.transform("r" + this._rotation);
 
@@ -520,6 +554,8 @@ var CreateEllipse = function CreateEllipse(options) {
 CreateEllipse.prototype.startDrag = function startDrag(startX, startY) {
   var strokeColor = this.manager.getStrokeColor(),
     strokeWidth = this.manager.getStrokeWidth(),
+    fillColor = this.manager.getFillColor(),
+    fillOpacity = this.manager.getFillOpacity(),
     zoom = this.manager.getZoom();
 
   this.ellipse = new Ellipse({
@@ -534,6 +570,8 @@ CreateEllipse.prototype.startDrag = function startDrag(startX, startY) {
     strokeWidth: strokeWidth,
     zoom: zoom,
     strokeColor: strokeColor,
+    fillColor: fillColor,
+    fillOpacity: fillOpacity
   });
 };
 

src/js/shape_editor/line.js

@@ -189,6 +189,22 @@ Line.prototype.getStrokeWidth = function getStrokeWidth() {
   return this._strokeWidth;
 };
 
+Line.prototype.getFillColor = function getFillColor() {
+  return this._strokeColor;
+};
+
+Line.prototype.setFillColor = function setFillColor(fillColor) {
+  return;
+};
+
+Line.prototype.setFillOpacity = function setFillOpacity(fillOpacity) {
+  return;
+};
+
+Line.prototype.getFillOpacity = function getFillOpacity() {
+  return 1;
+};
+
 Line.prototype.destroy = function destroy() {
   this.element.remove();
   this.handles.remove();

src/js/shape_editor/point.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
@@ -49,6 +49,18 @@ var Point = function Point(options) {
   }
 
   this._strokeColor = options.strokeColor;
+
+  if(options.fillColor){
+    this._fillColor = options.fillColor;
+  }else{
+      this._fillColor = "#ffffff";
+  }
+  if(options.fillOpacity){
+      this._fillOpacity = options.fillOpacity;
+  }else{
+      this._fillOpacity = 0;
+  }
+
   this._strokeWidth = options.strokeWidth || 2;
   this._selected = false;
   this._zoomFraction = 1;
@@ -63,7 +75,7 @@ var Point = function Point(options) {
   this.handle_wh = 6;
 
   this.element = this.paper.ellipse();
-  this.element.attr({ "fill-opacity": 0.01, fill: "#fff", cursor: "pointer" });
+  this.element.attr({ "fill-opacity": this._fillOpacity, fill: this._fillColor, cursor: "pointer" });
 
   // Drag handling of point
   if (this.manager.canEdit) {
@@ -117,6 +129,8 @@ Point.prototype.toJson = function toJson() {
     y: this._y,
     strokeWidth: this._strokeWidth,
     strokeColor: this._strokeColor,
+    fillColor: this._fillColor,
+    fillOpacity: this._fillOpacity
   };
   if (this._id) {
     rv.id = this._id;
@@ -183,6 +197,25 @@ Point.prototype.getStrokeWidth = function getStrokeWidth() {
   return this._strokeWidth;
 };
 
+Point.prototype.getFillColor = function getFillColor() {
+  return this._fillColor;
+};
+
+
+Point.prototype.setFillColor = function setFillColor(fillColor) {
+  this._fillColor = fillColor;
+  this.drawShape();
+};
+
+Point.prototype.setFillOpacity = function setFillOpacity(fillOpacity) {
+  this._fillOpacity = fillOpacity;
+  this.drawShape();
+};
+
+Point.prototype.getFillOpacity = function getFillOpacity() {
+  return this._fillOpacity;
+};
+
 Point.prototype.destroy = function destroy() {
   this.element.remove();
   this.handles.remove();
@@ -327,7 +360,9 @@ Point.prototype.updateShapeFromHandles = function updateShapeFromHandles(
 
 Point.prototype.drawShape = function drawShape() {
   var strokeColor = this._strokeColor,
-    strokeW = this._strokeWidth;
+    strokeW = this._strokeWidth,
+    fillColor = this._fillColor,
+    fillOpacity = this._fillOpacity;
 
   var f = this._zoomFraction,
     x = this._x * f,
@@ -342,6 +377,8 @@ Point.prototype.drawShape = function drawShape() {
     ry: radiusY,
     stroke: strokeColor,
     "stroke-width": strokeW,
+    fill: fillColor,
+    'fill-opacity': fillOpacity
   });
   this.element.transform("r" + this._rotation);
 
@@ -440,6 +477,8 @@ var CreatePoint = function CreatePoint(options) {
 CreatePoint.prototype.startDrag = function startDrag(startX, startY) {
   var strokeColor = this.manager.getStrokeColor(),
     strokeWidth = this.manager.getStrokeWidth(),
+    fillColor = this.manager.getFillColor(),
+    fillOpacity = this.manager.getFillOpacity(),
     zoom = this.manager.getZoom();
 
   this.point = new Point({
@@ -454,6 +493,8 @@ CreatePoint.prototype.startDrag = function startDrag(startX, startY) {
     strokeWidth: strokeWidth,
     zoom: zoom,
     strokeColor: strokeColor,
+    fillColor: fillColor,
+    fillOpacity: fillOpacity
   });
 };