Untitled

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
<script src="joint.shapes.devs.js"></script>


</head>
<body>

    <title>Test</title>
     <!-- Form for creating a new node -->
    <div>
        <form id="NewNode" action="form_action.asp">
          Question: <input type="text" id = "quest" name="quest"><br>
          <input type="button" onclick="addNode()" value="Submit">
          <input type="button" onclick="addSubNode()" value="New Answer">
        </form>
    </div>
    <br>
    <!-- Zoom Options are set here -->
    <div>
        <button onclick="zoomIn()">Zoom in</button>
        <button onclick="zoomOut()">Zoom Out</button>
        <button onclick="zoomReset()">Reset</button>
    </div>
    <br>
    <div id="paper"> </div>
</body>


<script>

// Make the graph
//------------------------------------------------------
var graph = new joint.dia.Graph;
var selected;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 500, gridSize: 1, model: graph });

var el1 = new joint.shapes.basic.Rect({
    position: { x: 50, y: 50 }, size: { width: 100, height: 40 },
    attrs: {
        rect: { 'stroke-width': '5', 'stroke-opacity': .7, stroke: 'black', rx: 3, ry: 3, fill: 'lightgray', 'fill-opacity': .5 },
        text: { text: 'Drop me over B', 'font-size': 10, style: { 'text-shadow': '1px 1px 1px lightgray' } }
    }
});
graph.addCells([el1, el1.clone().translate(200, 50).attr('text/text', 'B')]);

// Here is the real deal. Listen on cell:pointerup and link to an element found below.
paper.on('cell:pointerup', function(cellView, evt, x, y) {

    // Find the first element below that is not a link nor the dragged element itself.
    var elementBelow = graph.get('cells').find(function(cell) {
        if (cell instanceof joint.dia.Link) return false; // Not interested in links.
        if (cell.id === cellView.model.id) return false; // The same element as the dropped one.
        if (cell.getBBox().containsPoint(g.point(x, y))) {
            return true;
        }
        return false;
    });

    // If the two elements are connected already, don't
    // connect them again (this is application specific though).
    if (elementBelow && !_.contains(graph.getNeighbors(elementBelow), cellView.model)) {

        graph.addCell(new joint.dia.Link({
            source: { id: cellView.model.id }, target: { id: elementBelow.id },
            attrs: { '.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z' } }
        }));
        // Move the element a bit to the side.
        cellView.model.translate(-200, 0);
    }
    selected = cellView.model.id;
});

paper.on('cell:pointerclick', function(cellView, evt, x, y) {
    selected = cellView.model.id;
});

// form to add another node
//------------------------------------------------------
function makeQuestion(){
    var question = document.getElementById("quest").value;
    var ans = document.getElementById("ans").value;
    var rect3 = new joint.shapes.basic.Rect({
        position: { x: 100, y: 20 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: "go", fill: 'white' } }
    });
    graph.addCell(rect3);

}
function addNode(){
    var question = document.getElementById("quest").value;
    var rect3 = new joint.shapes.basic.Rect({
        position: { x: 200, y: 50 },
        size: { width: 200, height: 100 },
        attrs: { rect: { fill: '#E74C3C' }, text: { text: question , fill: 'white' } }
    });
    graph.addCell(rect3);
}

// Zoom options
//------------------------------------------------------
var graphScale = 1;

var paperScale = function(sx, sy) {
     paper.scale(sx, sy);
};

function zoomIn(){
    graphScale += 0.1;
    paperScale(graphScale, graphScale);
}

function zoomOut(){
    graphScale -= 0.1;
    paperScale(graphScale, graphScale);
}


var zoomReset = function() {
    graphScale = 1;
    paperScale(graphScale, graphScale);
};


paper.$el.on('mousewheel DOMMouseScroll', onMouseWheel);

function onMouseWheel(e) {

    e.preventDefault();
    e = e.originalEvent;

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) / 50;
    var offsetX = (e.offsetX || e.clientX - $(this).offset().left); // offsetX is not defined in FF
    var offsetY = (e.offsetY || e.clientY - $(this).offset().top); // offsetY is not defined in FF
    var p = offsetToLocalPoint(offsetX, offsetY);
    var newScale = V(paper.viewport).scale().sx + delta; // the current paper scale changed by delta

    if (newScale > 0.4 && newScale < 2) {
        paper.setOrigin(0, 0); // reset the previous viewport translation
        paper.scale(newScale, newScale, p.x, p.y);
    }
}

function offsetToLocalPoint(x, y) {
    var svgPoint = paper.svg.createSVGPoint();
    svgPoint.x = x;
    svgPoint.y = y;
    // Transform point into the viewport coordinate system.
    var pointTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
    return pointTransformed;
}

function addSubNode(){
    if(selected){
        var rect4 = new joint.shapes.basic.Rect({
            position: { x: 300, y: 50 },
            size: { width: 200, height: 25 },
            attrs: { rect: { fill: 'blue' }, text: { text: "go" , fill: 'white' } }
        });


    var returnedCell = graph.getCell(selected);
    alert(returnedCell);
    returnedCell.embed(rect4)
    graph.addCell([rect4, returnedCell])
}

var ClickableView = joint.dia.ElementView.extend({
  pointerdown: function () {
    this._click = true;
    joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
  },
  pointermove: function () {
    this._click = false;
    joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
  },
  pointerup: function (evt, x, y) {
    if (this._click) {
      // triggers an event on the paper and the element itself
      this.notify('cell:click', evt, x, y);
    } else {
      joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
    }
  }
});


</script>
</html>