do not overlap labels and bonds

src/plugin/depiction.ts

@@ -154,8 +154,14 @@ class Depiction {
      * @memberof Depiction
      */
     private appendTexts(): 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(this.atoms.filter(x => Object.keys(x.labels).length !== 0).map(x => x.labels).reduce((a, b) => a.concat(b)))
+            .data(data)
             .enter()
             .append('text')
             .attr('style', (x: any) => x.style)
@@ -180,13 +186,24 @@ class Depiction {
      * @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(this.atoms.filter(x => Object.keys(x.labels).length != 0))
+            .data(data)
             .enter().append('circle')
             .classed('pdb-lig-env-svg-shadow-node', true)
-            .attr('cx', (x: any) => x.position.x)
-            .attr('cy', (x: any) => x.position.y)
-            .attr('r', 15);
+            .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);
+            });
     }