JSFiddle - React, Tailwind, and code Playground

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.2/joint.css" />
</head>
<body>
      <!-- content -->
      <h3>the example below demonstrates the work of tracking vertex changes on an arrow</h3>
      <h2>
      Task
      </h2>
      <div>
      The task is that we should get the new vertex values only after the vertex changes have been completed (the user clicks on a vertex and starts moving it. and only after he releases the vertex should we get its new coordinate values, not all the values that will come during the moving process).
      </div>
      <h2>how logic works</h2>
      <ul>
       <li>the <strong>"link:pointerclick"</strong> listener is executed when the arrow is clicked.</li>
       <li>two functions are run inside this listener: <strong>handleLinkSelected(), showTools()</strong>.
       </li>
       <li>the <strong>"change:vertices"</strong> listener is launched inside the 
       <strong>handleLinkSelected()</strong> 
       function.</li>
       <li>a timer is started inside the <strong>"change:vertices"</strong> listener, which shows us the updated vertex position only after there have been no new changes for 500 milliseconds.</li>
       <div style="margin-top: 20px">
       <em>The results of changing the number and position of vertices are output to the console</em>
       </div>
      </ul>

      <h2>
      Problem
      </h2>
      <div>
      The problem is that this method doesn't always work.
There are situations when pressing the arrow does not trigger the <strong>"link:pointerclick"</strong> 
listener.
Also the timer does not always work and does not always show us new values of vertex coordinates.
<strong>Could you please tell me how to fix this code, because the timer solution doesn't look the most reliable?</strong>
      </div>
      <h2>
      Also
      </h2>
      <div>
      There is also a question related to 
      <strong>new ns.SourceArrowhead() and new...

CSS

.opaque { opacity: 0.1 }

JavaScript

// the example below demonstrates the work of tracking vertex changes on an arrow

var graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: '99%',
  height: 400,
  model: graph,
  defaultConnectionPoint: {
    name: 'boundary'
  },
  cellViewNamespace: joint.shapes,
  gridSize: 10,
  drawGrid: true,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  background: { color: "#fff" },
  interactive: true,
});

// extending the Link class
class Link extends joint.shapes.standard.Link {
  constructor() {
    super(...arguments);
    this.defaultLabel = {
      attrs: {
        rect: {
          fill: "#ffffff",
          stroke: "#fecece",
          strokeWidth: 1,
          width: "calc(w + 10)",
          height: "calc(h + 10)",
          x: 0,
          y: 0,
        },
      },
    };
  }

  static connectionPoint(line, view, magnet, opt, type, linkView) {
    const link = linkView.model;
    const markerWidth =
      link.get("type") === "app.Link" ? link.getMarkerWidth(type) : 0;
    opt = { offset: markerWidth, stroke: true };
    const modelType = view.model.get("type");
    if (modelType.indexOf("uml") === 0) {
      opt.selector = "root";
    }
    if (modelType === "standard.InscribedImage") {
      opt.selector = "border";
    }
    return joint.connectionPoints.boundary.call(
      this,
      line,
      view,
      magnet,
      opt,
      type,
      linkView
    );
  }

  defaults() {
    return joint.util.defaultsDeep(
      {
        type: "app.Link",
        router: {
          name: "normal",
        },
        connector: {
          name: "rounded",
        },
        labels: [],
        attrs: {
          line: {
            stroke: "#8f8f8f",
            strokeDasharray: "0",
            strokeWidth: 2,
            fill: "none",
            sourceMarker: {
              type: "path",
              d: "M 0 0 0 0",
              stroke:...