summaryrefslogtreecommitdiff
path: root/scripts/rz_core.js
diff options
context:
space:
mode:
authorLV-426 <lv-426@taproot.org.il>2014-11-13 17:41:57 +0200
committerLV-426 <lv-426@taproot.org.il>2014-11-13 17:41:57 +0200
commit76d1de512a58f023ae348ae8500100490fba9915 (patch)
tree87a3df058d3aaf1a3f2c408a784ffe63209cdaac /scripts/rz_core.js
parent4a303d5a7a7e1f8327bb18a2ef3e3093a30a50b6 (diff)
rename scripts/ -> src/
Diffstat (limited to 'scripts/rz_core.js')
-rw-r--r--scripts/rz_core.js744
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 */