create:function(component) {
      return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");
}

import { jsPlumb } from 'jsplumb'
require('../assets/css/demo.css')
require('../assets/css/jsplumb.css')
export default {
  name: 'Index',
  data() {
    return {
      data: {
        point: [
          {
            _id: '58c21d713819d56d68763918',
            name: 'MoeLove',
            status: '0'
          },
          {
            _id: '58c21d803819d56d68763919',
            name: 'Moe',
            status: '1'
          },
          {
            _id: '58c21da83819d56d6876391a',
            name: 'Love',
            status: '0'
          },
          {
            _id: '58c63ecf3819d5a22f2c7f24',
            name: 'TaoBeier',
            status: '1'
          }
        ],
        location: [
          ['Moe', 4, 14],
          ['Love', 4, 24],
          ['TaoBeier', 4, 34],
          ['TaoBeier', 20, 24],
          ['MoeLove', 4, 4]
        ],
        line: [
          ['58c21d713819d56d68763918', '58c21d803819d56d68763919'],
          ['58c21d803819d56d68763919', '58c21da83819d56d6876391a'],
          ['58c21d803819d56d68763919', '58c63ecf3819d5a22f2c7f24'],
          ['58c21da83819d56d6876391a', '58c63ecf3819d5a22f2c7f24']
        ]
      }
    }
  },
  methods: {
    createFlow(flowData) {
      console.log(flowData)
      const color = '#acd'
      const instance = jsPlumb.getInstance({
        Container: 'points',
        Connector: ['Bezier', { curviness: 50 }],
        Endpoint: ['Dot', { radius: 5 }],
        DragOptions: { cursor: 'pointer', zIndex: 5000 },
        PaintStyle: { lineWidth: 5, stroke: '#445566' },
        EndpointStyle: { radius: 9, fill: color, stroke: 'red' },
        HoverPaintStyle: { stroke: '#ec9f2e', lineWidth: 4 },
        EndpointHoverStyle: { fill: '#ec9f2e', stroke: '#acd' },
        ConnectionOverlays: [
          [
            'Arrow',
            {
              location: 1,
              id: 'arrow',
              length: 4,
              foldback: 0.8,
              paintStyle: {
                lineWidth: 5,
                stroke: 'lightgray',
                fill: 'lightgray'
              }
            }
          ]
        ]
      })
      // suspend drawing and initialise.
      instance.batch(() => {
        // declare some common values:
        const arrowCommon = { foldback: 0.7, width: 12 }
        // use three-arg spec to create two different arrows with the common values:
        const overlays = [
          ['Arrow', { location: 0.7 }, arrowCommon],
          ['Label', { label: 'custom label', id: 'label' }]
        ]
        // init point
        const points = document.getElementById('points')
        flowData.point.forEach(point => {
          const div = document.createElement('div')
          div.setAttribute('id', `${point._id}`)
          div.setAttribute(
            'class',
            `point chart_act_${point.status} ${point.name}`
          )
          div.innerText = `${point.name}`
          points.appendChild(div)

          instance.addEndpoint(
            point._id,
            {
              uuid: `${point._id}-bottom`,
              anchor: 'Bottom',
              maxConnections: -1
            },
            {
              isSource: true,
              isTarget: true
            }
          )
          instance.addEndpoint(
            point._id,
            {
              uuid: `${point._id}-top`,
              anchor: 'Top',
              maxConnections: -1
            },
            {
              isSource: true,
              isTarget: true,
              dragAllowedWhenFull: true
            }
          )
        })

        // init transition
        flowData.line.forEach(line => {
          const uuid = [`${line[0]}-bottom`, `${line[1]}-top`]
          instance.connect({
            uuids: uuid,
            overlays
          })
        })

        // init location
        flowData.location.forEach(location => {
          const item = document.querySelector(`.${location[0]}`)
          item.style.left = `${location[1] * 20}px`
          item.style.top = `${location[2] * 20}px`
        })
      })
      jsPlumb.fire('jsPlumbDemoLoaded', instance)
    }
  },
  mounted() {
    jsPlumb.ready(() => {
      this.createFlow(this.data)
    })
  }
}

jsPlumbToolkit.ready(() => {
  // ...
})

const toolkit = jsPlumbToolkit.newInstance({})

// 方式一
const toolkit = jsPlumbToolkit.newInstance({
  data: [
    ('nodes': [{ id: 'foo', name: 'foo' }, { id: 'bar', name: 'bar' }]),
    ('edges': [{ source: 'foo', target: 'bar' }])
  ]
})
// 方式二
// 先声明 tookit， 使用
toolkit.load({
  data:[ .... ]
})

const renderer = toolkit.render({
  container: 'id',
  jsPlumb: {}
})

jsPlumbToolkit.ready(() => {
  const tookit = jsPlumbToolkit.newInstance()
  const data = {
    nodes: [
      {
        id: '1',
        picUrl: 'http://xxx.png',
        name: 'xxx',
        tips: ['xxxx', '555555']
      }
    ]
  }
  const renderer = tookit.load({ type: 'json', data }).render({
    // ...
    view: {
      nodes: {
        default: {
          template: 'tmplNode'
        }
      }
    }
    // ...
  })
})

jsPlumbToolkit.ready(() => {
  const tookit = jsPlumbToolkit.newInstance()
  const data = {
    nodes: [
      {
        id: '1',
        picUrl: 'http://xxx.png',
        name: 'xxx',
        tips: ['xxxx', '555555']
      },
      {
        id: '2',
        picUrl: 'http://xxx.png',
        name: 'xxx',
        tips: ['xxxx', '555555'],
        type: 'common'
      }
    ]
  }
  const renderer = tookit.load({ type: 'json', data }).render({
    // ...
    view: {
      nodes: {
        default: {
          template: 'tmplNode',
          events: {
            click: params => {
              console.log(params)
            }
          }
        },
        common: {
          template: 'tmplNode2',
          parent: 'default'
        }
      }
    }
    // ...
  })
})

