Comments (7)
Hi, at line 6883 of jit.js (uncompressed file) could you try replacing the code with this and tell me if your problem persists?
...
plot: function(opt, animating) {
var viz = this.viz,
aGraph = viz.graph,
canvas = viz.canvas,
id = viz.root,
that = this,
ctx = canvas.getCtx(),
min = Math.min,
opt = opt || this.viz.controller;
opt.clearCanvas && canvas.clear();
var root = aGraph.getNode(id);
if(!root) return;
var T = !!root.visited;
...
Actually the lines to replace are the ones that take the root node:
var root = aGraph.getNode(id);
if(!root) return;
var T = !!root.visited;
from jit.
I changed the lines. Here is btw my setup:
Events: {
enable: true,
onMouseEnter: function () {
console.log("Mouse Enter");
graph.canvas.getElement().style.cursor = "pointer";
},
onMouseLeave: function () {
console.log("Mouse Leave");
graph.canvas.getElement().style.cursor = "";
},
onClick: function (node) {
console.log("Click: " + node);
if (!node) return;
graph.onClick(node.id);
displayInformation(node);
}
},
/* Visualisation for DOM Labels */
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function() {
graph.onClick(node.id);
displayInformation(node);
};
if (node.data.isRoot) {
displayInformation(node);
}
},
so, what happens, when I was adding your fix: The errors disappeared, but the behaviour, too.
- There were no Mouse Enter and Mouse Leave logs in my console (firebug)
- Click appears everytime I click the canvas, but the node parameter was always false
I expected both to be fired with node parameter set.
from jit.
Hi, Thanks for the feedback.
Actually MouseEnter/Leave should be triggered only if the pointer enters/leaves a node when the events config is:
Events: {
enable: true,
type: 'Native',
...
}
Or is fired when there's a MouseEnter/Leave on the labels and the configuration is something like:
Events: {
enable: true,
type: 'HTML',
...
}
from jit.
i'm confused right now :) There are too much conditions on what happens when and what based on such many different options that interfere each other. So, I added the type 'Native' on my Events object, but nothing changed. I wanna go for Native Nodes, but was starting with HTML-Nodes back in time. This is why both are present in my config at the moment, so I am able to swap back and forth, but I hope I can get rid of the HTML-Nodes in the future. So here is my complete graph-js:
graph = new $jit.ST({
injectInto: 'graphviz',
transition: $jit.Trans.Quart.easeInOut,
constrained: false,
levelsToShow : 1,
levelDistance: 40,
siblingOffset: 20,
duration: 450,
fps: 25,
Navigation: {
enable: true,
panning: true,
zooming: -50,
},
//set node and edge colors
Node: {
overridable: true,
width: 120,
autoHeight: true,
autoWidth: false,
type: "adv-rect",
CanvasStyles: {
fillStyle: "#F1F4F7",
strokeStyle: "#CCC",
lineWidth: 0.5,
radius: 4
}
},
Label: {
type: "Native",
size: 10,
//style: "bold",
family: "Sans-serif", //'Lucida Grande' 'DejaVu Sans' Verdana Arial FreeSans Helvetica 'Bitstream Vera Sans'
color: "#333",
textBaseline: "middle",
},
Edge: {
type: "bezier",
color: "#999",
overridable: true
},
Events: {
enable: true,
type: "Native",
onMouseEnter: function () {
console.log("Mouse Enter");
graph.canvas.getElement().style.cursor = "pointer";
},
onMouseLeave: function () {
console.log("Mouse Leave");
graph.canvas.getElement().style.cursor = "";
},
onClick: function (node) {
console.log("Click: " + node);
if (!node) return;
graph.onClick(node.id);
displayInformation(node);
}
},
/* Visualisation for DOM Labels */
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function() {
graph.onClick(node.id);
displayInformation(node);
};
if (node.data.isRoot) {
displayInformation(node);
}
},
/* Highlight selected path */
onBeforePlotLine: function(adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$color = "#888";
adj.data.$lineWidth = 2;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});
graph.loadJSON(json);
graph.compute();
graph.geom.translate(new $jit.Complex(-200, 0), "current");
graph.onClick(graph.root);
Actually, I copied most of it's functionality from this example here http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html and tied it down to my use-case.
from jit.
Ok, found the error. In the class: $jit.ST.Plot.NodeTypes each 'contains' method is lacking the return statement. That must be added in front of each nodeHelper call. Then two method-calls have the wrong parameters, in ellipse's and rectangle's contains method, change from:
this.nodeHelper.rectangle.contains({x:npos.x+width/2, y:npos.y+height/2}, width, height, canvas);
to:
return this.nodeHelper.rectangle.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
this will resolve the "canvas" not defined error and brings back the expected behavior.
from jit.
That's great! ill write your fix as soon as I get some time.
Thanks again for finding and posting the fix here :)
from jit.
Hi. This is the same issue than : https://github.com/philogb/jit/issues#issue/52 . I will just keep the newest one. Already found a solution for this and will close that ticket when I push.
from jit.
Related Issues (20)
- Too much recursion
- export e Json Data
- An extrenal file Json
- Add bidirectional and double line
- $jit.ForceDirected how can i specific each edge's length
- Bower.json version mismatch
- dynamically loading the tree
- Implement Cushioned Treemaps
- Stacked Bar Chart Show Labels for each stack in the Bar. HOT 1
- bower download is just text HOT 1
- How do I avoid the nodes to extend outside of the visible canvas
- How to make the root node and other nodes start displaying from left not center HOT 1
- Force Directed renders incorrectly? HOT 1
- "offsetY" setting doesn't work after "removeSubtree" call
- when click Node A , how to just show the children nodes belonging to the Node A
- voronoi treemap area
- Class.override doesn't give access to the overriden method
- Node overlapping
- click on children cant set canvas view to center !
- Jit
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jit.