javascriptmxgraph

How can ı get label name in mxgraph?


I place figures on the screen in the mxgraph editor. How can I access the names of these shapes I placed?

For example, there are 2 ellipses and 1 square on the screen. When I press the button, I want it to say there are 2 ellipses and 1 square.

How can I do that?


Solution

  • The shape of the built-in shapes is defined by its style. So, you can use style to figure it out. In the editor, you can access the (raw) style using "Edit -> Style", it's a list of semicolon-separated values somewhat like trinagle;html=1; or shape=prallalelogram;whiteSpace=wrap;html=1;

    enter image description here

    enter image description here

    To get it you just get the style of the shape with javascript:

    
    const cells = graph.model.getChildCells(graph.getDefaultParent(), true, true);
    
    for (const cell of cells) {
      const styles = cell && cell.style && cell.style.split(';') || [];
      if (styles.indexOf('ellipse') >= 0) {
        console.log(`ellipse found: ${cell.id}`)
      }
      if (styles.indexOf('triangle') >= 0) {
        console.log(`triangle found: ${cell.id}`)
      }
    }
    

    I am uncertain if this is the best option, but it should work. For your custom shapes that you have created yourself, you can just add some property to your shape to detect the shape by that property.