CODEWITHSUNDEEP
javascriptcsscytoscape.js
Brian Blackman
Brian Blackman

Reputation: 73

Cytoscape.js Compound Child Node addClass Not Displaying Style

Cytoscape 3.5.0 - Upgraded to Cytoscape 3.11.0 - No Change

Compound Child Node Style Not Displaying on addClass, but Parent Node does

I am successfully adding an additional Class to selected Node Element during onClick Event:

 cy.on('click', 'node', (evt) => (...

However, I only see the Style change on the Parent when clicked, but not the Child. When I click on the Child Node, I find that it has added the Class in the console.log output, just the same as it did for the Parent Node, but I don't see the expected Style change in the diagram for the Child like I did for the Parent.

I have experimented considerably and read through the documentation and examples with no success, but it is perplexing that the Parent Style would change with addClass, but the Child Style does not.

I'm at a loss. Thank you for any help on this one.

Console Log:

(2) ["controller", "selectedNode"]
0: "controller"
1: "selectedNode"
length: 2
proto: Array(0)

Onclick Event:

cy.on('click', 'node',  (evt) => {
    cy.elements().removeClass('selectedNode');
    let selectedNode = cy.$('#'+evt.target.id());
    selectedNode.addClass('selectedNode');
    console.log(selectedNode.classes());
});

Selector Classes:

{
   selector: '.controller',
   style: {
       'background-color': 'lightgrey',
       'color': '#737373',
       'font-weight': 'bold',
       'background-opacity': 0.115,
       'content': 'data(label)',
       'text-valign': 'bottom',
       'text-wrap': 'wrap',
       'shape': 'roundrectangle',
       'border-width': .001,
       'border-color': 'lightgrey',
       'font-size': 24,
       'height': 46,
       'width': 85,
       'background-image': '/networkdiagram/controller.svg',
       'background-fit': 'cover cover',
    }
},
{
    selector: '.selectedNode',
    style: {
        'border-width': 8,
        'border-color': '#5da963',
    }
}

Upvotes: 3

Views: 1481

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

There doesn't seem to be too much wrong here, you can access the target node a bit easier with evt.target (directly without any query) and I tend to use unbind (just to make sure I don't call the event handler multiple times):

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),
  style: [{
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        height: "60px",
        width: "60px"
      }
    },
    {
      selector: "edge",
      css: {
        label: "\u2B24",
        "curve-style": "bezier",
        "target-arrow-shape": "data(arrow)"
      }
    },
    {
      selector: ".selectedNode",
      style: {
        "border-width": 8,
        "border-color": "#5da963"
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "n0",
          parent: "n4"
        }
      },
      {
        data: {
          id: "n1",
          parent: "n5"
        }
      },
      {
        data: {
          id: "n2",
          parent: "n5"
        }
      },
      {
        data: {
          id: "n3",
          parent: "n5"
        }
      },
      {
        data: {
          id: "n4",
          parent: "n5"
        }
      },
      {
        data: {
          id: "n5"
        }
      }
    ],
    edges: [{
        data: {
          source: "n0",
          target: "n1",
          arrow: "triangle"
        }
      },
      {
        data: {
          source: "n1",
          target: "n2",
          arrow: "triangle"
        }
      },
      {
        data: {
          source: "n1",
          target: "n3",
          arrow: "triangle"
        }
      }
    ]
  },

  layout: {
    name: "concentric",
    minNodeSpacing: 140
  }
}));

cy.unbind("click");
cy.bind("click", "node", evt => {
  cy.elements().removeClass("selectedNode");
  evt.target.addClass("selectedNode");
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  float: left;
  position: absolute;
}

.cxtmenu-disabled {
  opacity: 0.333;
}
<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

Upvotes: 1

Related Questions