How to use the flow-view.Canvas function in flow-view

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]);

return (next) => (action) => {
    const result = next(action)

    if (action.type === 'READ_GRAPH_SUCCESS') {
      const graph = action.data

      const data = graph.data
      const pipe = graph.pipe
      const task = graph.task
      const view = graph.view

      flowViewCanvas = new Canvas(CanvasContainer.defaultProps.id, {
        node: {
          InvalidNode,
          SubgraphNode,
          ToggleNode
        },
        util: { typeOfNode }
      })

      flowViewCanvas.render(view, { data, pipe, task })

      flowViewCanvas.on('createNode', (node, nodeId) => {
        store.dispatch(createNode(node, nodeId))
      })

      flowViewCanvas.on('createLink', (link, linkId) => {
        store.dispatch(createLink(link, linkId))

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

var canvas = new Canvas('drawing');

canvas.render(view);

var graph = canvas.toJSON();
var data = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(graph));
$('#download').attr('href', data);

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

eventNames.forEach(function (eventName) {
  canvas.broker.on(eventName, function (ev) {
    graph = canvas.toJSON();
    data = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(graph));
    $('#download').attr('href', data);
  });
});

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

const container = document.getElementById('drawing')

const canvas = new Canvas(container)

canvas.loadGraph(graph)