jsPlumbToolkit.ready(() => {
  const tookit = jsPlumbToolkit.newInstance()
  const data = {
    nodes: [
      {
        id: '1',
        picUrl: 'http://xxx.png',
        name: 'xxx1',
        tips: ['xxxx', '555555']
      },
      {
        id: '2',
        picUrl: 'http://xxx.png',
        name: 'xxx2',
        tips: ['xxxx', '555555']
      }
    ],
    edges: [{ source: '1', target: '2' }]
  }
  const renderer = tookit.load({ type: 'json', data }).render({
    // ...
    view: {
      nodes: {
        default: {
          template: 'tmplNode'
        }
      },
      edges: {
        connector: 'StateMachine',
        paintStyle: { lineWidth: 2, strokeStyle: '#CCC' }
      }
    }
    // ...
  })
})

jsPlumbToolkit.ready(() => {
  const tookit = jsPlumbToolkit.newInstance()
  const data = {
    nodes: [
      {
        id: 'book',
        name: 'Book',
        type: 'table',
        columns: [
          {
            id: 'id',
            datatype: 'integer',
            primaryKey: true
          },
          {
            id: 'isbn',
            datatype: 'varchar'
          },
          {
            id: 'title',
            datatype: 'varchar'
          }
        ]
      },
      {
        id: 'book_author',
        name: 'BookAuthor',
        type: 'table',
        columns: [
          {
            id: 'book_id',
            datatype: 'integer'
          },
          {
            id: 'author_id',
            datatype: 'integer'
          }
        ]
      }
    ],
    edges: [
      {
        source: 'book.id',
        target: 'book_author.book_id',
        data: {
          type: '1:1'
        }
      },
      {
        source: 'author.id',
        target: 'book_author.author_id',
        data: {
          type: '1:1'
        }
      }
    ]
  }
  const renderer = tookit.load({ type: 'json', data }).render({
    // ...
    view: {
      nodes: {
        default: {
          template: 'tmplTable',
          events: {
            click: params => {
              console.log(params)
            }
          }
        }
      },
      edges: {
        common: {
          anchor: ['Left', 'Right'], // anchors for the endpoints
          connector: 'StateMachine', //  StateMachine connector type
          events: {
            dbltap: function(params) {
              _editEdge(params.edge)
            }
          },
          overlays: [
            [
                events: {
                  tap: function(params) {
                    toolkit.removeEdge(params.edge)
                  }
                }
              }
            ]
          ]
        },
        // each edge type has its own overlays.
        '1:1': {
          parent: 'common',
          overlays: [
            ['Label', { label: '1', location: 0.1 }],
            ['Label', { label: '1', location: 0.9 }]
          ]
        }
      },
      ports: {
        default: {
          template: 'tmplColumn',
          edgeType: 'common', // the type of edge for connections from this port type
          maxConnections: -1, // no limit on connections
          events: {
            dblclick: function() {
              console.log(arguments)
            }
          }
        }
      }
    }
    // ...
  })
})

var toolkit = jsPlumbToolkit.newInstance()
toolkit.load({
  data: {
    groups: [
      { id: 'g1', type: 'groupType1' },
      { id: 'g2', type: 'groupType1' }
    ],
    nodes: [
      { id: '1', group: 'g1' },
      { id: '2', group: 'g1' },
      { id: '3', group: 'g2' },
      { id: '4', group: 'g2' }
    ],
    edges: [
      { source: '1', target: '2' },
      { source: '1', target: '3' },
      { source: '4', target: '3' },
      { source: '4', target: '2' }
    ]
  }
})
toolkit.render({
  // ...
  view: {
    nodes: {
      default: {
        template: 'tmplNode',
        events: {
          click: function(p) {
            alert('You clicked on node ' + p.node.id)
          }
        }
      }
    },
    groups: {
      groupType1: {
        template: 'tmplGroupType1',
        constrain: true
      }
    }
  }
})

jsPlumbToolkit.ready(() => {
  const tookit = jsPlumbToolkit.newInstance({
    // 禁止拖拽
    beforeStartDetach() {
      return false
    }
  })

  const data = [
    // ...
  ]

  const mainElement = document.querySelector('#jtk-demo-layouts')
  // 容器
  const canvasElement = mainElement.querySelector('.jtk-demo-canvas')
  // 小地图
  const miniviewElement = mainElement.querySelector('.miniview')
  // 按钮
  const controls = document.querySelector('.controls')
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  container: canvasElement
  // ...
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  miniview: {
    container: miniviewElement
  }
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  //...
  view: {
    nodes: {
      default: {
        //...
        events: {
          click: params => {
            console.log(params)
          }
        }
      }
    }
  }
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  //...
  view: {
    edges: {
      default: {
        //...
        events: {
          click: params => {
            console.log(params)
          }
        }
      }
    }
  }
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  zoomToFit: true
})

const renderer = jsPlumb.on(mainElement, 'tap', '[reset]', function() {
  toolkit.clearSelection()
  renderer.zoomToFit()
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  dragOptions: {
    magnetize: true
  }
})

const renderer = tookit.load({ type: 'json', data: this.data }).render({
  elementsDraggable: false
})

var renderer = toolkit.render({
  enablePan: false
})

renderer.setMode(Surface.DISABLED)