Adding a node via clicking

[piller187]

You have a drag and drop example of placing a node but that has some kind of ui parameter. Is there any way you could show how to add nodes with the default click event (where the 'e' parameter is passed into the event handler). I can't seem to get the positioning correct.

[sdrdis]

Sorry for my late answer. Just a question, do you get the positioning correctly when panzoom is disabled (or no zoom in the image). Because if it doesn't work correctly when zoomed in / zoomed out, check out the code of the last example, notably:

    var possibleZooms = [0.5, 0.75, 1, 2, 3];
    var currentZoom = 2;
    $container.on('mousewheel.focal', function( e ) {
        e.preventDefault();
        var delta = (e.delta || e.originalEvent.wheelDelta) || e.originalEvent.detail;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        currentZoom = Math.max(0, Math.min(possibleZooms.length - 1, (currentZoom + (zoomOut * 2 - 1))));
        $flowchart.flowchart('setPositionRatio', possibleZooms[currentZoom]);
        $flowchart.panzoom('zoom', possibleZooms[currentZoom], {
            animate: false,
            focal: e
        });
    });

You need to set the position ratio...