Databases
StackOverflow2013
Postsdbo
POObject reference passing in raphael drag function
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POObject reference passing in raphael drag function
    primarykey
    data
    text
    <p>I am creating a module to graphically visualize workflows using raphael,which take data from a data base. For this i have created a class called "FlowEdit", and created move, up and dragger function according to raphael. </p> <p>But in move function when i am trying to access connections list using object reference, than i am unable to reference it, it gives undefined error.</p> <p>Code for the class is this:-</p> <pre><code> //class definition function FlowView(list) { this.list = list; this.connections = []; this.r = Raphael("holder", 1400, 500); this.shapes = []; this.texts = []; this.y_center = 500 / 2; //box size this.r_width = 60; this.r_height = 40; // To define virtual regions this.x_offset = 50; this.y_offset = 40; this.x_start = 40; //this.color, this.tempS, this.tempT; //Define position in y direction this.top_count = [0]; this.bottom_count = [0]; //Initialize Top_count &amp; Bottom_Count Arrays for (var i = 0; i &lt; this.list.length; i++) { this.top_count.push(0); this.bottom_count.push(0); } } ; // Give starting points from list FlowView.prototype.start_point = function () { var start_list = []; for (var i in this.list) { if (this.list[i][1] == this.list[i][2][0]) { start_list.push(this.list[i][1]); } } return start_list; }; //For Finding index of an element in list FlowView.prototype.index_of = function (curr_point) { for (var i in this.list) { if (this.list[i][1] == curr_point) { return i; } } }; //add next function FlowView.prototype.add_next = function () { for (var i in this.list) { if (this.list[i][3][0] == "NULL") { //For all last nodes add same to their next this.list[i][3][0] = this.list[i][1]; } if (this.list[i][3].length == 0) { //For all last nodes add same to their next this.list[i][3].push(this.list[i][1]); } } }; //For given next of all nodes add previous to those nodes FlowView.prototype.add_previous = function () { for (var i in this.list) { for (var j in this.list[i][3]) { //For all next add current node to their previous list var curr_index = this.index_of(this.list[i][3][j]); if (this.list[curr_index][2].indexOf(this.list[i][1]) == -1 &amp;&amp; (curr_index != i)) { this.list[curr_index][2].push(this.list[i][1]); } } } //Add previous of all start node for (var i in this.list) { if (this.list[i][2].length == 0) { this.list[i][2].push(this.list[i][1]); } } }; //Region update recursively FlowView.prototype.region_update = function (curr_index) { if (this.list[curr_index][1] != this.list[curr_index][3][0]) { for (var i in this.list[curr_index][3]) { var next_index = this.index_of(this.list[curr_index][3][i]); if (this.list[next_index][0] &lt; this.list[curr_index][0] + 1) { this.list[next_index][0] = this.list[curr_index][0] + 1; this.region_update(next_index); } } } }; //Draw the workflow for given data structure FlowView.prototype.construct = function () { var open = this.start_point(); var close = []; while (open.length != 0) { var curr_point = open.shift(); var curr_index = this.index_of(curr_point); //document.write(curr_index); //draw box var curr_region = this.list[curr_index][0]; //document.write(curr_region); var x_cord = parseInt(curr_region) * (this.x_offset + this.r_width) + this.x_start; //document.write(x_start); var y_cord = 0; if (this.top_count[curr_region] == 0 &amp;&amp; this.bottom_count[curr_region] == 0) { y_cord = this.y_center - this.r_height / 2; this.top_count[curr_region] = 1; this.bottom_count[curr_region] = 1; } else if (this.top_count[curr_region] &lt;= this.bottom_count[curr_region]) { y_cord = this.y_center - this.r_height / 2 - this.top_count[curr_region] * (this.y_offset + this.r_height); this.top_count[curr_region] = this.top_count[curr_region] + 1; } else { y_cord = this.y_center + this.r_height / 2 + this.bottom_count[curr_region] * (this.y_offset + this.r_height) - this.r_height; this.bottom_count[curr_region] = this.bottom_count[curr_region] + 1; } //drawing the box this.shapes[this.list[curr_index][1]] = this.r.rect(x_cord, y_cord, this.r_width, this.r_height, 10); this.texts[this.list[curr_index][1]] = this.r.text(x_cord + this.r_width / 2, y_cord + this.r_height / 2, this.list[curr_index][1]); // Adding next nodes to open list for (var i in this.list[curr_index][3]) { //If not in open than add to open if (this.list[curr_index][3][0] != this.list[curr_index][1]) { if (open.indexOf(this.list[curr_index][3][i]) == -1 &amp;&amp; close.indexOf(this.list[curr_index][3][i]) == -1) { open.push(this.list[curr_index][3][i]); } } } //Increasing region index for each next node this.region_update(curr_index); close.push(curr_point); //document.write(open.toString()+"&lt;/br&gt;"); //document.write(close.toString()+"&lt;/br&gt;"); } for (var j in this.list) { if (this.list[j][1] != this.list[j][3][0]) { for (var i in this.list[j][3]) { //make link for each previous if (close.indexOf(this.list[j][3][i]) != -1) { this.connections.push(this.r.connection(this.shapes[this.list[j][1]], this.shapes[this.list[j][3][i]], "bcd")); } } } } }; FlowView.prototype.dragger = function () { // Original cords for main element this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x"); this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y"); if (this.type != "text") this.animate({"fill-opacity":.2}, 500); // Original co-ords for pair element this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x"); this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y"); if (this.pair.type != "text") this.pair.animate({"fill-opacity":.2}, 500); }; FlowView.prototype.move = function (dx, dy) { // Move main element var att = this.type == "ellipse" ? {cx:this.ox + dx, cy:this.oy + dy} : {x:this.ox + dx, y:this.oy + dy}; this.attr(att); // Move paired element att = this.pair.type == "ellipse" ? {cx:this.pair.ox + dx, cy:this.pair.oy + dy} : {x:this.pair.ox + dx, y:this.pair.oy + dy}; this.pair.attr(att); //document.write("adass"); //document.write(x_offset); // Move connections for (var i = this.connections.length; i--;) { this.r.connection(this.connections[i]); } this.r.safari(); }; FlowView.prototype.up = function () { // Fade original element on mouse up if (this.type != "text") this.animate({"fill-opacity":0}, 500); // Fade paired element on mouse up if (this.pair.type != "text") this.pair.animate({"fill-opacity":0}, 500); // Move connections }; FlowView.prototype.drag_initialize = function () { for (var i in this.shapes) { var color = Raphael.getColor(); var tempS = this.shapes[i].attr({fill:color, stroke:color, "fill-opacity":0, "stroke-width":2, cursor:"move"}); var tempT = this.texts[i].attr({fill:color, stroke:"none", "font-size":15, cursor:"move"}); this.shapes[i].drag(this.move, this.dragger, this.up); this.texts[i].drag(this.move, this.dragger, this.up); // Associate the elements tempS.pair = tempT; tempT.pair = tempS; } }; </code></pre> <p>Using above code i am able to draw graph &amp; drag items,but when i drag items the connected path are not dragged along it.So where i am doing wrong. For making connection i used the same code given in raphael demos..</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAks
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COcan you put a working example up on jsfiddle or somewhere similar? It helps us see what your doing.
      singulars
      1. POObject reference passing in raphael drag function
      1. USamadan
    2. CO[JSFiddle link](http://jsfiddle.net/H3K7L/5/) This is the link for jsfiddle code. The problem is that I want the links between shapes to be dragged along with shapes. I change the links in move function accordingly when the shape is dragged. But i think the problem is that the context of the object in drag function is of the shape element and hence it is unable to understand this.connections which has FlowView object context
      singulars
      1. POObject reference passing in raphael drag function
      1. USAks
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload