mxGraph

Line connection and arrow connection

HTML

<html>
  <head>
    <title>Context icons example for mxGraph</title>

    <!-- Sets the basepath for the library if not in same directory -->
    <script type="text/javascript">
      mxBasePath = "../src";
    </script>

    <!-- Loads and initializes the library -->
    <script type="text/javascript" src="../src/js/mxClient.js"></script>

    <!-- Example code -->
    <script type="text/javascript">
      // Defines a subclass for mxVertexHandler that adds a set of clickable
      // icons to every selected vertex.
      function mxVertexToolHandler(state) {
        mxVertexHandler.apply(this, arguments);
      }

      mxVertexToolHandler.prototype = new mxVertexHandler();
      mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;

      mxVertexToolHandler.prototype.domNode = null;

      mxVertexToolHandler.prototype.init = function() {
        mxVertexHandler.prototype.init.apply(this, arguments);

        // In this example we force the use of DIVs for images in IE. This
        // handles transparency in PNG images properly in IE and fixes the
        // problem that IE routes all mouse events for a gesture via the
        // initial IMG node, which means the target vertices
        this.domNode = document.createElement("div");
        this.domNode.style.position = "absolute";
        this.domNode.style.whiteSpace = "nowrap";

        // Workaround for event redirection via image tag in quirks and IE8
        function createImage(src) {
          if (mxClient.IS_IE && !mxClient.IS_SVG) {
            var img = document.createElement("div");
            img.style.backgroundImage = "url(" + src + ")";
            img.style.backgroundPosition = "center";
            img.style.backgroundRepeat = "no-repeat";
            img.style.display = mxClient.IS_QUIRKS ? "inline" : "inline-block";

            return img;
          } else {
            return mxUtils.createImage(src);
          }
        }

        // Delete
        var img =...