Commit cc50865c authored by Lukas Pravda's avatar Lukas Pravda
Browse files

correctly make depiction text fields solid

parent f3e9f24e
......@@ -88,10 +88,9 @@ class Depiction {
return new Vector2D(x, y);
}
public draw(withClarityNodes: boolean = false) {
public draw() {
this.structure.selectAll("*").remove();
if (withClarityNodes) this.appendClarityNodes();
this.appendBondVisuals();
this.appendTexts();
}
......@@ -164,12 +163,14 @@ class Depiction {
.data(data)
.enter()
.append('text')
.attr('filter', "url(#solid-background)")
.attr('style', (x: any) => x.style)
.attr('x', (x: any) => x.x)
.attr('y', (x: any) => x.y)
.attr('dominant-baseline', (x: any) => x['dominant-baseline'])
.attr('text-anchor', (x: any) => x['text-anchor'])
.each(function (x: any) {
for (var i = 0; i < x.tspans.length; i++) {
d3.select(this)
.append('tspan')
......@@ -179,34 +180,6 @@ class Depiction {
});
}
/**
* Add small white circle on the background of atoms with label
* just to make the interaction lines pretty.
*
* @memberof Depiction
*/
private appendClarityNodes(): void {
let data = this.atoms
.filter(x => x.labels.length > 0)
?.map(x => x.labels)
?.reduce((a, b) => a.concat(b));
this.structure.selectAll()
.data(data)
.enter().append('circle')
.classed('pdb-lig-env-svg-shadow-node', true)
.attr('cx', (x: any) => x.x)
.attr('cy', (x: any) => x.y)
.attr('r', (x: any) => {
let intermediate = x.style.match(/font-size:\d+\.{0,1}\d*px/g)[0];
let nmb = intermediate.match(/\d+/g)[0];
return isNaN(nmb) ? 15 : parseInt(nmb);
});
}
public getCenter(ids: string[]): Vector2D {
let coords = new Array<Vector2D>();
......
......@@ -229,7 +229,7 @@ class Visualization {
return d3.json(ligandUrl)
.catch(e => this.processError(e, `Component ${ligandId} was not found.`))
.then((d: any) => this.addDepiction(d, true))
.then((d: any) => this.addDepiction(d))
.then(() => this.centerScene());
}
......@@ -239,13 +239,11 @@ class Visualization {
*
* @param {*} depiction Content of annotation.json file generated by
* the PDBeChem process.
* @param {*} withClarityNodes Control if shadow nodes should be drawn
* in the background of nodes with labels
* @memberof Visualization
*/
public addDepiction(depiction: any, withClarityNodes: boolean) {
public addDepiction(depiction: any) {
this.depiction = new Depiction(this.depictionRoot, depiction);
this.depiction.draw(withClarityNodes);
this.depiction.draw();
}
......@@ -871,10 +869,21 @@ class Visualization {
// // ["arrow-vdw", "#9B7653"],
// // ["arrow-metal", "#008080"],
// // ["arrow-aromatic", "#AD4379"],
// ]);
let defs = this.svg.append('defs')
// proper background for depiction tspans
// gracefully coppied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
let filter = defs.append('filter')
.attr('x', 0)
.attr('y', 0)
.attr('width', 1)
.attr('height', 1)
.attr('id', 'solid-background')
filter.append('feFlood').attr('flood-color', 'white')
filter.append('feComposite').attr('in', 'SourceGraphic')
this.svg
.append('defs')
defs
.append('marker')
.attr('id', 'clash')
.attr("markerWidth", 15)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment