How to get the name of mxConnectionConstraint defined for a point in mxgraph

Question

Hi how to get the connection point name in mxgraph during connect

Here is how I have defined connection point for all:

mxShape.prototype.constraints = [
   new mxConnectionConstraint(new mxPoint(0.5, 0), true,'top'),
   new mxConnectionConstraint(new mxPoint(0.5, 1), true, 'bottom')
];

here is documentation for mxConnectionConstraint : https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxConnectionConstraint-js.html

Note: I have given the points name as top, bottom

Question: try to connect those 2 cells with those 2 points only when connected I want to get the point name such as top,bottom

<html>

<head>
  <title>Anchors example for mxGraph</title>

  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
  </script>

  <!-- Loads and initializes the library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js">
  </script>

  <!-- Example code -->
  <script type="text/javascript">
    // Overridden to define per-shape connection points
    mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
      if (terminal != null && terminal.shape != null) {
        if (terminal.shape.stencil != null) {
          if (terminal.shape.stencil.constraints != null) {
            return terminal.shape.stencil.constraints;
          }
        } else if (terminal.shape.constraints != null) {
          return terminal.shape.constraints;
        }
      }
      return null;
    };
    // Defines the default constraints for all shapes
    mxShape.prototype.constraints = [
      new mxConnectionConstraint(new mxPoint(0.5, 0), true, 'top'),
      new mxConnectionConstraint(new mxPoint(3, 0), true, 'bottom'),
    ];
    // Edges have no connection points
    mxPolyline.prototype.constraints = null;
    // Program starts here. Creates a sample graph in the
    // DOM node with the specified ID. This function is invoked
    // from the onLoad event handler of the document (see below).
    function main(container) {
      // Checks if the browser is supported
      if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error('Browser is not supported!', 200, false);
      } else {
        // Disables the built-in context menu
        mxEvent.disableContextMenu(container);
        // Creates the graph inside the given container
        var graph = new mxGraph(container);
        graph.setConnectable(true);
        // Enables connect preview for the default edge style
        graph.connectionHandler.createEdgeState = function(me) {
          var edge = graph.createEdge(null, null, null, null, null);
          return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
        };
        // Specifies the default edge style
        //graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
        graph.getStylesheet().getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = mxEdgeStyle.scalePointArray;
        // Enables rubberband selection
        new mxRubberband(graph);
        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();
        // Adds cells to the model in a single step
        graph.getModel().beginUpdate();
        try {
          var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
          var v2 = graph.insertVertex(parent, null, 'World!', 190, 60, 80, 30);
        } finally {
          // Updates the display
          graph.getModel().endUpdate();
        }
      }
      var mxConnetEvent = mxConnectionHandler.prototype.connect;
      mxConnectionHandler.prototype.connect = function(source, target, evt, dropTarget) {
        console.log('connected get me connection point name');
        var state = graph.view.getState(source);
        console.log('connection points with name', graph.getConnectionConstraint(state))
        return mxConnetEvent.apply(this, arguments);
      }
    };
  </script>
</head>

<!-- Page passes the container for the graph to the program -->

<body onload="main(document.getElementById('graphContainer'))">

  <!-- Creates a container for the graph with a grid wallpaper -->
  <div id="graphContainer" style="position:relative;overflow:hidden;width:621px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
  </div>
</body>

</html>

Steps to re-produce:

Hover on the box you see 2 star from that star start dragging a line connection
connect the line once connected i want to know the connecting point name

I have even created a codepen demo for better console.log(): Codepen

Even i went through this example but did not find my solution in it: demo:Codepen

Please help me thanks in advance!!!

Please visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Oct 04 '22 at 07:25
Most likely to do with how margins are setup for your printer. I'd suggest setting up a specific `@media print` section in your stylesheet to add margin/padding to the necessary elements. — Rory McCrossan, Oct 04 '22 at 07:27
@EaBengaluru exactly my point - add a section for `print` rules too. — Rory McCrossan, Oct 04 '22 at 07:47

Alireza Ahmadi · Answer 1 · 2022-10-23T08:54:29.833

The thing I have found is that to override the getConnectionPoint and set the name into point:

var getConnectionPoint = mxGraph.prototype.getConnectionPoint;
mxGraph.prototype.getConnectionPoint = function(vertex, constraint, round) {
   var point = getConnectionPoint.apply(this, arguments);
   if(point){
     point.name = constraint.name;
    
    //this is source
    if(vertex.cell.value === 'Hello,')
      sourceCurrentPoint = point
    //this is a target
    else if(vertex.cell.value === 'World!')
     targetCurrentPoint = point;
   }
   return point;
}

