I just learned about a group in phaser 3,
is there a way how to bind a click handler to a group of Sprites ?
Here is the snippet that shows how to accomplish it
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('beball', 'assets/sprites/beball1.png');
game.load.image('bikkuriman', 'assets/sprites/bikkuriman.png');
}
var text = '';
var group1;
var group2;
function create() {
// Let's create 2 Groups
group1 = game.add.group();
group2 = game.add.group();
// This will automatically inputEnable all children added to both Groups
group1.inputEnableChildren = true;
group2.inputEnableChildren = true;
// Create 10 Sprites per Group
for (var i = 0; i < 10; i++)
{
var sprite1 = group1.create(64 + (64 * i), 150, 'beball');
sprite1.name = 'group1-child-' + i;
var sprite2 = group2.create(64 + (64 * i), 350, 'bikkuriman');
sprite2.name = 'group2-child-' + i;
}
// And now we'll listen to the Group events
group1.onChildInputDown.add(onDown, this);
group2.onChildInputDown.add(onDown, this);
group1.onChildInputOver.add(onOver, this);
group2.onChildInputOver.add(onOver, this);
group1.onChildInputOut.add(onOut, this);
group2.onChildInputOut.add(onOut, this);
}
function onDown (sprite) {
text = "onDown: " + sprite.name;
sprite.tint = 0x00ff00;
}
function onOver (sprite) {
text = "onOver: " + sprite.name;
sprite.tint = 0xff0000;
}
function onOut (sprite) {
text = "onOut: " + sprite.name;
sprite.tint = 0xffffff;
}
function render() {
if (text === '')
{
game.debug.text("Interact with the Sprites.", 32, 32);
}
else
{
game.debug.text(text, 32, 32);
}
}
thank you, sir,
but sir, what if we only want only to bind, click handler to an individual isolated Sprite?"
but are there other in-depth examples, which lead me there, I'm still confused about how to use it, I'm still a beginner in phaser 3
Related
I'd like to copy/paste objects with FabricJS, the issue is that when I copy and paste an I text it becomes uneditable and I'd like to make it editable.
here is the JsFiddle : http://jsfiddle.net/7Hsdh/11/
Javascript :
var canvas = new fabric.Canvas('paper');
// adding text on canvas
var text = new fabric.Text('Normal Uneditable Text', {
left: 100,
top: 150,
fontFamily: 'Arial',
fontSize: 15,
fill: '#333'
});
canvas.add(text);
var text = new fabric.IText('IText : not editable anymore once copy/pasted why?', {
left: 10,
top: 50,
fontFamily: 'Arial',
fontSize: 20,
fill: '#333'
});
canvas.add(text);
canvas.renderAll();
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
}
function onKeyDownHandler(event) {
var key;
if(window.event){
key = window.event.keyCode;
}
else{
key = event.keyCode;
}
switch(key){
case 67: // Ctrl+C
if(event.ctrlKey){
event.preventDefault();
copy();
}
break;
case 86: // Ctrl+V
if(event.ctrlKey){
event.preventDefault();
paste();
}
break;
default:
// TODO
break;
}
}
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
canvas.getActiveGroup().getObjects().forEach(function(o){
var object = fabric.util.object.clone(o);
copiedObjects.push(object);
});
}
else if(canvas.getActiveObject()){
var object = fabric.util.object.clone(canvas.getActiveObject());
copiedObject = object;
copiedObjects = new Array();
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
copiedObjects[i]=fabric.util.object.clone(copiedObjects[i]);
copiedObjects[i].set("top", copiedObjects[i].top+100);
copiedObjects[i].set("left", copiedObjects[i].left+100);
canvas.add(copiedObjects[i]);
canvas.item(canvas.size() - 1).hasControls = true;
}
}
else if(copiedObject){
copiedObject= fabric.util.object.clone(copiedObject);
copiedObject.set("top", 10);
copiedObject.set("left", 10);
canvas.add(copiedObject);
canvas.item(canvas.size() - 1).hasControls = true;
}
canvas.renderAll();
}
Where is the issue and how can I resolve it so I can also copy/paste Itext and keep it as it is instead of turning it to simple text?
Without digging into the FabricJS code, I can't answer "why" (which I guess is part of your question) - but I'm sure you could dig into the FabricJS code on your own if you really wanted too know.
However, here's a tweak to your code to get it working for you:
function paste() {
if (copiedObjects.length > 0) {
for (var i in copiedObjects) {
if (/text/.test(copiedObjects[i].type)) {
canvas.add(new fabric.IText(copiedObjects[i].text, {
left: copiedObjects[i].left + 100,
top: copiedObjects[i].top + 100,
fontFamily: copiedObjects[i].fontFamily,
fontSize: copiedObjects[i].fontSize,
fill: copiedObjects[i].fill
}));
} else {
copiedObjects[i] = fabric.util.object.clone(copiedObjects[i]);
copiedObjects[i].set("top", copiedObjects[i].top + 100);
copiedObjects[i].set("left", copiedObjects[i].left + 100);
canvas.add(copiedObjects[i]);
}
canvas.item(canvas.size() - 1).hasControls = true;
}
} else if (copiedObject) {
if (/text/.test(copiedObject.type)) {
canvas.add(new fabric.IText(copiedObject.text, {
left: 10,
top: 10,
fontFamily: copiedObject.fontFamily,
fontSize: copiedObject.fontSize,
fill: copiedObject.fill
}));
} else {
copiedObject = fabric.util.object.clone(copiedObject);
copiedObject.set("top", 10);
copiedObject.set("left", 10);
canvas.add(copiedObject);
}
canvas.item(canvas.size() - 1).hasControls = true;
}
canvas.renderAll();
}
My guess, the underlying object behind IText is actually just a plain old Text object with an overlay to make it responsive to keyboard/mouse events.
Here's your JSFiddle updated, http://jsfiddle.net/7Hsdh/13/.
Hope that helps, matey!
You are doing something wrong.
the fabric.util.object.clone is meant to clone plain javascript objects in a swallow way. Is not meant to copy instances.
You have to use Object.toObject to create a copy of your object.
var canvas = new fabric.Canvas('paper');
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
canvas.getActiveGroup().getObjects().forEach(function(o){
var object = o.toObject();
copiedObjects.push(object);
});
}
else if(canvas.getActiveObject()){
var object = canvas.getActiveObject().toObject();
copiedObject = object;
copiedObjects = new Array();
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
copiedObjects[i].top += 100;
copiedObjects[i].left += 100;
var className = copiedObjects[i].type.slice(0, 1).toUpperCase() + copiedObjects[i].type.slice(1);
fabric[className].fromObject(copiedObjects[i], function() {
canvas.add();
});
}
}
else if(copiedObject){
.... do the same without the the for loop ....
}
}
I am creating a game in html5 using javascript and I am having problem with sleep function. I want to hold off an isWin function for a few seconds before showing a popup declaring the person has won the game. here is part of the code.
modal: function (isWin) {
var bgDarker = this.game.make.bitmapData(this.game.width, this.game.height);
bgDarker.fill(50, 50, 50);
bgDarker = this.game.add.button(0, 0, bgDarker, function () { }, this);
bgDarker.tint = 0x000000;
bgDarker.alpha = 0.5;
var modalGroup = this.game.add.group();
var bg = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, (isWin ? "picWinPopup" : "picLostPopup"));
bg.scale.setTo(1);
bg.anchor.setTo(0.5);
modalGroup.add(bg);
var labelLevel2 = this.game.add.text(this.game.world.centerX + 100, this.game.world.centerY + 5, MatchingGame.indexImage, {
font: "48px " + MatchingGame.fontFaces[3],
fill: "#1a40ff",
boundsAlignH: "center",
boundsAlignV: "middle"
});
labelLevel2.anchor.setTo(0.5);
modalGroup.add(labelLevel2);
var labelTotalScore = this.game.add.text(this.game.world.centerX, this.game.world.centerY + 110, MatchingGame.score, {
font: "34px " + MatchingGame.fontFaces[3],
fill: "#ff2a5c",
boundsAlignH: "center",
boundsAlignV: "middle"
});
labelTotalScore.anchor.setTo(0.5);
modalGroup.add(labelTotalScore);
var btnReplay = this.makeButton("btnReplay", function (close) {
btnReplay.bgDarker.destroy();
btnReplay.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
}
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
MatchingGame.levelscore = 0;
},this);
//btnReplay.anchor.setTo(0.5);
btnReplay.position.setTo(bg.position.x - 200, bg.position.y + 260)
btnReplay.bgDarker = bgDarker;
btnReplay.modalGroup = modalGroup;
modalGroup.add(btnReplay);
if (!isWin) {
var btnEnd = this.makeButton("btnEnd", function (close) {
btnEnd.bgDarker.destroy();
btnEnd.modalGroup.destroy();
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
this.end();
},this);
btnEnd.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnEnd.bgDarker = bgDarker;
btnEnd.modalGroup = modalGroup;
modalGroup.add(btnEnd);
}
else {
//setTimeout(3000);
//var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);
var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
btnNextLevel.bgDarker.destroy();
btnNextLevel.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
} else {
MatchingGame.indexImage = MatchingGame.indexImage+1; }
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
},this);
btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnNextLevel.bgDarker = bgDarker;
btnNextLevel.modalGroup = modalGroup;
modalGroup.add(btnNextLevel);
}
MatchingGame.live = 3;
this.game.add.tween(modalGroup).from({ y: -800 }, 600, Phaser.Easing.Bounce.Out, true);
this.game.world.bringToTop(modalGroup);
},
I did try to use sleep() and setTimeout() function but keep failing to implement it in javascript. can you help me solve this problem of putting a timer in javascript function? because I am having problem integrating setTimeout in javascript code that uses html5.
Use it like this
setTimeout(function() {
var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
btnNextLevel.bgDarker.destroy();
btnNextLevel.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
} else {
MatchingGame.indexImage = MatchingGame.indexImage+1; }
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
},this);
btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnNextLevel.bgDarker = bgDarker;
btnNextLevel.modalGroup = modalGroup;
modalGroup.add(btnNextLevel); }, 3000 );
javascript is single thread, so there is no sleep/wait/stop.
you should never make that only single thread stop working.
if you want to delay some code, use setTimeout.
however the proper way to use setTimeout is:
setTimeout(myFunction, 40000);
that is an example.
see full details:
mdn setTimeout
This may fit to your requirement
var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);
Chart.js 2.2.1
Any idea how to trigger the code that runs when I hover over a datapoint, and that runs when I move the mouse off? I need to programmatically show and hide a chart's tooltip.
openTip(oChart, datasetIndex, pointIndex){
// how to open a specific tooltip?
}
closeTip(oChart, datasetIndex, pointIndex){
// how to close the same tooltip?
}
I would show sample code if I could, but I don't even know where to start. The chart method docs haven't helped.
JSFiddle
I would be careful accessing/modifying private variables that begin with _. You may find yourself with unexpected behavior. Why not trigger the canvas mousemove event
function openToolTip (myChart, index) {
var mouseMoveEvent, meta, point, rectangle, value;
meta = myChart.getDatasetMeta(0);
rectangle = myChart.canvas.getBoundingClientRect();
point = meta.data[index].getCenterPoint();
mouseMoveEvent = new MouseEvent('mousemove', {
clientX: rectangle.left + point.x,
clientY: rectangle.top + point.y
});
myChart.canvas.dispatchEvent(mouseMoveEvent);
},
To close the tooltip just trigger the mouseout event
function closeToolTip (myChart) {
var mouseOutEvent = new MouseEvent('mouseout');
return myChart.canvas.dispatchEvent(mouseOutEvent);
}
The code below will handle one or more tooltips.
function openTip(oChart,datasetIndex,pointIndex){
if(window.oChart.tooltip._active == undefined)
window.oChart.tooltip._active = []
var activeElements = window.oChart.tooltip._active;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index)
return;
}
activeElements.push(requestedElem);
//window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data;
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
function closeTip(oChart,datasetIndex,pointIndex){
var activeElements = window.oChart.tooltip._active;
if(activeElements == undefined || activeElements.length == 0)
return;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index) {
activeElements.splice(i, 1);
break;
}
}
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
Complete solution provided by #BeetleJuice - https://jsfiddle.net/ucvvvnm4/5/
For Chart.js#3 here's official solution: https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html
function triggerTooltip(chart) {
const tooltip = chart.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {x: 0, y: 0});
} else {
const chartArea = chart.chartArea;
tooltip.setActiveElements([
{
datasetIndex: 0,
index: 2,
}, {
datasetIndex: 1,
index: 2,
}
],
{
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
chart.update();
}
I am trying to implement a plugin that allows the user to dump relevant information about points selected by the LinkedBrush plugin. I think my question is sort of related to this example. I have meta information tied to each point via the HTMLTooltip plugin. Ideally, I would somehow be able to dump this too. In the example I linked to, the information is outputted via a prompt. I wish to be able to save this information to a text file of some kind.
Put slightly differently: How do I determine which points in a scatter plot have been selected by the LinkedBrush tool so that I can save the information?
To solves this, I ended up just editing the LinkedBrush plugin code. I added a button that, when clicked, outputs the extent of the brush window by using brush.extent(). This prints the minimum and maximum x and y coordinates. I will basically use these coordinates to trace back to the input data set and determine which points fell within the bounds of the brush. If anyone has a better idea of how to solve this, I would welcome it.
class LinkedBrush(plugins.PluginBase):
JAVASCRIPT="""
mpld3.LinkedBrushPlugin = mpld3_LinkedBrushPlugin;
mpld3.register_plugin("linkedbrush", mpld3_LinkedBrushPlugin);
mpld3_LinkedBrushPlugin.prototype = Object.create(mpld3.Plugin.prototype);
mpld3_LinkedBrushPlugin.prototype.constructor = mpld3_LinkedBrushPlugin;
mpld3_LinkedBrushPlugin.prototype.requiredProps = [ "id" ];
mpld3_LinkedBrushPlugin.prototype.defaultProps = {
button: true,
enabled: null
};
function mpld3_LinkedBrushPlugin(fig, props) {
mpld3.Plugin.call(this, fig, props);
if (this.props.enabled === null) {
this.props.enabled = !this.props.button;
}
var enabled = this.props.enabled;
if (this.props.button) {
var BrushButton = mpld3.ButtonFactory({
buttonID: "linkedbrush",
sticky: true,
actions: [ "drag" ],
onActivate: this.activate.bind(this),
onDeactivate: this.deactivate.bind(this),
onDraw: function() {
this.setState(enabled);
},
icon: function() {
return mpld3.icons["brush"];
}
});
this.fig.buttons.push(BrushButton);
var my_icon = "data:image/png;base64,longstring_that_I_redacted";
var SaveButton = mpld3.ButtonFactory({
buttonID: "save",
sticky: false,
onActivate: this.get_selected.bind(this),
icon: function(){return my_icon;},
});
this.fig.buttons.push(SaveButton);
}
this.extentClass = "linkedbrush";
}
mpld3_LinkedBrushPlugin.prototype.activate = function() {
if (this.enable) this.enable();
};
mpld3_LinkedBrushPlugin.prototype.deactivate = function() {
if (this.disable) this.disable();
};
mpld3_LinkedBrushPlugin.prototype.get_selected = function() {
if (this.get_selected) this.get_selected();
};
mpld3_LinkedBrushPlugin.prototype.draw = function() {
var obj = mpld3.get_element(this.props.id);
if (obj === null) {
throw "LinkedBrush: no object with id='" + this.props.id + "' was found";
}
var fig = this.fig;
if (!("offsets" in obj.props)) {
throw "Plot object with id='" + this.props.id + "' is not a scatter plot";
}
var dataKey = "offsets" in obj.props ? "offsets" : "data";
mpld3.insert_css("#" + fig.figid + " rect.extent." + this.extentClass, {
fill: "#000",
"fill-opacity": .125,
stroke: "#fff"
});
mpld3.insert_css("#" + fig.figid + " path.mpld3-hidden", {
stroke: "#ccc !important",
fill: "#ccc !important"
});
var dataClass = "mpld3data-" + obj.props[dataKey];
var brush = fig.getBrush();
var dataByAx = [];
fig.axes.forEach(function(ax) {
var axData = [];
ax.elements.forEach(function(el) {
if (el.props[dataKey] === obj.props[dataKey]) {
el.group.classed(dataClass, true);
axData.push(el);
}
});
dataByAx.push(axData);
});
var allData = [];
var dataToBrush = fig.canvas.selectAll("." + dataClass);
var currentAxes;
function brushstart(d) {
if (currentAxes != this) {
d3.select(currentAxes).call(brush.clear());
currentAxes = this;
brush.x(d.xdom).y(d.ydom);
}
}
function brushmove(d) {
var data = dataByAx[d.axnum];
if (data.length > 0) {
var ix = data[0].props.xindex;
var iy = data[0].props.yindex;
var e = brush.extent();
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
} else {
dataToBrush.selectAll("path").classed("mpld3-hidden", function(p) {
return e[0][0] > p[ix] || e[1][0] < p[ix] || e[0][1] > p[iy] || e[1][1] < p[iy];
});
}
}
}
function brushend(d) {
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
}
}
this.get_selected = function(d) {
var brush = fig.getBrush();
var extent = brush.extent();
alert(extent);
}
this.enable = function() {
this.fig.showBrush(this.extentClass);
brush.on("brushstart", brushstart).on("brush", brushmove).on("brushend", brushend);
this.enabled = true;
};
this.disable = function() {
d3.select(currentAxes).call(brush.clear());
this.fig.hideBrush(this.extentClass);
this.enabled = false;
};
this.disable();
};
"""
def __init__(self, points, button=True, enabled=True):
if isinstance(points, mpl.lines.Line2D):
suffix = "pts"
else:
suffix = None
self.dict_ = {"type": "linkedbrush",
"button": button,
"enabled": False,
"id": utils.get_id(points, suffix)}
I'm facing weird behaviour of Jit Infovis i'm using. I have two different html files that include a load json function from a Javascript file. The function is using infovis library to display a hypertree map from a json file. Both two html files load the same json file.
One html file has been succeeded rendering the map properly. But another one has not. It renders the map almost properly, but after i debugged it, i got it not iterating over the root node. Then, the root node becames inactive without label and clickability.
This is the js function i'm using.
var labelType, useGradients, nativeTextSupport, animate;
(function () {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function (text) {
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (350 - this.elem.offsetWidth / 2) + 'px';
}
};
function init(slugParam, pageParam) {
var isFirst = true;
var isSetAsRoot = false;
// alert(slugParam+ " | "+pageParam);
var url = Routing.generate('trade_map_buyer_json', { slug : slugParam, page : pageParam });
//init data
$.getJSON(url, function (json) {
var type = 'Buyer';
//end
var infovis = document.getElementById('infovis');
infovis.style.align = "center";
infovis.innerHTML = '';
// infovis.innerHTML = '<img align="center" id="gifloader" style="margin-left:50%; margin-top:50%" src="{{ asset('/bundles/jariffproject/frontend/images/preloader.gif') }}" width="30px" height="30px"/>'
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;
url = url.replace("/json/", "/");
window.history.pushState("object or string", "Title", url);
//init Hypertree
var ht = new $jit.Hypertree({
//id of the visualization container
injectInto: 'infovis',
Navigation: {
enable: false,
panning: 'avoid nodes',
},
//canvas width and height
width: w,
height
: h,
//Change node and edge styles such as
//color, width and dimensions.
Node: {
dim: 9,
overridable: true,
color: "#66FF33"
},
Tips: {
enable: true,
type: 'HTML',
offsetX: 0,
offsetY: 0,
onShow: function(tip, node) {
// dump(tip);
tip.innerHTML = "<div style='background-color:#F8FFC9;text-align:center;border-radius:5px; padding:10px 10px;' class='node-tip'><p style='font-size:100%;font-weight:bold;'>"+node.name+"</p><p style='font-size:50%pt'>"+node.data.address+"</p></div>";
}
},
Events: {
enable: true,
type: 'HTML',
onMouseEnter: function(node, eventInfo, e){
var nodeId = node.id;
var menu1 = [
{'set as Root':function(menuItem,menu) {
menu.hide();
isSetAsRoot = true;
console.log(nodeId);
init(nodeId, 0);
}},
$.contextMenu.separator,
{'View details':function(menuItem,menu) {
}}
];
$('.node').contextMenu(menu1,{theme:'vista'});
}
},
Edge: {
lineWidth: 1,
color: "#52D5DE",
overridable: true,
},
onBeforePlotNode: function(node)
{
if (isFirst) {
console.log(node._depth);
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
isFirst = false;
}
},
onPlotNode: function(node)
{
if (isSetAsRoot) {
var nodeInstance = node.getNode();
var nodeId = nodeInstance.id;
init(nodeId, 0);
isSetAsRoot = false;
}
},
onBeforeCompute: function (domElement, node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
type = isOdd(dot._depth) ? 'Supplier' : 'Buyer';
},
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation
onCreateLabel: function (domElement, node) {
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
domElement.innerHTML = node.name;
// if (node._depth == 1) {
console.log("|"+node.name+"|"+node._depth+"|");
// }
$jit.util.addEvent(domElement, 'click', function () {
ht.onClick(node.id, {
onComplete: function () {
console.log(node.id);
ht.controller.onComplete(node);
}
});
});
},
onPlaceLabel: function (domElement, node) {
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#000";
style.fontWeight = "normal";
} else if (node._depth == 2) {
style.fontSize = "0.7em";
style.color = "#555";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},
onComplete: function (node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
console.log(dot._depth);
var connCount = dot.data.size;
var showingCount = '';
if (connCount != undefined) {
var pageParamInt = (parseInt(pageParam)+1) * 10;
var modulus = connCount%10;
showingCount = (pageParamInt - 9) + " - " + pageParamInt;
if (connCount - (pageParamInt - 9) < 10) {
showingCount = (pageParamInt - 10) + " - " + ((pageParamInt - 10) + modulus);
}
} else {
connCount = '0';
showingCount = 'No Connections Shown'
}
}
});
//load JSON data.
ht.loadJSON(json);
//compute positions and plot.
ht.refresh();
//end
ht.controller.onComplete();
});
}
function isEven(n)
{
return isNumber(n) && (n % 2 == 0);
}
function isOdd(n)
{
return isNumber(n) && (n % 2 == 1);
}
function isNumber(n)
{
return n === parseFloat(n);
}
function processAjaxData(response, urlPath){
}
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
out = out + "\n\n"
console.log(out);
// or, if you wanted to avoid alerts...
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre)
}
What's probably causing this?
Please check whether there is conflict id. Basically infovis render each nodes by the id.
And if there is an DOM element that has the same id with one DOM element of a node. It would conflict and won't render
you can check it by duming dom element iterating over the nodes.