CODEWITHSUNDEEP
cytoscape.js
mhermher
mhermher

Reputation: 137

Reset 'content' property to null for a cytoscape node

So I have found that I cannot reset the content property of a node to null if I have initialized it to any non-null value. In fact, I can't even set it to an empty string or even just whitespace.

simplest example:

cytest = cytoscape({
    container : document.getElementById('cy'), 
    elements : {
        nodes : [{data : {id : 'test', name : 'test'}}]
    }, 
    style : cytoscape.stylesheet().selector('node')
        .css({
            content : 'data(name)', 
            'text-valign' : 'center'
        })
})

So that creates a single node with a label 'test', matching its name property. Now, let's try to reset it:

cytest.$('#test').css({'content' : 'hello'})

This works fine, so the property can be changed with the .css call. Initially setting the content property to null also works:

cytest = cytoscape({
    container : document.getElementById('cy'), 
    elements : {
        nodes : [{data : {id : 'test', name : 'test'}}]
    }, 
    style : cytoscape.stylesheet().selector('node')
        .css({
            content : null, 
            'text-valign' : 'center'
        })
})

So we can set the property to null, and we can also change the property after setting it. However, we can't do both. We can't change it to null. The following does not work:

cytest.$('#test').css({'content' : null})

Funny enough, neither do these:

cytest.$('#test').css({'content' : ''})
cytest.$('#test').css({'content' : ' '})

So I am trying to find a way I can do this.

The purpose of all of this, in case it matters, is that I attempt to load an image to use as the background-image (this works fine). However, I need to remove the text content if the image exists, and leave the name if it does not. This has to happen after initializing the cytoscape object because there are possibly many icon sets that can be chosen by the user.

So looking for any hints on why it does not work or how I can accomplish what I need. Not pasting in my actual code because it is humongous and this is just one part of it.

Upvotes: 0

Views: 645

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

You've specified a mapping: label : 'data(name)'. So the label is the name field in the node's data. It then suffices to set node.data('name', '') to clear the label. Or you can use a higher-priority (i.e. later) style block in your stylesheet, e.g.

.selector('node.no-label')
  .style({ 'label': '' })

And:

node.addClass('no-label');

Or use a function:

.selector('node.no-label')
  .style({ 'label': n => n.data('isLabelShown') ? n.data('name') : '' })

If you play around with style bypasses with node.style(), then you're overriding a style property. Empty override values like null or '' will just delete the override itself -- thereby falling back on what the stylesheet specifies. This is all mentioned in the docs:

You should use this function very sparingly for setting, because it overrides the style of an element, despite the state and classes that it has. In general, it’s much better to specify a better stylesheet at initialisation that reflects your application state rather than programmatically modifying style.

Only defined visual style properties are supported.

If you would like to remove a particular overridden style property, set null or '' (the empty string) to it.

http://js.cytoscape.org/#eles.style

Upvotes: 1

Related Questions