Develop Reference

How can ı get label name in mxgraph?

I place figures on the screen in the mxgraph editor.
How can I access the names of these shapes I placed?
For example, there are 2 ellipses and 1 square on the screen. When I press the button, I want it to say there are 2 ellipses and 1 square.
How can I do that?

The shape of the built-in shapes is defined by its style. So, you can use style to figure it out. In the editor, you can access the (raw) style using "Edit -> Style", it's a list of semicolon-separated values somewhat like trinagle;html=1; or shape=prallalelogram;whiteSpace=wrap;html=1;
To get it you just get the style of the shape with javascript:
const cells = graph.model.getChildCells(graph.getDefaultParent(), true, true);
for (const cell of cells) {
const styles = cell && cell.style && cell.style.split(';') || [];
if (styles.indexOf('ellipse') >= 0) {
console.log(`ellipse found: ${cell.id}`)
}
if (styles.indexOf('triangle') >= 0) {
console.log(`triangle found: ${cell.id}`)
}
}
I am uncertain if this is the best option, but it should work. For your custom shapes that you have created yourself, you can just add some property to your shape to detect the shape by that property.

How to set a random color(lets say green) after generating a random position

So I'm solving a Knights Tour problem and I want to set green color on the field of Knights "first move" = "first appearance".
This is what it looks like:
I have a 8x8 table and my Knights appears randomly on the board and I can't figure out how to set his first appearance to be green.
var boardSize = 8;
var currentCoords = {x: Math.round(Math.random() * 7), y: Math.round(Math.random() * 7)};
var count = 1;
This is generating part.
$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x).html('<span style="font-size:50px;color:blue;margin-left:10%;">♘</span>');
And this is when knight appears on the board.
If anyone could help I would appreciate it.
Thanks in advance.
Desired result:

Okay, so you want the background of the square to be green. The "desired result" screenshot clarified that, thank you.
You already know how to get the table cell, in order to put the knight into the cell.
You need to use a similar jQuery call to get the cell:
$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x)
And then instead of the .html() call that you use to place the knight, you need to use a .css() call to change the styles of the cell itself.
The style you need to set is background, so you'd do this:
$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x).css({'background':'green'});
immediately before or after your line to place the knight.
For a bonus point, since there's a lot of duplicated code between the two lines of code, you can simplify things further by moving the jQuery part to get the table cell into a separate variable, and then referencing it twice, like so:
var $firstCell = $('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x);
$firstCell.css({'background':'green'});
$firstCell.html('<span style="font-size:50px;color:blue;margin-left:10%;">♘</span>');
Hope that helps.

Enlarge SVG group on click, then minimize

I have multiple groups of svg elements in one viewport. I want users to click on one group which will hide the other groups and enlarge the selected group to fill the viewport.
So far I have:
var continents = $(".continents")
for (var i = 0; i < continents.length; i++) {
continents[i].addEventListener('click', function(){
$(".continents").css("display","none");
var currentContinent=this;
currentContinent.setAttribute("transform","scale(1.0)")
})
}
Where the groups are classed ".continents". But this does nothing.
Here is a jsfiddle
Is it possible to create a zoom effect or simply enlarge a selected group?

There are two issues with the code:
Not all the groups have the class .continents, so not all of the continents will hide when you do this:
`$(".continents").css("display","none");`
only Asia and Africa do have that class, so only those two will hide.
When you set the attribute transform here:
currentContinent.setAttribute("transform","scale(1.0)")
you are not only modifying the value of the scale(), but you are also overwriting/deleting the value of the translation.
How to fix these issues:
Add the class .continents to all the groups.
Update both the values of scale and translate for the continent that is clicked, and not only the scale. And this is the tricky part: those values may not be the same for all the continents. For example, for Asia, the target values will be: translate(-400,439) scale(0.032,-0.032), but those values will not work for the other continents. You need to play with different values to find the ones that will work for each particular group.
You can see it working on this JSFiddle (notice that only Asia will work, the other continents will be displayed outside of the picture until you adjust the translate/scale values).
To make things as generic as possible, you could store the new values in a data- attribute (e.g.: data-transform), and then update the value of the transform by using the value of that data- attribute.

You don't have class defined on all of your group elements so the click handler and css is only applied to 2 of the groups.
Also, you set all of the displays to none, and never set the display of the selected group back to inline.
The transform is no good since the paths are much larger, have an inverted y axes and are positioned absolutely, so changing the scale from 0.017, -0.017 to 1.0, 1.0 moves them far off the viewport.
JSFiddle
var prevTransform = null;
var continents = $("g");
for (var i = 0; i < continents.length; i++) {
continents[i].addEventListener('click', function () {
var currentContinent = this;
if (prevTransform == null) {
console.log("Click!");
$("g").css("display", "none");
prevTransform = currentContinent.getAttribute("transform");
currentContinent.setAttribute("transform", "translate(-20,220) scale(0.025, -0.025)");
$(currentContinent).css("display", "inline");
} else {
currentContinent.setAttribute("transform", prevTransform);
prevTransform = null;
$("g").css("display", "inline");
}
});
}
In this example, South America works best, the others move too far up and right. Australia moves out of view.

Change Table's Color With JavaScript

I am trying change table's color from blue to red with JavaScript.
function change(idElement){
var element = document.getElementById(idElement);
if(element.style.background = "#00BFFF")
element.style.background = "#800000";
else{
element.style.background = "#00BFFF";
}
}
This is my JavaScript code. It changes color one time, but I want to change its color again its old color when it is clicked.

First Problem - Assignment vs Equality
Your first problem is that you are using an equals sign which is always assigning a value, rather than checking the value as a condition:
if(element.style.background = "#00BFFF")
should be
if(element.style.background === "#00BFFF")
Second Problem - Normalized Color Formats
The second problem is that in some browsers, you can set the background color of an element, but then when you query it, you will see it in a normalized format. For instance, in Chrome, if you open up the dev tools and run the following command document.body.style.backgroundColor = "#FF0000", you will see the background turn red as you expect. However, if you immediately type document.body.style.backgroundColor, it will report the color in rgb format as rgb(255, 0, 0).

Select options based on percentage

I need an efficient method to select options based on percentages.
For example, assume we have four colors: black, blue, red and white.
Now, I'm going to create an array filled with colors, except, I need to select them based on the following percentages:
Black - 80% chance of selection
Blue - 70% chance of selection
Red - 30% chance of selection
White - 5% chance of selection
I thought of assigning a range between 1 and 100 to each color and then generating a random number between. This however means the % of all colors has to add up to 100%, which, might not be avoidable really.
Code not necessary but would love some algorithms that can be implemented via JavaScript to accomplish this.
EDIT:
Based on Patrice Levesque's answer, I created this test. While I haven't verified the statistics of it, it visually represents what I'm after. As usual, I over-thought the problem. Other answers are more than welcome.

You just need to normalize your values; get the total “percentage” (in your instance, 80 + 70 + 30 + 5 → 185) and pick a number between 1 and that total; in your case, 1-80 would be black, 81-150 would be blue, 151-180 would be red and 181-185 white.