Here is final code:

<html>

<head>
  <title>Anchors example for mxGraph</title>

  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
  </script>

  <!-- Loads and initializes the library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js">
  </script>

  <!-- Example code -->
  <script type="text/javascript">
    var targetCurrentPoint;
    var sourceCurrentPoint;
   var getConnectionPoint = mxGraph.prototype.getConnectionPoint;
   mxGraph.prototype.getConnectionPoint = function(vertex, constraint, round) {
       var point = getConnectionPoint.apply(this, arguments);
       if(point){
         point.name = constraint.name;
       
       //this is source
       if(vertex.cell.value === 'Hello,') {
        sourceCurrentPoint = point
       }
       //this is a target
       else if(vertex.cell.value === 'World!') {
        targetCurrentPoint = point;
       }
       }
       return point;
   }

    // Overridden to define per-shape connection points
    mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
      if (terminal != null && terminal.shape != null) {
        if (terminal.shape.stencil != null) {
          if (terminal.shape.stencil.constraints != null) {
            return terminal.shape.stencil.constraints;
          }
        } else if (terminal.shape.constraints != null) {
          return terminal.shape.constraints;
        }
      }
      return null;
    };
    // Defines the default constraints for all shapes

    mxShape.prototype.constraints = [
      new mxConnectionConstraint(new mxPoint(0.5, 0), true, 'top'),
      new mxConnectionConstraint(new mxPoint(3, 0), true, 'bottom'),
    ];
    // Edges have no connection points
    mxPolyline.prototype.constraints = null;
    // Program starts here. Creates a sample graph in the
    // DOM node with the specified ID. This function is invoked
    // from the onLoad event handler of the document (see below).
    function main(container) {
      // Checks if the browser is supported
      if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error('Browser is not supported!', 200, false);
      } else {
        // Disables the built-in context menu
        mxEvent.disableContextMenu(container);
        // Creates the graph inside the given container
        var graph = new mxGraph(container);
        graph.setConnectable(true);
        // Enables connect preview for the default edge style
        graph.connectionHandler.createEdgeState = function(me) {
          var edge = graph.createEdge(null, null, null, null, null);
          return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
        };
        // Specifies the default edge style
        //graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
        graph.getStylesheet().getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = mxEdgeStyle.scalePointArray;
        // Enables rubberband selection
        new mxRubberband(graph);
        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();
        // Adds cells to the model in a single step
        graph.getModel().beginUpdate();
        try {
          var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
          var v2 = graph.insertVertex(parent, null, 'World!', 190, 60, 80, 30);
        } finally {
          // Updates the display
          graph.getModel().endUpdate();
        }
      }
      var mxConnetEvent = mxConnectionHandler.prototype.connect;
      mxConnectionHandler.prototype.connect = function(source, target, evt, dropTarget) {
        var state = graph.view.getState(source);
        console.log('sourceCurrentPoint',sourceCurrentPoint);
        console.log('targetCurrentPoint',targetCurrentPoint);
        return mxConnetEvent.apply(this, arguments);
      }
    };
  </script>
</head>

<!-- Page passes the container for the graph to the program -->

<body onload="main(document.getElementById('graphContainer'))">

  <!-- Creates a container for the graph with a grid wallpaper -->
  <div id="graphContainer" style="position:relative;overflow:hidden;width:621px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
  </div>
</body>

</html>

Once again you rock !! one more i wanted to request you is that i want to get both `source` and `target` connection point name. could you please help me with that. — EaBengaluru, Oct 23 '22 at 01:01
I'm sorry to say that in my real scenario all `vertex` will going to have dynamic values. what I'm requesting you is that I want to get both connection point at once. In my case there can be more than 20 dynamic `vertex` — EaBengaluru, Oct 23 '22 at 15:09
@EaBengaluru But you need to know vertext name it's like an id. So you can find each vertext vy it's name and store it's point in you array — Alireza Ahmadi, Oct 23 '22 at 16:40
But this solution is not 100% concrete, could you please give us the solution with both points without checking vertex name. — EaBengaluru, Oct 23 '22 at 16:56
@EaBengaluru I am sorry I don't know any other solution for that :( — Alireza Ahmadi, Oct 23 '22 at 17:00
could you please help me with multiple points i'm getting name `undefined` here is demo : https://codepen.io/eabangalore/pen/XWYjzaY?editors=1010 please please suggest me or help me. — EaBengaluru, Nov 06 '22 at 13:45

How to get the name of mxConnectionConstraint defined for a point in mxgraph

1 Answers1

Linked