drag-tracker demo

SVG dragging bound (sort of) to Vue.js state

Add node Add line
Size of selected node:

_svgState = {
  "nodeRadius": 16,
  "nodes": [
    {
      "coord": [ 341, 311 ],
      "radius": 16
    },
    {
      "coord": [ 371, 363 ],
      "radius": 16
    }
  ],
  "lines": [
    {
      "start": {
        "coord": [ 78, 92 ],
        "radius": 16
      },
      "end": {
        "coord": [ 83, 48 ],
        "radius": 16
      }
    },
    {
      "start": {
        "coord": [ 14, 340 ],
        "radius": 16
      },
      "end": {
        "coord": [ 321, 197 ],
        "radius": 16
      }
    }
  ],
  "selectedNode": null
}