From ba6e95f3d76b84571ef2cf016b26fc98b2d75c43 Mon Sep 17 00:00:00 2001 From: LV-426 Date: Mon, 10 Nov 2014 16:09:54 +0200 Subject: rename rhizicore -> rz_core, move towards common rz_ prefix --- scripts/buttons.js | 2 +- scripts/drag_n_drop.js | 2 +- scripts/history.js | 2 +- scripts/main.js | 2 +- scripts/rhizicore.js | 740 --------------------------------------------- scripts/rz_core.js | 740 +++++++++++++++++++++++++++++++++++++++++++++ scripts/textanalysis.ui.js | 2 +- 7 files changed, 745 insertions(+), 745 deletions(-) delete mode 100644 scripts/rhizicore.js create mode 100644 scripts/rz_core.js (limited to 'scripts') diff --git a/scripts/buttons.js b/scripts/buttons.js index ef56594d..19c772eb 100644 --- a/scripts/buttons.js +++ b/scripts/buttons.js @@ -1,6 +1,6 @@ "use strict" -define('buttons', ['jquery', 'FileSaver', 'rhizicore'], function ($, saveAs, RZ) { +define('buttons', ['jquery', 'FileSaver', 'rz_core'], function ($, saveAs, RZ) { $('.tutorial').click(function(){}); var key="#47989379"; diff --git a/scripts/drag_n_drop.js b/scripts/drag_n_drop.js index 0f16c6fd..1669a58a 100644 --- a/scripts/drag_n_drop.js +++ b/scripts/drag_n_drop.js @@ -1,4 +1,4 @@ -define('drag_n_drop', ['jquery', 'jquery-ui', 'rhizicore'], function($, __unused_jqueryui, RZ) { +define('drag_n_drop', ['jquery', 'jquery-ui', 'rz_core'], function($, __unused_jqueryui, RZ) { function init() { console.log('rhizi: init drag-n-drop'); diff --git a/scripts/history.js b/scripts/history.js index 72f9e846..3e231329 100644 --- a/scripts/history.js +++ b/scripts/history.js @@ -6,7 +6,7 @@ // exceptions but that shouldn't break the console, as evidenced by the '__commandLineAPI is not defined' // error below. // -// Uncaught TypeError: Can't add property addednodes, object is not extensible rhizicore.js:4 +// Uncaught TypeError: Can't add property addednodes, object is not extensible rz_core.js:4 // Uncaught TypeError: Can't add property text, object is not extensible textanalysis.js:3 // Uncaught TypeError: Can't add property key, object is not extensible buttons.js:5 // Uncaught ReferenceError: sentence is not defined robot.js:11 diff --git a/scripts/main.js b/scripts/main.js index 1c029b2d..bc246925 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,4 +1,4 @@ -define('main', ['rhizicore', 'textanalysis.ui', 'buttons', 'history', 'drag_n_drop', 'robot'], +define('main', ['rz_core', 'textanalysis.ui', 'buttons', 'history', 'drag_n_drop', 'robot'], function(RZ, textanalysis_ui, buttons, history, drag_n_drop, robot) { return { main: function() { diff --git a/scripts/rhizicore.js b/scripts/rhizicore.js deleted file mode 100644 index 588e240a..00000000 --- a/scripts/rhizicore.js +++ /dev/null @@ -1,740 +0,0 @@ -"use strict" - -define('rhizicore', -['jquery', 'd3', 'consts', 'signal', 'util', 'model/graph'], -function($, d3, consts, signal, util, model_graph) { - -var addednodes = []; - -var vis; - -var graphstate = "GRAPH"; -var graphinterval = 0; - -var ganttTimer = 0; - -var deliverables = []; - -var circle; // <-- should not be module globals. - -var scrollValue = 0, - zoomObject; - -var graph; - -var drag; - -var force; - -var state_to_link_class = { - enter:'enterlink graph', - exit:'exitlink graph', -}; - -function recenterZoom() { - vis.attr("transform", "translate(0,0)scale(1)"); -} - -var initDrawingArea = function () { - - 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)"); - } - } - - 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(); - } - } - - var el = document.body; - - graph = new model_graph.Graph(el); - - //Zoom scale behavior in zoom.js - zoomObject = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); - - vis = d3.select(el).append("svg:svg") - .attr('id', 'canvas_d3') - .attr("width", '100%') - .attr("height", '100%') - .attr("pointer-events", "all") - .call(zoomObject) - .append("g") - .attr("class", "zoom"); - - // TODO: why do we need this huge overlay (hugeness also not constant) - vis.append("rect") - .attr("class", "overlay graph") - .attr("width", $(el).innerWidth() * 12) - .attr("height", $(el).innerHeight() * 12) - .attr("x", -$(el).innerWidth() * 5) - .attr("y", -$(el).innerHeight() * 5); - $('.overlay').click(mousedown); - - // SVG rendering order is last rendered on top, so to make sure - // all links are below the nodes we group them under a single g - vis.append("g").attr("id", "link-group"); - - drag = d3.behavior.drag() - .origin(function(d) { return d; }) - .on("dragstart", dragstarted) - .on("drag", dragged) - .on("dragend", dragended); - - var w = $(el).innerWidth(), - h = $(el).innerHeight(); - - force = d3.layout.force() - .distance(120) - .gravity(0.12) - .charge(-1800) - .size([w, h]) - .on("tick", tick) - .start(); - - graph.update = update; -} - -initDrawingArea(); - -function update(no_relayout) { - var node, link, linktext, nodetext; - - link = vis.select("#link-group").selectAll(".link") - .data(graph.links()); - - 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.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"; - }); - - link.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); - } - }); - - 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) + "..."; - } - }); - - linktext.exit().remove(); - - node = vis.selectAll(".node") - .data(graph.nodes(), function(d) { - return d.id; - }); - - 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(this, d, i); - showInfo(d, i); - } - }) - .call(drag); - - nodetext = nodeEnter.insert("text") - .attr("class", "nodetext graph") - .attr("dx", 15) - .attr("dy", ".30em"); - - node.select('g.node text') - .text(function(d) { - if (!d.name) { - return ""; - } - if (d.state === "temp" || d.state === 'chosen' - || d.state === "enter" || d.state === "exit") { - return d.name; - } else { - if (d.name.length < 28) { - return d.name; - } else { - return d.name.substring(0, 25) + "..."; - } - } - }); - - 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"; - - 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 { - removeHighlight(); - } - 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); - }); - //} - - 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 - } - - 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 debug_print = function(message) { - var element = $(".debug"); - if (element.length == 1) { - element.html(message); - } else { - console.log(message); - } -} - -function check_for_nan(x) { - if (Number.isNaN(x)) { - console.log('nan problem'); - force.stop(); - } - return Number.isNaN(x); -} - -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") { - if (check_for_nan(d.x) || check_for_nan(d.y)) { - return; - } - if (d.state === "temp") { - return "translate(" + d.x + "," + d.y + ")"; - } else { - return "translate(" + d.x + "," + d.y + ")"; - } - } else { - return "translate(0,0)"; - } - return "translate(" + d.x + "," + d.y + ")"; - } - - if (graphstate === "GANTT") { - var k = 20 * e.alpha; - var today = new Date(); - var missingcounter = 0; - - graph.nodes().forEach(function(d, i) { - if ((d.start === 0 || d.end === 0)) { - d.x = 450 + missingcounter * 100; - d.y = window.innerWidth / 2; - if (missingcounter >= 6) { - d.x = 450 + (missingcounter - 6) * 100; - d.y = window.innerWidth / 2 + 50; - } - missingcounter++; - } else { - //var min= 150+graphinterval*Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft(); - //var max= 150+graphinterval*Math.ceil(Math.abs(d.end.getTime() - d.start.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft(); - //d.x = min+Math.sin(today.getTime()/1000*Math.PI*2/10)*max; - ganttTimer++; - if (ganttTimer < 3000) { - d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) * ganttTimer / 3000; - d.y = 150 + d.start.getHours() * 17; - } else { - d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)); - d.y = 150 + d.start.getHours() * 17; - } - } - if (d.state === "chosen") { - scrollValue = d.x; - } - }); - } else { - //circles animation - var tempcounter = 0; - var temptotal = 0; - graph.nodes().forEach(function(d, i) { - if (d.state === "temp" && d.type!=="chainlink" && d.type!=="bubble") { - temptotal++; - } - }); - if(temptotal!==newnodes){ - newnodes+=temptotal/15/(newnodes*newnodes); - } - if(newnodes>=temptotal){ - newnodes=temptotal; - } - if(newnodes<1)newnodes=1; - graph.nodes().forEach(function(d, i) { - if (d.state === "temp") { - tempcounter++; - if(d.type==="chainlink" || d.type==="bubble"){ - d.x = window.innerWidth / 2; - d.y = window.innerHeight / 2; - } else { - d.x = window.innerWidth / 2 + (60+newnodes*20) * Math.cos(-Math.PI+Math.PI * 2 * (tempcounter-1) / newnodes+0.3); - d.y = window.innerHeight / 2 + (60+newnodes*20) * Math.sin(-Math.PI+Math.PI * 2 * (tempcounter-1) / newnodes+0.3); - } - check_for_nan(d.x); - check_for_nan(d.y); - } - }); - } - - link.attr("d", function(d) { - if (graphstate === "GRAPH") { - var dx = d.target.x - d.source.x, - dy = d.target.y - d.source.y, - dr = Math.sqrt(dx * dx + dy * dy); - return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; - } else if (graphstate === "GANTT") { - if (d.state === "enter" || d.state === "exit") { - var dx = d.target.x - d.source.x, - dy = d.target.y - d.source.y, - dr = Math.sqrt(dx * dx + dy * dy) * 5; - return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; - } else { - var dx = d.target.x - d.source.x, - dy = d.target.y - d.source.y, - dr = Math.sqrt(dx * dx + dy * dy) * 5; - - return "M" + 0 + "," + 0 + "A" + dr + "," + dr + " 0 0,1 " + 0 + "," + 0; - } - } - }); - - - linktext.attr("transform", function(d) { - if (graphstate === "GRAPH") { - return "translate(" + (d.source.x + d.target.x) / 2 + "," + (d.source.y + d.target.y) / 2 + ")"; - } else { - return "translate(0,0)"; - } - }); - - node.attr("transform", transform); - - // After initial placement we can make the nodes visible. - //links.attr('visibility', 'visible'); - node.attr('visibility', 'visible'); -} - -function removeHighlight() { - // TODO: stop manipulating state - var nodes = graph.nodes(), - links = graph.links(), - k = 0, j = 0; - - while (k < nodes.length) { - if (nodes[k]['state'] === "enter" || nodes[k]['state'] === "exit" || nodes[k]['state'] === "chosen") { - nodes[k]['state'] = "perm"; - } - k++; - } - while (j < links.length) { - links[j]['state'] = "perm"; - j++; - } -} - -function highlight(n) -{ - var connected = graph.getConnectedNodesAndLinks(n, 1), - i, - data; - - n.state = 'chosen'; - - for (i in connected.nodes) { - data = connected.nodes[i]; - node = data.node; - switch (data.type) { - case 'exit': - node.state = 'exit'; - break; - case 'enter': - node.state = 'enter'; - break; - }; - } -} - -function showInfo(d, i) { - if (d.state !== "chosen" && d.state !== 'temp') { - highlight(d); - $('.info').fadeIn(300); - - if (d.type === "deliverable") { - $('.info').html('Name: ' + d.id + '




'); - } else if(d.type=== "chainlink"){ - $('.info').html('Name: ' + d.id + '
'); - }else{ - $('.info').html('Name: ' + d.id + '


'); - } - - - $('.info').css("border-color", customColor(d.type)); - - $("#editenddate").datepicker({ - inline: true, - showOtherMonths: true, - dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - }); - - $("#editstartdate").datepicker({ - inline: true, - showOtherMonths: true, - dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - }); - - $('#editdescription').val(d.type); - - $('#edittype').val(d.type); - - $('#editurl').val(d.url); - - if (d.type === "deliverable") { - $('#editstartdate').val(d.start); - $('#editenddate').val(d.end); - } - - $("#editbox").submit(function() { - if (d.type === "deliverable") { - graph.editDates(d.id, null, new Date($("#editstartdate").val()), new Date($("#editenddate").val())); - } - graph.editType(d.id,d.type,$('#edittype').val()); - graph.editURL(d.id, d.type, $('#editurl').val()); - graph.update(true); - return false; - }); - - $("#deletenode").click(function() { - if (confirm('This node and all its connections will be deleted, are you sure?')) { - graph.removeNode(d.id, null); - graph.update(false); - document.querySelector('.info').style.visibility = "hidden"; - } - }); - } else { - removeHighlight(); - $('.info').fadeOut(300); - } - graph.update(true); -} - -function mousedown() { - $('.editinfo').css('top', -100); - $('.editinfo').css('left', 0); - $('.editlinkinfo').css('top', -100); - $('.editlinkinfo').css('left', 0); - removeHighlight(); - $('.info').fadeOut(300); - graph.update(true); -} - -function AddedUnique(newnode) { - truth = true; - for (var p = 0; p < addednodes.length; p++) { - if (addednodes[p] === newnode) { - truth = false; - } - } - return truth; -} - - -$('#editform').keypress(function(e) { - signal.signal(consts.KEYSTROKES, [{where: consts.KEYSTROKE_WHERE_EDIT_NODE, keys: [e.which]}]); - if (e.which == 13) { - $('.editinfo').css('top', -100); - $('.editinfo').css('left', 0); - var element = $('#editname'); - var newname = element.val(); - var d = element.data().d; - graph.editName(d.id, newname); - graph.update(true); - return false; - } -}); - - -function editNode(node, d, i) { - var oldname = d.name; - var element = $('#editname'); - var offset = $(node).find('.nodetext').offset(); - - $('.editinfo').css('top', offset.top); - $('.editinfo').css('left', offset.left); - element.val(oldname); - element.data().d = d; -} - -function editLink(d, i) { - var dx = (d.source.x + d.target.x) / 2; - var dy = (d.source.y + d.target.y) / 2; - var oldname = d.name; - $('.editlinkinfo').css('top', dy - 17); - $('.editlinkinfo').css('left', dx - 18); - $('#editlinkname').val(oldname); - - // TODO: handle escape as well to quit without changes (enter does submit) - $('#editlinkform').submit(function() { - graph.editLink(d.source.id, d.target.id, $('#editlinkname').val()); - $('.editlinkinfo').css('top', -100); - $('.editlinkinfo').css('left', 0); - graph.update(true); - - return false; - }); - - graph.update(true); -} - - -function customColor(type) { - var color; - switch (type) { - case "person": - color = '#FCB924'; - break; - case "project": - color = '#009DDC'; - break; - case "skill": - color = '#62BB47'; - break; - case "deliverable": - color = '#202020'; - break; - case "objective": - color = '#933E99'; - break; - case "empty": - color = "#080808"; - break; - case "chainlink": - color = "#fff"; - break; - case "bubble": - color = "rgba(0,0,0,0.2)"; - break; - default: - size = '#080808'; - break; - } - return color; -} - -function customSize(type) { - var size; - switch (type) { - case "person": - size = 12; - break; - case "project": - size = 12; - break; - case "skill": - size = 12; - break; - case "deliverable": - size = 12; - break; - case "objective": - size = 12; - break; - case "empty": - size = 9; - break; - case "chainlink": - size = 8; - break; - case "bubble": - size = 180; - break; - default: - size = 9; - break; - } - return size; -} - -function expand(obj){ - if (!obj.savesize) { - obj.savesize = obj.size; - } - obj.size = Math.max(obj.savesize, obj.value.length); -} - -window.graph = graph; -window.force = force; - -return { - expand: expand, - graph: graph, - force: force, - load_from_json: function(result) { - graph.load_from_json(result); - recenterZoom(); - update(false); - } -} -}); /* close define call */ diff --git a/scripts/rz_core.js b/scripts/rz_core.js new file mode 100644 index 00000000..3a55839c --- /dev/null +++ b/scripts/rz_core.js @@ -0,0 +1,740 @@ +"use strict" + +define('rz_core', +['jquery', 'd3', 'consts', 'signal', 'util', 'model/graph'], +function($, d3, consts, signal, util, model_graph) { + +var addednodes = []; + +var vis; + +var graphstate = "GRAPH"; +var graphinterval = 0; + +var ganttTimer = 0; + +var deliverables = []; + +var circle; // <-- should not be module globals. + +var scrollValue = 0, + zoomObject; + +var graph; + +var drag; + +var force; + +var state_to_link_class = { + enter:'enterlink graph', + exit:'exitlink graph', +}; + +function recenterZoom() { + vis.attr("transform", "translate(0,0)scale(1)"); +} + +var initDrawingArea = function () { + + 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)"); + } + } + + 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(); + } + } + + var el = document.body; + + graph = new model_graph.Graph(el); + + //Zoom scale behavior in zoom.js + zoomObject = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); + + vis = d3.select(el).append("svg:svg") + .attr('id', 'canvas_d3') + .attr("width", '100%') + .attr("height", '100%') + .attr("pointer-events", "all") + .call(zoomObject) + .append("g") + .attr("class", "zoom"); + + // TODO: why do we need this huge overlay (hugeness also not constant) + vis.append("rect") + .attr("class", "overlay graph") + .attr("width", $(el).innerWidth() * 12) + .attr("height", $(el).innerHeight() * 12) + .attr("x", -$(el).innerWidth() * 5) + .attr("y", -$(el).innerHeight() * 5); + $('.overlay').click(mousedown); + + // SVG rendering order is last rendered on top, so to make sure + // all links are below the nodes we group them under a single g + vis.append("g").attr("id", "link-group"); + + drag = d3.behavior.drag() + .origin(function(d) { return d; }) + .on("dragstart", dragstarted) + .on("drag", dragged) + .on("dragend", dragended); + + var w = $(el).innerWidth(), + h = $(el).innerHeight(); + + force = d3.layout.force() + .distance(120) + .gravity(0.12) + .charge(-1800) + .size([w, h]) + .on("tick", tick) + .start(); + + graph.update = update; +} + +initDrawingArea(); + +function update(no_relayout) { + var node, link, linktext, nodetext; + + link = vis.select("#link-group").selectAll(".link") + .data(graph.links()); + + 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.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"; + }); + + link.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); + } + }); + + 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) + "..."; + } + }); + + linktext.exit().remove(); + + node = vis.selectAll(".node") + .data(graph.nodes(), function(d) { + return d.id; + }); + + 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(this, d, i); + showInfo(d, i); + } + }) + .call(drag); + + nodetext = nodeEnter.insert("text") + .attr("class", "nodetext graph") + .attr("dx", 15) + .attr("dy", ".30em"); + + node.select('g.node text') + .text(function(d) { + if (!d.name) { + return ""; + } + if (d.state === "temp" || d.state === 'chosen' + || d.state === "enter" || d.state === "exit") { + return d.name; + } else { + if (d.name.length < 28) { + return d.name; + } else { + return d.name.substring(0, 25) + "..."; + } + } + }); + + 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"; + + 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 { + removeHighlight(); + } + 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); + }); + //} + + 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 + } + + 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 debug_print = function(message) { + var element = $(".debug"); + if (element.length == 1) { + element.html(message); + } else { + console.log(message); + } +} + +function check_for_nan(x) { + if (Number.isNaN(x)) { + console.log('nan problem'); + force.stop(); + } + return Number.isNaN(x); +} + +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") { + if (check_for_nan(d.x) || check_for_nan(d.y)) { + return; + } + if (d.state === "temp") { + return "translate(" + d.x + "," + d.y + ")"; + } else { + return "translate(" + d.x + "," + d.y + ")"; + } + } else { + return "translate(0,0)"; + } + return "translate(" + d.x + "," + d.y + ")"; + } + + if (graphstate === "GANTT") { + var k = 20 * e.alpha; + var today = new Date(); + var missingcounter = 0; + + graph.nodes().forEach(function(d, i) { + if ((d.start === 0 || d.end === 0)) { + d.x = 450 + missingcounter * 100; + d.y = window.innerWidth / 2; + if (missingcounter >= 6) { + d.x = 450 + (missingcounter - 6) * 100; + d.y = window.innerWidth / 2 + 50; + } + missingcounter++; + } else { + //var min= 150+graphinterval*Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft(); + //var max= 150+graphinterval*Math.ceil(Math.abs(d.end.getTime() - d.start.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft(); + //d.x = min+Math.sin(today.getTime()/1000*Math.PI*2/10)*max; + ganttTimer++; + if (ganttTimer < 3000) { + d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) * ganttTimer / 3000; + d.y = 150 + d.start.getHours() * 17; + } else { + d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)); + d.y = 150 + d.start.getHours() * 17; + } + } + if (d.state === "chosen") { + scrollValue = d.x; + } + }); + } else { + //circles animation + var tempcounter = 0; + var temptotal = 0; + graph.nodes().forEach(function(d, i) { + if (d.state === "temp" && d.type!=="chainlink" && d.type!=="bubble") { + temptotal++; + } + }); + if(temptotal!==newnodes){ + newnodes+=temptotal/15/(newnodes*newnodes); + } + if(newnodes>=temptotal){ + newnodes=temptotal; + } + if(newnodes<1)newnodes=1; + graph.nodes().forEach(function(d, i) { + if (d.state === "temp") { + tempcounter++; + if(d.type==="chainlink" || d.type==="bubble"){ + d.x = window.innerWidth / 2; + d.y = window.innerHeight / 2; + } else { + d.x = window.innerWidth / 2 + (60+newnodes*20) * Math.cos(-Math.PI+Math.PI * 2 * (tempcounter-1) / newnodes+0.3); + d.y = window.innerHeight / 2 + (60+newnodes*20) * Math.sin(-Math.PI+Math.PI * 2 * (tempcounter-1) / newnodes+0.3); + } + check_for_nan(d.x); + check_for_nan(d.y); + } + }); + } + + link.attr("d", function(d) { + if (graphstate === "GRAPH") { + var dx = d.target.x - d.source.x, + dy = d.target.y - d.source.y, + dr = Math.sqrt(dx * dx + dy * dy); + return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; + } else if (graphstate === "GANTT") { + if (d.state === "enter" || d.state === "exit") { + var dx = d.target.x - d.source.x, + dy = d.target.y - d.source.y, + dr = Math.sqrt(dx * dx + dy * dy) * 5; + return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; + } else { + var dx = d.target.x - d.source.x, + dy = d.target.y - d.source.y, + dr = Math.sqrt(dx * dx + dy * dy) * 5; + + return "M" + 0 + "," + 0 + "A" + dr + "," + dr + " 0 0,1 " + 0 + "," + 0; + } + } + }); + + + linktext.attr("transform", function(d) { + if (graphstate === "GRAPH") { + return "translate(" + (d.source.x + d.target.x) / 2 + "," + (d.source.y + d.target.y) / 2 + ")"; + } else { + return "translate(0,0)"; + } + }); + + node.attr("transform", transform); + + // After initial placement we can make the nodes visible. + //links.attr('visibility', 'visible'); + node.attr('visibility', 'visible'); +} + +function removeHighlight() { + // TODO: stop manipulating state + var nodes = graph.nodes(), + links = graph.links(), + k = 0, j = 0; + + while (k < nodes.length) { + if (nodes[k]['state'] === "enter" || nodes[k]['state'] === "exit" || nodes[k]['state'] === "chosen") { + nodes[k]['state'] = "perm"; + } + k++; + } + while (j < links.length) { + links[j]['state'] = "perm"; + j++; + } +} + +function highlight(n) +{ + var connected = graph.getConnectedNodesAndLinks(n, 1), + i, + data; + + n.state = 'chosen'; + + for (i in connected.nodes) { + data = connected.nodes[i]; + node = data.node; + switch (data.type) { + case 'exit': + node.state = 'exit'; + break; + case 'enter': + node.state = 'enter'; + break; + }; + } +} + +function showInfo(d, i) { + if (d.state !== "chosen" && d.state !== 'temp') { + highlight(d); + $('.info').fadeIn(300); + + if (d.type === "deliverable") { + $('.info').html('Name: ' + d.id + '




'); + } else if(d.type=== "chainlink"){ + $('.info').html('Name: ' + d.id + '
'); + }else{ + $('.info').html('Name: ' + d.id + '


'); + } + + + $('.info').css("border-color", customColor(d.type)); + + $("#editenddate").datepicker({ + inline: true, + showOtherMonths: true, + dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + }); + + $("#editstartdate").datepicker({ + inline: true, + showOtherMonths: true, + dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + }); + + $('#editdescription').val(d.type); + + $('#edittype').val(d.type); + + $('#editurl').val(d.url); + + if (d.type === "deliverable") { + $('#editstartdate').val(d.start); + $('#editenddate').val(d.end); + } + + $("#editbox").submit(function() { + if (d.type === "deliverable") { + graph.editDates(d.id, null, new Date($("#editstartdate").val()), new Date($("#editenddate").val())); + } + graph.editType(d.id,d.type,$('#edittype').val()); + graph.editURL(d.id, d.type, $('#editurl').val()); + graph.update(true); + return false; + }); + + $("#deletenode").click(function() { + if (confirm('This node and all its connections will be deleted, are you sure?')) { + graph.removeNode(d.id, null); + graph.update(false); + document.querySelector('.info').style.visibility = "hidden"; + } + }); + } else { + removeHighlight(); + $('.info').fadeOut(300); + } + graph.update(true); +} + +function mousedown() { + $('.editinfo').css('top', -100); + $('.editinfo').css('left', 0); + $('.editlinkinfo').css('top', -100); + $('.editlinkinfo').css('left', 0); + removeHighlight(); + $('.info').fadeOut(300); + graph.update(true); +} + +function AddedUnique(newnode) { + truth = true; + for (var p = 0; p < addednodes.length; p++) { + if (addednodes[p] === newnode) { + truth = false; + } + } + return truth; +} + + +$('#editform').keypress(function(e) { + signal.signal(consts.KEYSTROKES, [{where: consts.KEYSTROKE_WHERE_EDIT_NODE, keys: [e.which]}]); + if (e.which == 13) { + $('.editinfo').css('top', -100); + $('.editinfo').css('left', 0); + var element = $('#editname'); + var newname = element.val(); + var d = element.data().d; + graph.editName(d.id, newname); + graph.update(true); + return false; + } +}); + + +function editNode(node, d, i) { + var oldname = d.name; + var element = $('#editname'); + var offset = $(node).find('.nodetext').offset(); + + $('.editinfo').css('top', offset.top); + $('.editinfo').css('left', offset.left); + element.val(oldname); + element.data().d = d; +} + +function editLink(d, i) { + var dx = (d.source.x + d.target.x) / 2; + var dy = (d.source.y + d.target.y) / 2; + var oldname = d.name; + $('.editlinkinfo').css('top', dy - 17); + $('.editlinkinfo').css('left', dx - 18); + $('#editlinkname').val(oldname); + + // TODO: handle escape as well to quit without changes (enter does submit) + $('#editlinkform').submit(function() { + graph.editLink(d.source.id, d.target.id, $('#editlinkname').val()); + $('.editlinkinfo').css('top', -100); + $('.editlinkinfo').css('left', 0); + graph.update(true); + + return false; + }); + + graph.update(true); +} + + +function customColor(type) { + var color; + switch (type) { + case "person": + color = '#FCB924'; + break; + case "project": + color = '#009DDC'; + break; + case "skill": + color = '#62BB47'; + break; + case "deliverable": + color = '#202020'; + break; + case "objective": + color = '#933E99'; + break; + case "empty": + color = "#080808"; + break; + case "chainlink": + color = "#fff"; + break; + case "bubble": + color = "rgba(0,0,0,0.2)"; + break; + default: + size = '#080808'; + break; + } + return color; +} + +function customSize(type) { + var size; + switch (type) { + case "person": + size = 12; + break; + case "project": + size = 12; + break; + case "skill": + size = 12; + break; + case "deliverable": + size = 12; + break; + case "objective": + size = 12; + break; + case "empty": + size = 9; + break; + case "chainlink": + size = 8; + break; + case "bubble": + size = 180; + break; + default: + size = 9; + break; + } + return size; +} + +function expand(obj){ + if (!obj.savesize) { + obj.savesize = obj.size; + } + obj.size = Math.max(obj.savesize, obj.value.length); +} + +window.graph = graph; +window.force = force; + +return { + expand: expand, + graph: graph, + force: force, + load_from_json: function(result) { + graph.load_from_json(result); + recenterZoom(); + update(false); + } +} +}); /* close define call */ diff --git a/scripts/textanalysis.ui.js b/scripts/textanalysis.ui.js index 503e5796..946ce0d5 100644 --- a/scripts/textanalysis.ui.js +++ b/scripts/textanalysis.ui.js @@ -1,6 +1,6 @@ "use strict" -define('textanalysis.ui', ['autocomplete', 'rhizicore', 'textanalysis', 'signal', 'consts'], +define('textanalysis.ui', ['autocomplete', 'rz_core', 'textanalysis', 'signal', 'consts'], function(autocomplete, RZ, textanalysis, signal, consts) { var text = ""; // Last text of sentence var element_name = '#textanalyser'; -- cgit v1.3.1