Allow background and bond colors to be specified in SVGFormat. Add highlight facility. Javascript to zoom and pan now works in Firefox, Opera, Chrome and IE9.

data/svgformat.script

@@ -1,8 +1,8 @@
 <script type="text/ecmascript">
   <![CDATA[
-    addEventListener('DOMMouseScroll', wheel, false);
-    onmousewheel = wheel;
     var svgEl = document.getElementById("topsvg");
+    svgEl.addEventListener('DOMMouseScroll', wheel, false);
+    svgEl.addEventListener('mousewheel', wheel, false);
     var startx=0;
     var starty=0;
     function wheel(evt){
@@ -21,11 +21,11 @@
       if (evt.preventDefault)
         evt.preventDefault(); // Don't scroll the page when zooming
     }
-    onmousedown = function(evt) {
+   svgEl.onmousedown = function(evt) {
       startx = evt.clientX;
       starty = evt.clientY;
     }
-    onmousemove=function(evt) {
+    svgEl.onmousemove=function(evt) {
       if(startx!=0 && starty!=0 
         && ((evt.clientX - startx)*(evt.clientX - startx)+(evt.clientY - starty)*(evt.clientY - starty)>100))
       {
@@ -39,12 +39,13 @@
         starty = evt.clientY;
       }
     } 
-    onmouseup=function() {
+    svgEl.onmouseup=function() {
       startx=0;
       starty=0;
     }
-    ondblclick=function() {
+    svgEl.ondblclick=function() {
       location.reload();
     }
   ]]>
 </script>
+

include/openbabel/depict/painter.h

@@ -52,6 +52,7 @@ namespace OpenBabel
         unsigned c;
         ss >> std::hex >> c;
         *this = OBColor((c/0x10000)/256.0, ((c%0x10000)/0x100/256.0), (c%0x100)/256.0);
+        return;
       }
       if (color == "black")
         *this = OBColor(0.0, 0.0, 0.0);
@@ -75,6 +76,8 @@ namespace OpenBabel
         *this = OBColor(0.0, 0.5, 0.5);
       else if (color == "olive")
         *this = OBColor(0.5, 0.5, 0.0);
+      else if (color == "none")
+        *this = OBColor(0.0, 0.0, 0.0, 0.0);
       else
         *this = OBColor(0.5, 0.5, 0.5);
     }

src/depict/svgpainter.cpp

@@ -63,7 +63,7 @@ namespace OpenBabel
     m_ofs << "font-family=\"" << m_fontFamily << "\" stroke=" << MakeRGB(m_Pencolor)
           << "stroke-width=\"" << m_PenWidth << "\"  stroke-linecap=\"round\"" << ">\n";
 
-    if(!m_withViewBox)//Background color for single molecule. Handled by outer svg when table.
+    if(!m_withViewBox && m_Fillcolor.alpha!=0.0)//Background color for single molecule. Handled by outer svg when table.
       m_ofs << "<rect x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" stroke-width=\"0\" fill="
             << MakeRGB(m_Fillcolor) << " />\n";
     m_OrigBondcolor = m_Pencolor;

src/formats/svgformat.cpp

@@ -54,7 +54,7 @@ public:
       "Multiple molecules are displayed in a grid of dimensions specified by\n"
       "the ``-xr`` and ``-xc`` options (number of rows and columns respectively\n"
       "and ``--rows``, ``--cols`` with babel).\n"
-      "When displayed in an appropriate program, e.g. Firefox, there is\n"
+      "When displayed in most modern browsers, like Firefox, there is\n"
       "javascript support for zooming (with the mouse wheel)\n"
       "and panning (by dragging with the left mouse button).\n\n"
 
@@ -75,8 +75,13 @@ public:
       "    Use this option to produce a black and white diagram\n"
       " U do not use internally-specified color\n"
       "    e.g. atom color read from cml or generated by internal code\n"
-      " b black background\n"
-      "    The default is white. The atom colors work with both.\n"
+      " b <color> background color, default white\n"
+      "    e.g ``-xb yellow`` or ``-xb #88ff00`` ``-xb none`` is transparent.\n"
+      "    Just ``-xb`` is black with white bonds.\n"
+      "    The atom symbol colors work with black and white backgrounds,\n"
+      "    but may not with other colors.\n"
+      " B <color> bond color, default black\n"
+      "    e.g ``-xB`` yellow or ``-xB #88ff00``\n"
       " C do not draw terminal C (and attached H) explicitly\n"
       "    The default is to draw all hetero atoms and terminal C explicitly,\n"
       "    together with their attched hydrogens.\n"
@@ -96,6 +101,10 @@ public:
       " rows# number of rows in table(not displayed in GUI)\n"
       " N# max number objects to be output\n"
       " l draw grid lines\n"
+      " h <condition><color> highlight mol if condition is met\n"
+      "    The condition can use descriptors and properties,\n"
+      "    See documentation on ``--filter`` option for details.\n"
+      "    Specifying the highlight color is optional.\n"
       " i add index to each atom\n"
       "    These indices are those in sd or mol files and correspond to the\n"
       "    order of atoms in a SMILES string.\n"
@@ -332,9 +341,22 @@ bool SVGFormat::WriteMolecule(OBBase* pOb, OBConversion* pConv)
   
   bool hasTable = (_nrows || _ncols);
 
-  string background = pConv->IsOption("b") ? "black" : "white";
-  string bondcolor  = pConv->IsOption("b") ? "white" : "black";
-
+  bool transparent=false;
+  string background, bondcolor;
+  const char* bg = pConv->IsOption("b");
+  background = bg ? "black" : "white";
+  bondcolor  = bg ? "white" : "black";
+  if(bg && (!strcmp(bg, "none") || bg[0]=='0'))
+  {
+    transparent = true;
+    bondcolor = "gray";
+  }
+  const char* bcol = pConv->IsOption("B");
+  if(bcol && *bcol)
+    bondcolor = bcol;
+  if(bg && *bg)
+    background = bg;
+  
   if(pConv->GetOutputIndex()==1 || fixedpx)
   {
     //For the first molecule...
@@ -367,9 +389,10 @@ bool SVGFormat::WriteMolecule(OBBase* pOb, OBConversion* pConv)
       ofs << "viewBox=\"0 0 " << vbwidth << ' ' << vbheight << "\">\n";
 
       ofs << "<title>OBDepict</title>\n";
-      // Draw the background
-      ofs << "<rect x=\"0\" y=\"0\" width=\"" << vbwidth << "\" height=\"" << vbheight
-          << "\" fill=\"" << background << "\"/>\n";
+      // Draw the background unless transparent
+      if(!transparent)
+        ofs << "<rect x=\"0\" y=\"0\" width=\"" << vbwidth << "\" height=\"" << vbheight
+            << "\" fill=\"" << background << "\"/>\n";
     }
   }
 
@@ -385,6 +408,23 @@ bool SVGFormat::WriteMolecule(OBBase* pOb, OBConversion* pConv)
     double innerX  = (indx % nc) * cellsize;
     double innerY  = (indx / nc) * cellsize;
 
+    // Change the background in this cell if the condition in the first
+    // parameter of  the -xh option is met. Use a default color if
+    // the highlight color is not specified in the second parameter.
+    const char* htxt = pConv->IsOption("h");
+    if(htxt)
+    {
+      vector<string> vec;
+      tokenize(vec, htxt);
+      string highlight(vec.size()>1 ? vec[1] : "#f4f0ff");
+      std::istringstream conditionText(vec[0]);
+      if(OBDescriptor::FilterCompare(pOb, conditionText, false))
+        //Still in outer <svg>, unfortunately
+        ofs << "<rect x=\"" << innerX << "\" y=\"" << innerY
+            << "\" width=\"" << cellsize << "\" height=\"" << cellsize
+            << "\" fill=\"" << highlight << "\"/>\n";
+    }
+
     //*** Write molecule name ***
     if(!pConv->IsOption("d"))
       ofs << "<text text-anchor=\"middle\" font-size=\"" << 0.06*cellsize << "\""
@@ -560,19 +600,23 @@ bool SVGFormat::EmbedCML(OBMol* pmol, OBConversion* pConv)
 /*
 The script below was originally (and still could be) in data/svgformat.script,
 the whole of which is embedded into the output.
-It works adequately in Firefox 3 to zoom with the mouse wheel and pan by dragging,
-but may need modification for other SVG viewers. (It works in Opera.)
+It works adequately in modern versions of Firefox, Chrome, Opera and
+Internet Explorer 9, to zoom with the mouse wheel and pan by dragging.
 
 <script type="text/ecmascript">
   <![CDATA[
-    addEventListener('DOMMouseScroll', wheel, false);
-    onmousewheel = wheel;
     var svgEl = document.getElementById("topsvg");
+    svgEl.addEventListener('DOMMouseScroll', wheel, false);
+    svgEl.addEventListener('mousewheel', wheel, false);
+    var startx=0;
+    var starty=0;
     function wheel(evt){
+      evt = evt ? evt : window.event;
+      var normal = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
       var vb = new Array(4);
       var vbtext = svgEl.getAttributeNS(null,"viewBox");
       vb = vbtext.split(" ");
-      var zoom = (evt.detail>0)? 1.41 : 0.71;
+      var zoom = (normal<0)? 1.41 : 0.71;
       //var dwidth = parseFloat(Math.max(vb[2],vb[3])) * (1-zoom);
       vb[0] = parseFloat(vb[0]) + parseFloat(vb[2])*(1-zoom) * evt.clientX/innerWidth;
       vb[1] = parseFloat(vb[1]) + parseFloat(vb[3])*(1-zoom) * evt.clientY/innerHeight;
@@ -582,14 +626,12 @@ but may need modification for other SVG viewers. (It works in Opera.)
       if (evt.preventDefault)
         evt.preventDefault(); // Don't scroll the page when zooming
     }
-    var startx=0;
-    var starty=0;
-    onmousedown = function(evt) {
+   svgEl.onmousedown = function(evt) {
       startx = evt.clientX;
       starty = evt.clientY;
     }
-    onmousemove=function(evt) {
-      if(startx!=0 && starty!=0
+    svgEl.onmousemove=function(evt) {
+      if(startx!=0 && starty!=0 
         && ((evt.clientX - startx)*(evt.clientX - startx)+(evt.clientY - starty)*(evt.clientY - starty)>100))
       {
         var vbtext = svgEl.getAttributeNS(null,"viewBox");
@@ -601,11 +643,14 @@ but may need modification for other SVG viewers. (It works in Opera.)
         startx = evt.clientX;
         starty = evt.clientY;
       }
-    }
-    onmouseup=function() {
+    } 
+    svgEl.onmouseup=function() {
       startx=0;
       starty=0;
-   }
+    }
+    svgEl.ondblclick=function() {
+      location.reload();
+    }
   ]]>
 </script>