diff options
| -rw-r--r-- | scripts/buttons.js | 4 | ||||
| -rw-r--r-- | scripts/model/graph.js | 503 | ||||
| -rw-r--r-- | scripts/rhizicore.js | 975 |
3 files changed, 751 insertions, 731 deletions
diff --git a/scripts/buttons.js b/scripts/buttons.js index 5f406d45..ef56594d 100644 --- a/scripts/buttons.js +++ b/scripts/buttons.js @@ -45,7 +45,7 @@ $('.file-load').on('change', function(event) { if (e.target.readyState === FileReader.DONE) { console.log('done reading ' + theFile.name); console.log('got #' + result.length + ' bytes in ' + typeof(result)); - RZ.graph.load_from_json(result); + RZ.load_from_json(result); } } })(file); @@ -57,7 +57,7 @@ $('.local-storage-load a').click(function(){ return; } var json_blob = localStorage.getItem(key) - RZ.graph.load_from_json(json_blob); + RZ.load_from_json(json_blob); }); $('a.set-user').click(function() { diff --git a/scripts/model/graph.js b/scripts/model/graph.js new file mode 100644 index 00000000..5f8043f2 --- /dev/null +++ b/scripts/model/graph.js @@ -0,0 +1,503 @@ +"use strict" + +define(['signal', 'consts', 'util', 'textanalysis'], function ( + signal, consts, util, textanalysis) { + +function myGraph(el) { + + var nodes = [] + var links = []; + + ///FUNCTIONS + this.addNode = function(id, type, state) { + var new_node = this.addNodeNoHistory( + {id:id, + name:id, + type:type, + state:state, + start:0, + end:0, + status:"unknown"}); + if (new_node) { + signal.signal(consts.APPLIED_GRAPH_DIFF, [{ + nodes: {add: [new_node]}}]); + } + } + + this.addNodeNoHistory = function(spec) { + // No history recorded - this is a helper for loading from files / constant graphs + var id = spec.id.toString().toLowerCase(); + var node = findNode(id, null); + var new_node = undefined; + + if (node === undefined) { + new_node = { + "id": id, + "name": spec.name, + "type": spec.type, + "state": spec.state, + "start": spec.start, + "end": spec.end, + "status": spec.status, + 'url': spec.url, + 'x': spec.x, + 'y': spec.y, + }; + nodes.push(new_node); + } + return new_node; + } + + this.removeNode = function(id, state) { + var i = 0; + id = id.toLowerCase(); + var n = findNode(id, state); + while (i < links.length) { + if ((links[i]['source'] === n) || (links[i]['target'] == n)) links.splice(i, 1); + else i++; + } + var index = findNodeIndex(id, state); + if (index !== undefined) { + nodes.splice(index, 1); + } + signal.signal(consts.APPLIED_GRAPH_DIFF, [{nodes: {removed: [id]}}]); + } + + this.removeNodes = function(state) { + var id = null; + var ns = findNodes(null, state); + for (var j = 0; j < ns.length; j++) { + var n = ns[j]; + var i = 0; + while (i < links.length) { + if ((links[i]['source'] === n) || (links[i]['target'] == n)) links.splice(i, 1); + else i++; + } + var index = findNodeIndex(id, state); + if (index !== undefined) { + nodes.splice(index, 1); + } + } + if (ns.length > 0) { + signal.signal(consts.APPLIED_GRAPH_DIFF, [{nodes: {removed: ns.map(function(n) { return n.id; })}}]); + } + } + + + this.highlightNode = function(id, state) { + var i = 0, + j = 0; + var n = findNode(id, state); + var adjacentnode; + $(".debug").html(n.state); + + //highlight node + if (n !== undefined && n.state !== "chosen" && n.state !== "temp") { + this.removeHighlight(); + n.state = "chosen"; + + while (i < links.length) { + if (links[i]['source'] === n) { + adjacentnode = findNode(links[i]['target'].id, null); + if (adjacentnode.state !== "temp") adjacentnode.state = "exit"; + links[i]['state'] = "exit"; + + if(links[i]['target'].type==="chainlink"){ + console.log("chain"); + while (j < links.length) { + if(links[i]['target'].id===links[j]['target'].id && links[j]['target'].type==="chainlink" && links[j]['target'].state!=="temp"){ + adjacentnode = findNode(links[j]['source'].id, null); + if (adjacentnode.state !== "temp") adjacentnode.state = "enter"; + links[j]['state'] = "enter"; + } + j++; + } + } + j=0; + } + if (links[i]['target'] === n) { + adjacentnode = findNode(links[i]['source'].id, null); + if (adjacentnode.state !== "temp") adjacentnode.state = "enter"; + links[i]['state'] = "enter"; + } + i++; + } + } + } + + this.removeHighlight = function() { + var k = 0; + while (k < nodes.length) { + if (nodes[k]['state'] === "enter" || nodes[k]['state'] === "exit" || nodes[k]['state'] === "chosen") { + nodes[k]['state'] = "perm"; + } + k++; + } + var j = 0; + //highlight all connections + while (j < links.length) { + links[j]['state'] = "perm"; + j++; + } + } + + /* compareSubset: + * state: one of the optional states that defines a subgraph + * new_nodes: array of objects with id + * new_links: array of length two arrays [source_id, target_id] + * returns: true if current and new graph are homomorphic up to + * a single node id change. false otherwise + */ + this.compareSubset = function(state, new_nodes, new_links) { + // Note: the nodes include a state=='temp', type=='bubble' node + // but it's ok since it exists both in new_nodes and in state_nodes + var state_nodes = findNodes(null, state); + var state_links = findLinks(state).map(function(link) { + return [link.source.id, link.target.id]; + }).sort(); + var k; + var changed_old_id = undefined, changed_new_id = undefined; + var state_source, state_target, new_source, new_target; + var changed_nodes; + var verbose = false; // XXX should be global. should have only one global. sigh. + var set_old_id, set_new_id; + var new_id_to_name = {}; + + new_nodes.map(function (f) { + if (!f.name) { + f.name = f.id; + } + f.id = f.id.toLowerCase(); + new_id_to_name[f.id] = f.name; + if (verbose) { + console.log('new_id_to_name ' + f.id + ' -> ' + new_id_to_name[f.id]); + } + }); + new_nodes.sort(); + new_links.sort(); + if (new_nodes.length != state_nodes.length || new_links.length != state_links.length) { + if (verbose) { + console.log('not same size'); + } + return {graph_same: false}; + } + changed_nodes = util.set_diff(util.set_from_array(state_nodes.map(function(d) { return d.id.toLowerCase(); })), + util.set_from_array(new_nodes.map(function (f) { return f.id.toLowerCase(); }))); + // we allow any number of changed nodes as long as we it is 1 or 2 :) + if (changed_nodes.a_b.length <= 2) { + set_old_id = util.set_from_array(changed_nodes.a_b); + set_new_id = util.set_from_array(changed_nodes.b_a); + } else { + if (verbose) { + console.log('changed too many nodes'); + console.log(changed_nodes); + } + return {graph_same: false}; + } + for (k = 0 ; k < state_links.length ; ++k) { + state_source = state_links[k][0]; + state_target = state_links[k][1]; + new_source = new_links[k][0]; + new_target = new_links[k][1]; + if ((state_source != new_source && + !(state_source in set_old_id && new_source in set_new_id)) + || + (state_target != new_target && + !(state_target in set_old_id && new_target in set_new_id))) { + if (verbose) { + console.log('not same link: ' + + state_source + '->' + state_target + ' != ' + + new_source + '->' + new_target); + console.log(set_old_id); + console.log(set_new_id); + } + return {graph_same: false}; + } + } + return {graph_same: true, old_id: changed_nodes.a_b, new_id: changed_nodes.b_a, + new_name: changed_nodes.b_a.map(function (k) { return new_id_to_name[k]; })}; + } + + this.addLink = function(sourceId, targetId, name, state, drop_conjugator_links) { + sourceId = sourceId && sourceId.toLowerCase(); + targetId = targetId && targetId.toLowerCase(); + var sourceNode = findNode(sourceId, null); + var targetNode = findNode(targetId, null); + var found = findLink(sourceId,targetId,name); + + if (drop_conjugator_links && name && (name.replace(/ /g,"") === "and")) { + state = "temp"; + } + if (sourceNode === undefined || targetNode === undefined) { + return; + } + if (!found) { + var link = { + "source": sourceNode, + "target": targetNode, + "name": name, + "state": state + }; + links.push(link); + signal.signal(consts.APPLIED_GRAPH_DIFF, [{links: {add: [link]}}]); + } else { + found.name = name; + found.state = state; + } + } + + this.editLink = function(sourceId, targetId, newname, newstate) { + var link = findLink(sourceId, targetId, newname); + if (link !== undefined) { + link.name = newname; + if (newstate !== undefined) { + link.state = newstate; + } + } + } + + this.editLinkTarget = function(sourceId, targetId, newTarget) { + var link = findLink(sourceId, targetId, null); + if (link !== undefined) { + link.target = findNode(newTarget, null); + + } else { + + } + } + + this.editName = function(id, type, newname) { + var new_name = newname; + id = id && id.toLowerCase(); + var new_id = newname.toLowerCase(); + var index2 = undefined; + if (id != new_id) { + index2 = findNode(new_id, type); + } + var index = findNode(id, type); + var acceptReplace=true; + + if ((index !== undefined)) { + if ((index2 !== undefined)) { + acceptReplace = confirm('"' + index2.id + '" will replace "' + index.id + '", are you sure?'); + if(acceptReplace){ + for (var i = 0; i < links.length; i++) { + if (links[i].source === index) { + links[i].source = index2; + } + if (links[i].target === index) { + links[i].target = index2; + } + } + graph.removeNode(index.id,null); + } + }else{ + index.id = new_id; + index.name = new_name; + } + } + } + + this.editDates = function(id, type, start, end) { + var index = findNode(id, type); + if ((index !== undefined)) { + index.start = start; + index.end = end; + } + } + + /** + * editType: + * @return true if type changed + */ + this.editType = function(id, state, newtype) { + var index = findNode(id, state); + if ((index !== undefined)) { + index.type = newtype; + } + } + + this.editURL = function(id, state, url) { + var index = findNode(id, state); + if ((index === undefined)) return; + index.url = url; + } + + this.editState = function(id, state, newstate) { + var index = findNode(id.toLowerCase(), state); + if ((index !== undefined)) { + index.state = newstate; + } + } + + this.findCoordinates = function(id, type) { + var index = findNode(id, type); + if ((index !== undefined)) { + $('.typeselection').css('top', index.y - 90); + $('.typeselection').css('left', index.x - 230); + } + } + + this.removeLinks = function(state) { + var id = null; + var ls = findLinks(state); + for (var j = 0; j < ls.length; j++) { + var l = ls[j]; + var i = 0; + while (i < links.length) { + if (links[i] === l) links.splice(i, 1); + else i++; + } + } + } + + var findLink = function(sourceId, targetId, name) { + for (var i = 0; i < links.length; i++) { + if (links[i].source.id === sourceId && links[i].target.id === targetId) { + return links[i]; + } + } + } + + var findLinks = function(state) { + var foundLinks = []; + for (var i = 0; i < links.length; i++) { + if (links[i].state == state) { + foundLinks.push(links[i]); + } + } + return foundLinks; + } + + + var hasNode = function(id, state) { + var i; + id = id.toLowerCase(); + for (i = 0 ; i < nodes.length; ++i) { + if (nodes[i].id == id && nodes[i].state == state) { + return true; + } + } + return false; + } + this.hasNode = hasNode; + + var findNode = function(id, state) { + id = id && id.toLowerCase(); + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].id === id || nodes[i].state === state) + return nodes[i] + }; + } + + var findNodes = function(id, state) { + //id=id.toLowerCase(); + var foundNodes = []; + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].id === id || nodes[i].state === state) + foundNodes.push(nodes[i]); + } + return foundNodes; + } + + var findNodeIndex = function(id, state) { + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].id === id || nodes[i].state === state) + return i + }; + } + + function clear() { + nodes.length = 0; + links.length = 0; + } + this.clear = clear; + + function empty() { + return nodes.length == 0 && links.length == 0; + } + this.empty = empty; + + function load_from_json(json) { + var data = JSON.parse(json); + var i, node, link; + + clear(); + if (data == null) { + console.log('load callback: no data to load'); + return; + } + for(i = 0; i < data["nodes"].length; i++){ + node = data.nodes[i]; + this.addNodeNoHistory({id:node.id, name:node.name ? node.name : node.id, + type:node.type,state:"perm", + start:new Date(node.start), + end:new Date(node.end), + status:node.status, + url:node.url, + x: node.x, + y: node.y, + }); + textanalysis.autoSuggestAddName(node.id); + } + for(i = 0; i < data["links"].length; i++){ + link = data.links[i]; + this.addLink(link.source,link.target,link.name,"perm"); + } + this.clear_history(); + } + this.load_from_json = load_from_json; + + function save_to_json() { + var d = {"nodes":[], "links":[]}; + for(var i = 0 ; i < nodes.length ; i++){ + var node = nodes[i]; + d['nodes'].push({ + "id": node.id, + "name": node.name, + "type":node.type, + "state":"perm", + "start":node.start, + "end":node.end, + "status": node.status, + "url": node.url, + "x": node.x, + "y": node.y, + }); + } + for(var j=0 ; j < links.length ; j++){ + var link = links[j]; + d['links'].push({ + "source":link.source.id, + "target":link.target.id, + "name":link.name + }); + } + return JSON.stringify(d); + } + this.save_to_json = save_to_json; + + function set_user(user) { + this.user = user; + this.history = new History(this.user, $('svg g.zoom')[0]); + console.log('new user: ' + user); + } + this.set_user = set_user; + + function clear_history() { + if (this.history !== undefined) { + this.history.clear(); + } + } + this.clear_history = clear_history; + + var get_nodes = function() { return nodes; }; + this.nodes = get_nodes; + + var get_links = function() { return links; }; + this.links = get_links; +}; + + + return myGraph; +}); diff --git a/scripts/rhizicore.js b/scripts/rhizicore.js index 29e3ff3d..61754f81 100644 --- a/scripts/rhizicore.js +++ b/scripts/rhizicore.js @@ -1,8 +1,8 @@ "use strict" define('rhizicore', -['jquery', 'd3', 'consts', 'signal', 'util', 'history', 'textanalysis'], -function($, d3, consts, signal, util, history, textanalysis) { +['jquery', 'd3', 'consts', 'signal', 'util', 'history', 'textanalysis', 'model/graph'], +function($, d3, consts, signal, util, history, textanalysis, myGraph) { var History = history.History; var addednodes = []; @@ -13,436 +13,70 @@ var graphinterval = 0; var ganttTimer = 0; -var boxedin = false; - var deliverables = []; -var boxedin, nodetext, linktext, link, links, node, nodes, circle; +var circle; // <-- should not be module globals. var scrollValue = 0, zoomObject; -var force; - -function myGraph(el) { - - this.update = function(no_relayout) { - update(no_relayout); - } - - ///FUNCTIONS - this.addNode = function(id, type, state) { - var new_node = this.addNodeNoHistory( - {id:id, - name:id, - type:type, - state:state, - start:0, - end:0, - status:"unknown"}); - if (new_node) { - signal.signal(consts.APPLIED_GRAPH_DIFF, [{ - nodes: {add: [new_node]}}]); - } - } - - this.addNodeNoHistory = function(spec) { - // No history recorded - this is a helper for loading from files / constant graphs - var id = spec.id.toString().toLowerCase(); - var node = findNode(id, null); - var new_node = undefined; - - if (node === undefined) { - new_node = { - "id": id, - "name": spec.name, - "type": spec.type, - "state": spec.state, - "start": spec.start, - "end": spec.end, - "status": spec.status, - 'url': spec.url, - 'x': spec.x, - 'y': spec.y, - }; - nodes.push(new_node); - } - return new_node; - } - - this.removeNode = function(id, state) { - var i = 0; - id = id.toLowerCase(); - var n = findNode(id, state); - while (i < links.length) { - if ((links[i]['source'] === n) || (links[i]['target'] == n)) links.splice(i, 1); - else i++; - } - var index = findNodeIndex(id, state); - if (index !== undefined) { - nodes.splice(index, 1); - } - signal.signal(consts.APPLIED_GRAPH_DIFF, [{nodes: {removed: [id]}}]); - } - - this.removeNodes = function(state) { - var id = null; - var ns = findNodes(null, state); - for (var j = 0; j < ns.length; j++) { - var n = ns[j]; - var i = 0; - while (i < links.length) { - if ((links[i]['source'] === n) || (links[i]['target'] == n)) links.splice(i, 1); - else i++; - } - var index = findNodeIndex(id, state); - if (index !== undefined) { - nodes.splice(index, 1); - } - } - if (ns.length > 0) { - signal.signal(consts.APPLIED_GRAPH_DIFF, [{nodes: {removed: ns.map(function(n) { return n.id; })}}]); - } - } - - - this.highlightNode = function(id, state) { - var i = 0, - j = 0; - var n = findNode(id, state); - var adjacentnode; - $(".debug").html(n.state); - - //highlight node - if (n !== undefined && n.state !== "chosen" && n.state !== "temp") { - this.removeHighlight(); - n.state = "chosen"; - - while (i < links.length) { - if (links[i]['source'] === n) { - adjacentnode = findNode(links[i]['target'].id, null); - if (adjacentnode.state !== "temp") adjacentnode.state = "exit"; - links[i]['state'] = "exit"; - - if(links[i]['target'].type==="chainlink"){ - console.log("chain"); - while (j < links.length) { - if(links[i]['target'].id===links[j]['target'].id && links[j]['target'].type==="chainlink" && links[j]['target'].state!=="temp"){ - adjacentnode = findNode(links[j]['source'].id, null); - if (adjacentnode.state !== "temp") adjacentnode.state = "enter"; - links[j]['state'] = "enter"; - } - j++; - } - } - j=0; - } - if (links[i]['target'] === n) { - adjacentnode = findNode(links[i]['source'].id, null); - if (adjacentnode.state !== "temp") adjacentnode.state = "enter"; - links[i]['state'] = "enter"; - } - i++; - } - } - } - - this.removeHighlight = function() { - var k = 0; - while (k < nodes.length) { - if (nodes[k]['state'] === "enter" || nodes[k]['state'] === "exit" || nodes[k]['state'] === "chosen") { - nodes[k]['state'] = "perm"; - } - k++; - } - var j = 0; - //highlight all connections - while (j < links.length) { - links[j]['state'] = "perm"; - j++; - } - } - - /* compareSubset: - * state: one of the optional states that defines a subgraph - * new_nodes: array of objects with id - * new_links: array of length two arrays [source_id, target_id] - * returns: true if current and new graph are homomorphic up to - * a single node id change. false otherwise - */ - this.compareSubset = function(state, new_nodes, new_links) { - // Note: the nodes include a state=='temp', type=='bubble' node - // but it's ok since it exists both in new_nodes and in state_nodes - var state_nodes = findNodes(null, state); - var state_links = findLinks(state).map(function(link) { - return [link.source.id, link.target.id]; - }).sort(); - var k; - var changed_old_id = undefined, changed_new_id = undefined; - var state_source, state_target, new_source, new_target; - var changed_nodes; - var verbose = false; // XXX should be global. should have only one global. sigh. - var set_old_id, set_new_id; - var new_id_to_name = {}; - - new_nodes.map(function (f) { - if (!f.name) { - f.name = f.id; - } - f.id = f.id.toLowerCase(); - new_id_to_name[f.id] = f.name; - if (verbose) { - console.log('new_id_to_name ' + f.id + ' -> ' + new_id_to_name[f.id]); - } - }); - new_nodes.sort(); - new_links.sort(); - if (new_nodes.length != state_nodes.length || new_links.length != state_links.length) { - if (verbose) { - console.log('not same size'); - } - return {graph_same: false}; - } - changed_nodes = util.set_diff(util.set_from_array(state_nodes.map(function(d) { return d.id.toLowerCase(); })), - util.set_from_array(new_nodes.map(function (f) { return f.id.toLowerCase(); }))); - // we allow any number of changed nodes as long as we it is 1 or 2 :) - if (changed_nodes.a_b.length <= 2) { - set_old_id = util.set_from_array(changed_nodes.a_b); - set_new_id = util.set_from_array(changed_nodes.b_a); - } else { - if (verbose) { - console.log('changed too many nodes'); - console.log(changed_nodes); - } - return {graph_same: false}; - } - for (k = 0 ; k < state_links.length ; ++k) { - state_source = state_links[k][0]; - state_target = state_links[k][1]; - new_source = new_links[k][0]; - new_target = new_links[k][1]; - if ((state_source != new_source && - !(state_source in set_old_id && new_source in set_new_id)) - || - (state_target != new_target && - !(state_target in set_old_id && new_target in set_new_id))) { - if (verbose) { - console.log('not same link: ' + - state_source + '->' + state_target + ' != ' + - new_source + '->' + new_target); - console.log(set_old_id); - console.log(set_new_id); - } - return {graph_same: false}; - } - } - return {graph_same: true, old_id: changed_nodes.a_b, new_id: changed_nodes.b_a, - new_name: changed_nodes.b_a.map(function (k) { return new_id_to_name[k]; })}; - } - - this.addLink = function(sourceId, targetId, name, state, drop_conjugator_links) { - sourceId = sourceId && sourceId.toLowerCase(); - targetId = targetId && targetId.toLowerCase(); - var sourceNode = findNode(sourceId, null); - var targetNode = findNode(targetId, null); - var found = findLink(sourceId,targetId,name); - - if (drop_conjugator_links && name && (name.replace(/ /g,"") === "and")) { - state = "temp"; - } - if (sourceNode === undefined || targetNode === undefined) { - return; - } - if (!found) { - var link = { - "source": sourceNode, - "target": targetNode, - "name": name, - "state": state - }; - links.push(link); - signal.signal(consts.APPLIED_GRAPH_DIFF, [{links: {add: [link]}}]); - } else { - found.name = name; - found.state = state; - } - } - - this.editLink = function(sourceId, targetId, newname, newstate) { - var link = findLink(sourceId, targetId, newname); - if (link !== undefined) { - link.name = newname; - if (newstate !== undefined) { - link.state = newstate; - } - } - } - - this.editLinkTarget = function(sourceId, targetId, newTarget) { - var link = findLink(sourceId, targetId, null); - if (link !== undefined) { - link.target = findNode(newTarget, null); +var graph; - } else { +var drag; - } - } - - this.editName = function(id, type, newname) { - var new_name = newname; - id = id && id.toLowerCase(); - var new_id = newname.toLowerCase(); - var index2 = undefined; - if (id != new_id) { - index2 = findNode(new_id, type); - } - var index = findNode(id, type); - var acceptReplace=true; - - if ((index !== undefined)) { - if ((index2 !== undefined)) { - acceptReplace = confirm('"' + index2.id + '" will replace "' + index.id + '", are you sure?'); - if(acceptReplace){ - for (var i = 0; i < links.length; i++) { - if (links[i].source === index) { - links[i].source = index2; - } - if (links[i].target === index) { - links[i].target = index2; - } - } - graph.removeNode(index.id,null); - } - }else{ - index.id = new_id; - index.name = new_name; - } - } - } - - this.editDates = function(id, type, start, end) { - var index = findNode(id, type); - if ((index !== undefined)) { - index.start = start; - index.end = end; - } - } - - this.editType = function(id, state, newtype) { - var index = findNode(id, state); - if ((index !== undefined)) { - index.type = newtype; - update(true); - } - } - - this.editURL = function(id, state, url) { - var index = findNode(id, state); - if ((index === undefined)) return; - index.url = url; - update(true); - } - - this.editState = function(id, state, newstate) { - var index = findNode(id.toLowerCase(), state); - if ((index !== undefined)) { - index.state = newstate; - } - } +var force; - this.findCoordinates = function(id, type) { - var index = findNode(id, type); - if ((index !== undefined)) { - $('.typeselection').css('top', index.y - 90); - $('.typeselection').css('left', index.x - 230); - } - } +var state_to_link_class = { + enter:'enterlink graph', + exit:'exitlink graph', +}; - this.recenterZoom = function() { - vis.attr("transform", "translate(0,0)scale(1)"); - } +function recenterZoom() { + vis.attr("transform", "translate(0,0)scale(1)"); +} - this.removeLinks = function(state) { - var id = null; - var ls = findLinks(state); - for (var j = 0; j < ls.length; j++) { - var l = ls[j]; - var i = 0; - while (i < links.length) { - if (links[i] === l) links.splice(i, 1); - else i++; - } - } - } +var initDrawingArea = function () { - var findLink = function(sourceId, targetId, name) { - for (var i = 0; i < links.length; i++) { - if (links[i].source.id === sourceId && links[i].target.id === targetId) { - return links[i]; - } + function zoom() { + if (graphstate === "GRAPH") { + vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } - } - - var findLinks = function(state) { - var foundLinks = []; - for (var i = 0; i < links.length; i++) { - if (links[i].state == state) { - foundLinks.push(links[i]); - } + if (graphstate === "GANTT") { + vis.attr("transform", "translate(0,0)scale(1)"); } - return foundLinks; } - - var hasNode = function(id, state) { - var i; - id = id.toLowerCase(); - for (i = 0 ; i < nodes.length; ++i) { - if (nodes[i].id == id && nodes[i].state == state) { - return true; - } - } - return false; + function dragstarted(d) { + d3.event.sourceEvent.stopPropagation(); + d3.select(this).classed("dragging", true); + d.dragstart = {clientX:d3.event.sourceEvent.clientX, clientY:d3.event.sourceEvent.clientY}; + force.stop(); } - this.hasNode = hasNode; - var findNode = function(id, state) { - id = id && id.toLowerCase(); - for (var i = 0; i < nodes.length; i++) { - if (nodes[i].id === id || nodes[i].state === state) - return nodes[i] - }; + function dragged(d) { + d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); + tick(); } - var findNodes = function(id, state) { - //id=id.toLowerCase(); - var foundNodes = []; - for (var i = 0; i < nodes.length; i++) { - if (nodes[i].id === id || nodes[i].state === state) - foundNodes.push(nodes[i]); + function dragended(d) { + d3.select(this).classed("dragging", false); + d3.select(this).classed("fixed", true); + d3.select(this).attr("dx", d3.event.x).attr("dy", d3.event.y); + if (d.dragstart.clientX - d3.event.sourceEvent.clientX != 0 || + d.dragstart.clientY - d3.event.sourceEvent.clientY != 0) { + tick(); + force.resume(); } - return foundNodes; - } - - var findNodeIndex = function(id, state) { - for (var i = 0; i < nodes.length; i++) { - if (nodes[i].id === id || nodes[i].state === state) - return i - }; } + var el = document.body; - - ///GRAPH BUILDER - var w = $(el).innerWidth(), - h = $(el).innerHeight(); - - var color = d3.scale.category20(); + graph = new myGraph(el); //Zoom scale behavior in zoom.js zoomObject = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); - - vis = this.vis = d3.select(el).append("svg:svg") + + vis = d3.select(el).append("svg:svg") .attr("width", '100%') .attr("height", '100%') .attr("pointer-events", "all") @@ -463,129 +97,14 @@ function myGraph(el) { // all links are below the nodes we group them under a single g vis.append("g").attr("id", "link-group"); - function zoom() { - if (graphstate === "GRAPH") { - vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); - } - if (graphstate === "GANTT") { - vis.attr("transform", "translate(0,0)scale(1)"); - } - } - - var drag = d3.behavior.drag() + drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); - function dragstarted(d) { - d3.event.sourceEvent.stopPropagation(); - d3.select(this).classed("dragging", true); - d.dragstart = {clientX:d3.event.sourceEvent.clientX, clientY:d3.event.sourceEvent.clientY}; - force.stop(); - } - - function dragged(d) { - d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); - tick(); - } - - function dragended(d) { - d3.select(this).classed("dragging", false); - d3.select(this).classed("fixed", true); - d3.select(this).attr("dx", d3.event.x).attr("dy", d3.event.y); - if (d.dragstart.clientX - d3.event.sourceEvent.clientX != 0 || - d.dragstart.clientY - d3.event.sourceEvent.clientY != 0) { - tick(); - force.resume(); - } - } - - function clear() { - nodes.length = 0; - links.length = 0; - } - this.clear = clear; - - function empty() { - return nodes.length == 0 && links.length == 0; - } - this.empty = empty; - - function load_from_json(json) { - var data = JSON.parse(json); - var i, node, link; - - clear(); - if (data == null) { - console.log('load callback: no data to load'); - return; - } - for(i = 0; i < data["nodes"].length; i++){ - node = data.nodes[i]; - graph.addNodeNoHistory({id:node.id, name:node.name ? node.name : node.id, - type:node.type,state:"perm", - start:new Date(node.start), - end:new Date(node.end), - status:node.status, - url:node.url, - x: node.x, - y: node.y, - }); - textanalysis.autoSuggestAddName(node.id); - } - for(i = 0; i < data["links"].length; i++){ - link = data.links[i]; - graph.addLink(link.source,link.target,link.name,"perm"); - } - graph.recenterZoom(); - graph.update(false); - graph.clear_history(); - } - this.load_from_json = load_from_json; - - function save_to_json() { - var d = {"nodes":[], "links":[]}; - for(var i = 0 ; i < nodes.length ; i++){ - var node = nodes[i]; - d['nodes'].push({ - "id": node.id, - "name": node.name, - "type":node.type, - "state":"perm", - "start":node.start, - "end":node.end, - "status": node.status, - "url": node.url, - "x": node.x, - "y": node.y, - }); - } - for(var j=0 ; j < links.length ; j++){ - var link = links[j]; - d['links'].push({ - "source":link.source.id, - "target":link.target.id, - "name":link.name - }); - } - return JSON.stringify(d); - } - this.save_to_json = save_to_json; - - function set_user(user) { - this.user = user; - this.history = new History(this.user, $('svg g.zoom')[0]); - console.log('new user: ' + user); - } - this.set_user = set_user; - - function clear_history() { - if (this.history !== undefined) { - this.history.clear(); - } - } - this.clear_history = clear_history; + var w = $(el).innerWidth(), + h = $(el).innerHeight(); force = d3.layout.force() .distance(120) @@ -595,223 +114,219 @@ function myGraph(el) { .on("tick", tick) .start(); - nodes = force.nodes(); - links = force.links(); + graph.update = update; +} - var state_to_link_class = { - enter:'enterlink graph', - exit:'exitlink graph', - }; +initDrawingArea(); - var update = function(no_relayout) { - link = vis.select("#link-group").selectAll(".link") - .data(links); +function update(no_relayout) { + var node, link, linktext, nodetext; - link.enter().append("svg:defs").selectAll("marker") - .data(["end"]) // Different link/path types can be defined here - .enter().append("svg:marker") // This section adds in the arrows - .attr("id", String) - .attr("viewBox", "0 -5 10 10") - .attr("refX", 22) - .attr("refY", -1.5) - .attr("markerWidth", 4) - .attr("markerHeight", 4) - .attr("orient", "auto") - .attr("class", "graph") - .style("fill", function(d){ - if (d.state==="enter" || d.state==="exit") { - return "EDE275"; - } else { - return "#aaa"; - } - }) - .append("svg:path") - .attr("d", "M0,-5L10,0L0,5"); + link = vis.select("#link-group").selectAll(".link") + .data(graph.links()); - link.enter().append("path") - .attr("d", "M0,-5L10,0L0,5") - .attr("class", function(d) { - return state_to_link_class[d.state] || 'link graph'; + link.enter().append("svg:defs").selectAll("marker") + .data(["end"]) // Different link/path types can be defined here + .enter().append("svg:marker") // This section adds in the arrows + .attr("id", String) + .attr("viewBox", "0 -5 10 10") + .attr("refX", 22) + .attr("refY", -1.5) + .attr("markerWidth", 4) + .attr("markerHeight", 4) + .attr("orient", "auto") + .attr("class", "graph") + .style("fill", function(d){ + if (d.state==="enter" || d.state==="exit") { + return "EDE275"; + } else { + return "#aaa"; + } }) - .attr("marker-end", "url(#end)") - .on("click", function(d, i) { - //$('#textanalyser').val("node("+d.source.id+") -> "+d.name+" -> node("+d.target.id+")"); - });; - link.style("stroke-dasharray", function(d,i){ - if(d.name && d.name.replace(/ /g,"")=="and" && d.state==="temp") - return "3,3"; - else - return "0,0"; - }); - - link.exit().remove(); + .append("svg:path") + .attr("d", "M0,-5L10,0L0,5"); - linktext = vis.selectAll(".linklabel").data(links); - linktext.enter() - .append("text") - .attr("class", "linklabel graph") - .attr("text-anchor", "middle") - .on("click", function(d, i) { - if(d.state !== "temp") { - editLink(d, i); - } - }); + link.enter().append("path") + .attr("d", "M0,-5L10,0L0,5") + .attr("class", function(d) { + return state_to_link_class[d.state] || 'link graph'; + }) + .attr("marker-end", "url(#end)") + .on("click", function(d, i) { + //$('#textanalyser').val("node("+d.source.id+") -> "+d.name+" -> node("+d.target.id+")"); + });; + link.style("stroke-dasharray", function(d,i){ + if(d.name && d.name.replace(/ /g,"")=="and" && d.state==="temp") + return "3,3"; + else + return "0,0"; + }); - linktext - .text(function(d) { - var name = d.name || ""; - if (!(d.target.state === "temp" || - d.source.state === "chosen" || d.target.state === "chosen")) { - return ""; - } - if (name.length < 25 || d.source.state === "chosen" || - d.target.state === "chosen" || d.state==="temp") { - return name; - } else { - return name.substring(0, 14) + "..."; - } - }); + link.exit().remove(); - linktext.exit().remove(); + linktext = vis.selectAll(".linklabel").data(graph.links()); + linktext.enter() + .append("text") + .attr("class", "linklabel graph") + .attr("text-anchor", "middle") + .on("click", function(d, i) { + if(d.state !== "temp") { + editLink(d, i); + } + }); - node = vis.selectAll(".node") - .data(nodes, function(d) { - return d.id; - }); + linktext + .text(function(d) { + var name = d.name || ""; + if (!(d.target.state === "temp" || + d.source.state === "chosen" || d.target.state === "chosen")) { + return ""; + } + if (name.length < 25 || d.source.state === "chosen" || + d.target.state === "chosen" || d.state==="temp") { + return name; + } else { + return name.substring(0, 14) + "..."; + } + }); - var nodeEnter = node.enter() - .append("g").attr('class', 'node') - .attr('visibility', 'hidden') // made visible on first tick - .on("click", function(d, i) { - if (d3.event.defaultPrevented) { - // drag happened, ignore click https://github.com/mbostock/d3/wiki/Drag-Behavior#on - return; - } - if(d.state!=="temp"){ - editNode(d, i); - showInfo(d, i); - } - }) - .call(drag); + linktext.exit().remove(); - nodetext = nodeEnter.insert("text") - .attr("class", "nodetext graph") - .attr("dx", 15) - .attr("dy", ".30em"); + node = vis.selectAll(".node") + .data(graph.nodes(), function(d) { + return d.id; + }); - node.select('g.node text') - .text(function(d) { - if (!d.name) { - return ""; - } - if (d.state === "temp" || d.state === 'chosen') { - return d.name; - } else { - if (d.name.length < 28) { - return d.name; - } else { - return d.name.substring(0, 25) + "..."; - } - } - }); + var nodeEnter = node.enter() + .append("g").attr('class', 'node') + .attr('visibility', 'hidden') // made visible on first tick + .on("click", function(d, i) { + if (d3.event.defaultPrevented) { + // drag happened, ignore click https://github.com/mbostock/d3/wiki/Drag-Behavior#on + return; + } + if(d.state!=="temp"){ + editNode(d, i); + showInfo(d, i); + } + }) + .call(drag); - circle = nodeEnter.insert("circle"); - node.select('g.node circle') - .attr("class", "circle graph") - .attr("r", function(d) { - return customSize(d.type) - 2; - }) - .style("fill", function(d) { - return customColor(d.type); - }) - .style("stroke", function(d) { - if (d.state === "chosen") return "#EDE275"; - if (d.state === "enter") return "#EDE275"; - if (d.type === "bubble") return "#101010"; - if (d.state === "exit") return "#EDE275"; - if (d.type === "chainlink") return "#AAA"; + nodetext = nodeEnter.insert("text") + .attr("class", "nodetext graph") + .attr("dx", 15) + .attr("dy", ".30em"); - return "#fff"; - }) - .style("stroke-width", function(d) { - if (d.state === "temp" && d.type !== "empty" || d.state === "chosen") return "3px"; - else return "1.5px"; - }) - .style("box-shadow", function(d) { - if (d.state === "temp") return "0 0 40px #FFFF8F"; - else return "0 0 0px #FFFF8F"; - }) - .on("click", function(d, i) { - if (d3.event.defaultPrevented) { - // drag happened, ignore click https://github.com/mbostock/d3/wiki/Drag-Behavior#on - return; - } - d3.event.stopPropagation(); - if(d.state!=="temp") { - showInfo(d, i); + node.select('g.node text') + .text(function(d) { + if (!d.name) { + return ""; + } + if (d.state === "temp" || d.state === 'chosen') { + return d.name; + } else { + if (d.name.length < 28) { + return d.name; } else { - graph.removeHighlight(); + return d.name.substring(0, 25) + "..."; } - graph.update(true); - }); + } + }); - //if(graphstate==="GANTT"){ - nodeEnter.append("svg:image") - .attr("class", "status graph") - .attr('x', -7) - .attr('y', -8) - .attr('width', 15) - .attr('height', 15) - .attr("xlink:href", function(d) { - switch (d.status) { - case "done": - return "images/check.png"; - break; - case "current": - return "images/wait.png"; - break; - case "waiting": - return "images/cross.png"; - break; - } - }) - .on("click", function(d, i) { - if(d.state!=="temp")showInfo(d, i); - }); - //} + circle = nodeEnter.insert("circle"); + node.select('g.node circle') + .attr("class", "circle graph") + .attr("r", function(d) { + return customSize(d.type) - 2; + }) + .style("fill", function(d) { + return customColor(d.type); + }) + .style("stroke", function(d) { + if (d.state === "chosen") return "#EDE275"; + if (d.state === "enter") return "#EDE275"; + if (d.type === "bubble") return "#101010"; + if (d.state === "exit") return "#EDE275"; + if (d.type === "chainlink") return "#AAA"; - node.exit().remove(); + return "#fff"; + }) + .style("stroke-width", function(d) { + if (d.state === "temp" && d.type !== "empty" || d.state === "chosen") return "3px"; + else return "1.5px"; + }) + .style("box-shadow", function(d) { + if (d.state === "temp") return "0 0 40px #FFFF8F"; + else return "0 0 0px #FFFF8F"; + }) + .on("click", function(d, i) { + if (d3.event.defaultPrevented) { + // drag happened, ignore click https://github.com/mbostock/d3/wiki/Drag-Behavior#on + return; + } + d3.event.stopPropagation(); + if(d.state!=="temp") { + showInfo(d, i); + } else { + graph.removeHighlight(); + } + update(true); + }); - //update deliverables - deliverables = []; - for (var i = 0; i < nodes.length; i++) { - var current = nodes[i]; - if (current.type === "deliverable") { - deliverables.push({ - "id": nodes[i].id, - "startdate": nodes[i].start, - "enddate": nodes[i].end - }); + //if(graphstate==="GANTT"){ + nodeEnter.append("svg:image") + .attr("class", "status graph") + .attr('x', -7) + .attr('y', -8) + .attr('width', 15) + .attr('height', 15) + .attr("xlink:href", function(d) { + switch (d.status) { + case "done": + return "images/check.png"; + break; + case "current": + return "images/wait.png"; + break; + case "waiting": + return "images/cross.png"; + break; } - //Do something - } + }) + .on("click", function(d, i) { + if(d.state!=="temp")showInfo(d, i); + }); + //} - force.nodes(nodes) - .links(links) - if (no_relayout) { - // XXX If we are stopped we need to update the text of the links at least, - // and this is the simplest way - tick(); - } else { - force.alpha(0.1).start(); + node.exit().remove(); + + //update deliverables + deliverables = []; + var nodes = graph.nodes(); + for (var i = 0; i < nodes.length; i++) { + var current = nodes[i]; + if (current.type === "deliverable") { + deliverables.push({ + "id": nodes[i].id, + "startdate": nodes[i].start, + "enddate": nodes[i].end + }); } + //Do something } - update(false); + force.nodes(graph.nodes()) + .links(graph.links()) + if (no_relayout) { + // XXX If we are stopped we need to update the text of the links at least, + // and this is the simplest way + tick(); + } else { + force.alpha(0.1).start(); + } } -var graph = new myGraph(document.body); var debug_print = function(message) { var element = $(".debug"); @@ -834,6 +349,13 @@ var newnodes=1; function tick(e) { //console.log(e); //$(".debug").html(force.alpha()); + var node = vis.selectAll(".node") + .data(force.nodes(), function(d) { + return d.id; + }); + var link = vis.select("#link-group").selectAll(".link") + .data(graph.links()); + var linktext = vis.selectAll(".linklabel").data(graph.links()); function transform(d) { if (graphstate === "GRAPH" || d.type === "deliverable") { @@ -856,7 +378,7 @@ function tick(e) { var today = new Date(); var missingcounter = 0; - nodes.forEach(function(d, i) { + graph.nodes().forEach(function(d, i) { if ((d.start === 0 || d.end === 0)) { d.x = 450 + missingcounter * 100; d.y = window.innerWidth / 2; @@ -886,7 +408,7 @@ function tick(e) { //circles animation var tempcounter = 0; var temptotal = 0; - nodes.forEach(function(d, i) { + graph.nodes().forEach(function(d, i) { if (d.state === "temp" && d.type!=="chainlink" && d.type!=="bubble") { temptotal++; } @@ -898,7 +420,7 @@ function tick(e) { newnodes=temptotal; } if(newnodes<1)newnodes=1; - nodes.forEach(function(d, i) { + graph.nodes().forEach(function(d, i) { if (d.state === "temp") { tempcounter++; if(d.type==="chainlink" || d.type==="bubble"){ @@ -914,19 +436,6 @@ function tick(e) { }); } - if (boxedin) { - circle.attr("cx", function(d) { - return d.x = Math.max(14, Math.min(w - 14, d.x)); - }) - .attr("cy", function(d) { - return d.y = Math.max(114, Math.min(h - 14, d.y)); - }); - - nodetext.attr("transform", transform); - } else { - node.attr("transform", transform); - } - link.attr("d", function(d) { if (graphstate === "GRAPH") { var dx = d.target.x - d.source.x, @@ -958,6 +467,8 @@ function tick(e) { } }); + node.attr("transform", transform); + // After initial placement we can make the nodes visible. //links.attr('visibility', 'visible'); node.attr('visibility', 'visible'); @@ -1164,9 +675,15 @@ function expand(obj){ } obj.size = Math.max(obj.savesize, obj.value.length); } + return { expand: expand, graph: graph, force: force, + load_from_json: function(result) { + graph.load_from_json(result); + recenterZoom(); + update(false); + } } }); /* close define call */ |