Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
pdbe
web-components
pdb-ligand-env
Commits
cc50865c
Commit
cc50865c
authored
Sep 21, 2020
by
Lukas Pravda
Browse files
correctly make depiction text fields solid
parent
f3e9f24e
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
20 additions
and
38 deletions
+20
-38
src/plugin/depiction.ts
src/plugin/depiction.ts
+3
-30
src/plugin/manager.ts
src/plugin/manager.ts
+17
-8
No files found.
src/plugin/depiction.ts
View file @
cc50865c
...
...
@@ -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
>
();
...
...
src/plugin/manager.ts
View file @
cc50865c
...
...
@@ -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
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment