How to use jsplumb - 10 common examples

dagAutomaticLayout() {
        $('#canvas').html('')

      // Destroy round robin
        Dag.init({
        dag: this,
        instance: jsPlumb.getInstance({
          Endpoint: [
            'Dot', { radius: 1, cssClass: 'dot-style' }
          ],
          Connector: 'Straight',
          PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
          ConnectionOverlays: [
            [
              'Arrow',
              {
                location: 1,
                id: 'arrow',
                length: 12,
                foldback: 0.8
              }
            ]
          ],

created () {
      // Edit state does not allow deletion of node a...
      this.setIsEditDag(false)

      if (this.$route.query.subProcessIds) {
        this.isRtTasks = true
      }

      Dag.init({
        dag: this,
        instance: jsPlumb.getInstance({
          Endpoint: [
            'Dot', { radius: 1, cssClass: 'dot-style' }
          ],
          Connector: 'Straight',
          PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
          ConnectionOverlays: [
            [
              'Arrow',
              {
                location: 1,
                id: 'arrow',
                length: 12,
                foldback: 0.8
              }
            ]
          ],

JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
  // Backfill nodes
  this.jsonHandle({
    largeJson: largeJson,
    locations: locations
  })

  let wNodes = jsPlumb.getSelector('.statemachine-demo .w')

  // Backfill line
  this.JspInstance.batch(() => {
    for (let i = 0; i < wNodes.length; i++) {
      this.initNode(wNodes[i])
    }
    _.map(connects, v => {
      let sourceId = v.endPointSourceId.split('-')
      let targetId = v.endPointTargetId.split('-')
      if (sourceId.length === 4 && targetId.length === 4) {
        sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
        targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
      } else {
        sourceId = v.endPointSourceId
        targetId = v.endPointTargetId
      }

JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
  // Backfill nodes
  this.jsonHandle({
    largeJson: largeJson,
    locations: locations
  })

  let wNodes = jsPlumb.getSelector('.statemachine-demo .w')

  // Backfill line
  this.JspInstance.batch(() => {
    for (let i = 0; i < wNodes.length; i++) {
      this.initNode(wNodes[i])
    }
    _.map(connects, v => {
      let sourceId = v.endPointSourceId.split('-')
      let targetId = v.endPointTargetId.split('-')
      if (sourceId.length === 4 && targetId.length === 4) {
        sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
        targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
      } else {
        sourceId = v.endPointSourceId
        targetId = v.endPointTargetId
      }

console.log('current groups "' + manager.use_groups() +
			    '" for user ' + manager.user_token());
	    });
    }
};

///
/// Startup.
///
/// TODO: It would be good to have a general standard registry set so
/// that the bits here and above share the same registry code. Or
/// maybe I can just pass the manager in?
///

// Start the day the jsPlumb way.
jsPlumb.ready(function(){

    // Try to define token.
    var start_token = null;
    if( global_barista_token ){
	start_token = global_barista_token;
    }

    // Next we need a manager to try and pull in the model.
    if( typeof(global_id) === 'undefined' ||
	typeof(global_minerva_definition_name) === 'undefined' ||
	typeof(global_barista_location) === 'undefined' ){
	    alert('environment not ready');
	}else{

	    // BUG: Bad, bad, bad code...
	    // DEBUG: Path for heiko that prevents initial manager pass and

const defaultConfig = {
  // 对应上述基本概念
  anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
  connector: ['Straight'],
  endpoint: 'Blank',
  // 添加样式
  paintStyle: { stroke: '#909399', strokeWidth: 1 }, // connector
  // endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } // endpoint
  // 添加 overlay，如箭头
  overlays: [
    ['Arrow', { width: 8, length: 8, location: 1 }],
    ['Label', { location: 0.3, id: 'label' }]
  ]
}
const instance = jsPlumb.getInstance()

export default {
  name: 'FlowDesigner',
  components: { JsonEditor, OpDialog },
  data() {
    return {
      title: '',
      flow: {},
      steps: [],
      flowPath: this.$route.query.serviceFlowPath
    }
  },
  mounted() {
    const vm = this
    request.post('/api', { serviceFlowPath: this.flowPath, _path: '/loadFlowConf' })
      .then(response => {

data () {
			return {
				createNodeActive: false,
				instance: jsPlumb.getInstance(),
				lastClickPosition: [450, 450] as XYPositon,
				nodeViewScale: 1,
				ctrlKeyPressed: false,
				debouncedFunctions: [] as any[], // tslint:disable-line:no-any
				stopExecutionInProgress: false,
			};
		},
		beforeDestroy () {

*/
        getLocationTemplate: function (dataType) {
          return $(opts.template).find('#' + dataType + '-template').html();
        }
      };

      // 画布内所有节点的容器，用于控制位移和缩放
      var $nodeContainer = {
        el: null, // 容器Dom
        left: 0, // 容器位移
        top: 0,
        zoom: 1 // 画布容器整体缩放值
      };

      // jsPlumb插件实例
      var instance = jsPlumb.getInstance({
        ConnectionOverlays: [ // 配置链接线的样式
          ['PlainArrow', {
            location: 1, // 0-1
            width: 8,
            id: 'arrow',
            length: 6,
            events: { // 终线箭头的点击事件
              click: function (e) {
                e.stopPropagation();
              }
            }
          }],
          ['Label',
                        {label: '<i class="common-icon-dark-circle-close"></i>', id: 'label'}
          ]
        ],

mounted () {
    const ths = this;

    ths.jsPlumb = jsPlumb.getInstance();
    ths.$nextTick(() => {
        // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
      ths.drawNodeFn();
    });
  },
  methods: {

let DependenciesManager = function (gantt, pluginScope, api) {
    let self = this

    this.gantt = gantt
    this.pluginScope = pluginScope
    this.api = api

    this.api.registerEvent('dependencies', 'add')
    this.api.registerEvent('dependencies', 'change')
    this.api.registerEvent('dependencies', 'remove')

    this.plumb = jsplumb.jsPlumb ? jsplumb.jsPlumb.getInstance() : jsplumb.getInstance() // Workaround for build issue.
    this.plumb.importDefaults(this.pluginScope.jsPlumbDefaults)

    this.dependenciesFrom = {}
    this.dependenciesTo = {}

    this.tasksList = []
    this.tasks = {}

    this.events = new GanttDependenciesEvents(this)

    this.pluginScope.$watch('enabled', function (newValue, oldValue) {
      if (newValue !== oldValue) {
        self.refresh()
      }
    })