diff options
| author | LV-426 <lv-426@taproot.org.il> | 2014-11-13 17:41:57 +0200 |
|---|---|---|
| committer | LV-426 <lv-426@taproot.org.il> | 2014-11-13 17:41:57 +0200 |
| commit | 76d1de512a58f023ae348ae8500100490fba9915 (patch) | |
| tree | 87a3df058d3aaf1a3f2c408a784ffe63209cdaac /scripts/rz_core.js | |
| parent | 4a303d5a7a7e1f8327bb18a2ef3e3093a30a50b6 (diff) | |
rename scripts/ -> src/
Diffstat (limited to 'scripts/rz_core.js')
| -rw-r--r-- | scripts/rz_core.js | 744 |
1 files changed, 0 insertions, 744 deletions
diff --git a/scripts/rz_core.js b/scripts/rz_core.js deleted file mode 100644 index 7b56d41b..00000000 --- a/scripts/rz_core.js +++ /dev/null @@ -1,744 +0,0 @@ -"use strict" - -define(['jquery', 'd3', 'consts', 'signal', 'util', 'model/graph', 'model/core', 'view/helpers', 'view/view', 'rz_observer'], -function($, d3, consts, signal, util, model_graph, model_core, view_helpers, view, rz_observer) { - -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; - $('#canvas_d3').dblclick(canvas_handler_dblclick); -} - -initDrawingArea(); - -/** - * find the visual element counterpart of a given model object. This relies on - * the visual element having an id attribute equal to the object's id. - * - * @return null if visual element is not found - */ -function locate_visual_element(model_obj){ - var id_sel = $('#' + model_obj.id); - if (0 == id_sel.length){ - console.warn('unable to find visual element for model object: object id: ' + model_obj.id.toString()) - return null; - } - return id_sel[0]; -} - -/** - * add node on canvas double click - */ -function canvas_handler_dblclick(){ - var n = model_core.create_node__set_random_id(); - n.name = ''; // will be set by user - - graph._addNodeNoHistory(n); // FIXME: clean once node creation functions consolidate - graph.update(); - - var n_ve = locate_visual_element(n); // locate visual element - - var on_slowdown_cb = function(){ - var set_focus = true; - editNode(n_ve, n, set_focus); - observer.disconnect(); - } - var mutation_handler = rz_observer.new_Mutation_Handler__on_dxy_slowdown(on_slowdown_cb); - var observer = rz_observer.new_MutationObserver(mutation_handler); - mutation_handler.on_slowdown_threshold_reached; - - observer.observe(n_ve, { - subtree: false, - childList : false, - attributes: true, - attributeOldValue : true, - }); -} - -function update(no_relayout) { - var node, - link, - link_g, - linktext, - nodetext, - link_group; - - link_group = vis.select('#link-group'); - link = link_group.selectAll("g.link") - .data(graph.links()); - - link_g = link.enter().append('g') - .attr('class', 'link graph'); - - link_g.append("svg:defs").selectAll("marker") - .data(["end"]) // Different link/path types can be defined here - .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_g.append("path") - .attr("class", function(d) { - return state_to_link_class[d.state] || 'link graph'; - }) - .attr("marker-end", "url(#end)"); - - // second path for larger click area - link_g.append("path") - .attr("class", "ghostlink") - .on("click", function(d, i) { - var that = this, - source = this.link.source, - target = this.link.target; - - view.edge_info.on_delete(function () { - graph.removeLink(that.link); - graph.update(true); - view.edge_info.hide(); - }); - view.edge_info.show(d); - highlight(source); - highlight(target); - source.state = 'chosen'; - target.state = 'chosen'; - graph.update(true); - }); - - 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.selectAll('path.link') - .attr('stroke-width', function(d) { - if (d.state === 'exit' || d.state === 'enter') { - return "4px"; - } - return "2.0px"; - }); - - link.exit().remove(); - - link_group.selectAll('.ghostlink') - .data(graph.links()) - .each(function (d) { - this.link = d; - }); - - 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(this, 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('id', function(d){ return d.id; }) // append node id to enable data->visual mapping - .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(this.node, i); - } - }) - .call(drag); - - node.each(function (d) { - this.node = d; - }); - - 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 view_helpers.customSize(d.type) - 2; - }) - .style("fill", function(d) { - return view_helpers.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 "res/img/check.png"; - break; - case "current": - return "res/img/wait.png"; - break; - case "waiting": - return "res/img/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("path.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, i) { - var d_val, - ghost; - - 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); - d_val = "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; - d_val = "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; - - d_val = "M" + 0 + "," + 0 + "A" + dr + "," + dr + " 0 0,1 " + 0 + "," + 0; - } - } - // update ghostlink position - ghost = $(this.nextElementSibling); - ghost.attr("d", d_val); - return d_val; - }); - - - 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 n, - connected = graph.getConnectedNodesAndLinks(n, 1), - i, - node, - link, - data; - - n.state = 'chosen'; - - for (i = 0 ; i < connected.nodes.length ; ++i) { - data = connected.nodes[i]; - node = data.node; - switch (data.type) { - case 'exit': - node.state = 'exit'; - break; - case 'enter': - node.state = 'enter'; - break; - }; - } - for (i = 0 ; i < connected.links.length ; ++i) { - data = connected.links[i]; - link = data.link; - switch (data.type) { - case 'exit': - link.state = 'exit'; - break; - case 'enter': - link.state = 'enter'; - break; - }; - } -} - -function showInfo(d, i) { - if (d.state !== "chosen" && d.state !== 'temp') { - highlight(d); - view.node_info.show(d); - view.node_info.on_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; - }); - view.node_info.on_delete(function() { - if (confirm('This node and all its connections will be deleted, are you sure?')) { - graph.removeNode(d.id, null); - graph.update(false); - view.node_info.hide(); - } - }); - } else { - removeHighlight(); - view.node_info.hide(); - } - graph.update(true); -} - -function mousedown() { - $('.editinfo').css('top', -100); - $('.editinfo').css('left', 0); - $('.editlinkinfo').css('top', -100); - $('.editlinkinfo').css('left', 0); - removeHighlight(); - view.hide(); - 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; - } -}); - - -/** - * @param e visual node element - * @param n node model object - */ -function editNode(e, n, set_focus) { - var oldname = n.name; - var en_element = $('#editname'); - var offset = $(e).find('.nodetext').offset(); - - $('.editinfo').css('top', offset.top); - $('.editinfo').css('left', offset.left); - en_element.val(oldname); - en_element.data().d = n; - - if (set_focus){ - en_element.focus(); - } -} - -function editLink(link, d, i) { - var offset = $(link).offset(), - oldname = d.name; - - $('.editlinkinfo').css('top', offset.top); - $('.editlinkinfo').css('left', offset.left); - $('#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); -} - -return { - graph: graph, - force: force, - load_from_json: function(result) { - graph.load_from_json(result); - recenterZoom(); - update(false); - } -} -}); /* close define call */ |
