JSFiddle - React, Tailwind, and code Playground

by uwmyuan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
<script src="https://unpkg.com/vue2vis@0.0.13/dist/vue2vis.min.js"></script>
<body>
  <div id="app">
    <network class="network" ref="network" :nodes="network.nodes" :edges="network.edges" :options="network.options" @click="networkEvent('click')" @doubleClick="networkEvent('doubleClick')" @oncontext="networkEvent('oncontext')" @hold="networkEvent('hold')"
      @release="networkEvent('release')" @select="networkEvent('select')" @selectNode="networkEvent('selectNode')" @selectEdge="networkEvent('selectEdge')" @deselectNode="networkEvent('deselectNode')" @deselectEdge="networkEvent('deselectEdge')" @dragStart="networkEvent('dragStart')"
      @dragging="networkEvent('dragging')" @dragEnd="networkEvent('dragEnd')" @hoverNode="networkEvent('hoverNode')" @blurNode="networkEvent('blurNode')" @hoverEdge="networkEvent('hoverEdge')" @blurEdge="networkEvent('blurEdge')" @zoom="networkEvent('zoom')"
      @showPopup="networkEvent('showPopup')" @hidePopup="networkEvent('hidePopup')" @startStabilizing="networkEvent('startStabilizing')" @stabilizationProgress="networkEvent('stabilizationProgress')" @stabilizationIterationsDone="networkEvent('stabilizationIterationsDone')"
      @stabilized="networkEvent('stabilized')" @resize="networkEvent('resize')" @initRedraw="networkEvent('initRedraw')" @beforeDrawing="networkEvent('beforeDrawing')" @afterDrawing="networkEvent('afterDrawing')" @animationFinished="networkEvent('animationFinished')"
      @configChange="networkEvent('configChange')" @nodes-mounted="networkEvent('nodes-mounted')" @nodes-add="networkEvent('nodes-add')" @nodes-update="networkEvent('nodes-update')"...

JavaScript

Vue.component('network', vue2vis.Network);

var v = new Vue({
  el: '#app',
  data() {
    return {
      node: {
        x: 0,
        y: 0
      },
      networkEvents: '',
      network: {
        nodes: [{
            id: 1,
            label: 'Node 1'
          },
          {
            id: 2,
            label: 'Node 2'
          },
          {
            id: 3,
            label: 'Node 3'
          },
          {
            id: 4,
            label: 'Node 4'
          },
          {
            id: 5,
            label: 'Node 5'
          },
        ],
        edges: [{
            id: 1,
            from: 1,
            to: 3
          },
          {
            id: 2,
            from: 1,
            to: 2
          },
          {
            id: 3,
            from: 2,
            to: 4
          },
          {
            id: 4,
            from: 2,
            to: 5
          },
          {
            id: 5,
            from: 3,
            to: 3
          },
        ],
        options: {
          nodes: {
            shape: 'circle',
          },
          manipulation: {

            addNode: function(data, callback) {
              v.node.x = data.x;
              v.node.y = data.y;
              callback(data);
            },
            editNode: function(data, callback) {
              v.node.x = data.x;
              v.node.y = data.y;
              v.$refs['EditNode'].$on('click', v.onEditNode(data, callback));
              v.$refs['CancelEditNode'].$on('click', v.onCancelEditNode(data, callback));
            }
          }
        },
      },
    }
  },
  methods: {
    onEditNode(data, callback) {
      data.x = this.node.x;
      data.y = this.node.y;
      callback(data);
    },
    onCancelEditNode(data, callback) {
      this.node.x = 0;
      this.node.y = 0;
      callback(null);
    },
    networkEvent(eventName) {
      if (this.networkEvents.length > 500) this.networkEvents = '';
      this.networkEvents += `${eventName}, `;
 ...