C visible, transparent atom labels

[SimonEnsemble]

• allow option for C atoms to be visible by DRAW_SETTINGS
• allow option for transparent backgrounds of the atom index's
• add function to write svg string to file (if this was already there sorry for missing, I can delete)
  let me know if you have any requested changes, happy to make them.

one thing I couldn't figure out: the atom indices are not centered with the circles behind them. there is an offset. how can I fix this?
https://github.com/mojaie/MolecularGraph.jl/blob/master/src/draw/svg.jl#L334-L335 some change here?

here is my test for this:

push!(LOAD_PATH, "src/")
  
import Pkg
Pkg.activate(".")
Pkg.instantiate()
using MolecularGraph
DRAW_SETTING[:C_visible] = true

s = "CC(C)(C)N(NC(=O)C1=CC=C(Cl)C=C1)C(=O)C1=CC=CC=C1"
mol = smilestomol(s)

function viz_molecule(mol)
    canvas = SvgCanvas()
    draw2d!(canvas, mol)
    drawatomindex!(canvas, mol,
        bgcolor=MolecularGraph.Color(255, 200, 100))#, opacity=0.5)
    svg_string = tosvg(canvas, 300, 300)
    return svg_string
end
svg_string = viz_molecule(mol)
savesvg(svg_string, "a.svg")
run(`xdg-open a.svg`)

[codecov-commenter]

Codecov Report

Merging #70 (12679ba) into master (00c880e) will decrease coverage by 0.08%.
The diff coverage is 10.00%.

@@            Coverage Diff             @@
##           master      #70      +/-   ##
==========================================
- Coverage   76.14%   76.05%   -0.09%     
==========================================
  Files          56       56              
  Lines        4963     4970       +7     
==========================================
+ Hits         3779     3780       +1     
- Misses       1184     1190       +6     

Impacted Files	Coverage Δ
src/draw/svg.jl	73.43% <0.00%> (-2.07%)	⬇️
src/draw/draw2d.jl	75.32% <50.00%> (ø)
src/draw/draw3d.jl	97.82% <0.00%> (+2.17%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 00c880e...12679ba. Read the comment docs.

[mojaie]

Thank you very much. That looks great!
I'm not sure about the way to fit the anchor and the size of text and rect in SVG.
This positioning system may depend on the font size and the number of characters and seems to be complicated...
I'd be happy if you post it as a new issue.

[mojaie]

Or, bxy = svgcoords(pos - (size / 2, size / 2)) may work like setatomhighlight! below.

MolecularGraph.jl/src/draw/svg.jl

Line 345 in 12679ba

xy = svgcoords(pos - (size / 2, size / 2))

The anchor seems to be OK. The centering should be,

1. detect text width in px (it depends on SVG viewer setting, so we may need some JavaScript code to detect that.)
2. adjust x value of text tag ((rect size - text width) / 2).

[mojaie]

transform="translate(xpos, ypos)" in g tag and text-anchor="middle" in text would be better.

From

<g>
 <rect x="186.73" y="152.98" width="10" height="10" rx="5.0" ry="5.0" fill="rgb(240, 240, 255)"></rect>
 <text x="186.73" y="162.98" font-size="10" fill="rgb(0, 0, 0)">5</text>
</g>

To

<g width="10" height="10" transform="translate(186.73, 152.98)">
 <rect width="10" height="10" rx="5.0" ry="5.0" fill="rgb(240, 240, 255)"></rect>
 <text x="5" y="10" font-size="10" fill="rgb(0, 0, 0)" text-anchor="middle">5</text>
</g>

text.x value is a half of g.width

g.width is still environment dependent. (font-size / 2 * word count) would be a good guess.

[SimonEnsemble]

based on here, felt like this would work, but it doesn't. :(

    elem = """<g transform="translate($(pos.x), $(pos.y))">
     <rect x="0" y="0" width="$(size)" height="$(size)" rx="$(size/2)" ry="$(size/2)" fill="$(bc)" opacity="$(opacity)" />
     <text x="$(size/2)" y="$(size/2)" font-size="$(size)" fill="$(c)" text-anchor="middle" alignment-baseline="middle">$(text) </text>
    </g>
    """

[mojaie]

The attribute name would be fill-opacity
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
and text.y may be y="$(size)".