How to use flow-view - 10 common examples

var test = require('tape')

var Item = require('flow-view').model.Item

test('Model Item', (t) => {
  var item = new Item()

  t.ok(item.id, 'has an id')

  t.end()
})

var test = require('tape')

var Canvas = require('flow-view').model.Canvas

test('Model Canvas', (t) => {
  var canvas = new Canvas()

  t.deepEqual(canvas.link, {}, 'link defaults to {}')
  t.deepEqual(canvas.node, {}, 'node defaults to {}')

  t.end()
})

var test = require('tape')

var Node = require('flow-view').model.Node

test('Model Node', (t) => {
  var data = {
    ins: [],
    outs: [],
    text: 'new node',
    x: 10,
    y: 20,
    w: 100,
    h: 10
  }

  var node = new Node(data)

  t.deepEqual(node.getData(), data, 'getData()')

const Canvas = require('flow-view').Canvas
const path = require('path')

const view = require(path.join(__dirname, 'sample-view.json'))

const canvas = new Canvas()

canvas.load(view)

const width = 720
const height = 250

canvas.toSVG({ width, height }, (err, outputSVG) => {
  if (err) throw err

  console.log(outputSVG)
})

y: 200,
      w: 10,
      h: 1,
      text: 'Hello',
      ins: [{name: 'in0'}, {name: 'in1'}]
    }
  },
  link: {
    1: {
      from: ['a', 0],
      to: ['b', 1]
    }
  }
}

var canvas = new Canvas('drawing')

canvas.render(view)

var eventNames = [
  'addLink', 'addNode',
  'addInput', 'addOutput',
  'delLink', 'delNode',
  'moveNode', 'renameNode',
  'clickNode', 'dblclickNode'
]

eventNames.forEach(function (eventName) {
  canvas.broker.on(eventName, function (ev) {
    console.log(eventName, ev)
  })
})

const Canvas = require('flow-view').Canvas

const canvas = new Canvas('drawing')

canvas.on('createLink', (link, id) => {
  console.log('createLink', link, id)
})

canvas.on('createNode', (node, nodeId) => {
  console.log('createNode', node, nodeId)
})

canvas.on('createInputPin', (nodeId, position, pin) => {
  console.log('createInputPin', nodeId, position, pin)
})

canvas.on('createOutputPin', (nodeId, position, pin) => {
  console.log('createOutputPin', nodeId, position, pin)
})

y: 200,
      w: 10,
      h: 1,
      text: 'Click me',
      ins: [{name: 'in0'}, {name: 'in1'}]
    }
  },
  link: {
    1: {
      from: ['a', 0],
      to: ['b', 1]
    }
  }
}

var canvas = new Canvas('drawing', {
  theme: {
    fillPin: '#0288d1',
    fillPinHighlighted: '#ffc107',
    fillRect: '#03a9f4',
    strokeLine: {
      color: '#727272',
      width: 3
    },
    strokeLineHighlighted: {
      color: '#e64a19',
      width: 5
    }
  }
})

canvas.render(view)

y: 200,
      w: 10,
      h: 1,
      text: 'white',
      ins: [{name: 'in0'}, {name: 'in1'}]
    }
  },
  link: {
    1: {
      from: ['a', 0],
      to: ['b', 1]
    }
  }
}

var canvas = new Canvas('drawing', {
  nodeSelector: {
    dataList: {
      URL: 'http://g14n.info/flow-view/examples/colors.json'
    }
  }
})

canvas.render(view)

w: 10,
          h: 1,
          link: 'http://g14n.info/flow-view',
          text: "Click me",
          ins: [{name: "in0"}, {name: "in1"}]
        }
     },
     link: {
       1: {
         from: ['a', 0],
         to: ['b', 1]
       }
     }
   }

var canvas = new Canvas('drawing')

canvas.render(view)

{ name: 'return' }
      ]
    }
  ],
  links: [
    {
      id: 'c',
      from: ['a', 0],
      to: ['b', 0]
    }
  ]
}

const container = document.getElementById('drawing')

const canvas = new Canvas(container)

canvas.loadGraph(graph)

},{"flow-view":undefined}]},{},[1]);