I’m new to JavaScript and trying to modify the Mind Map Gojs. On the right click I’d like to add option “Delete” and also “Change color”. Is any ideas hoe to do that? Spent 2 days to figure out, but not success. Can anyone help me please with that?
I was able to add that buttons on right click of mouse, but not the functionality …
Commands implemented by CommandHandler conduct their own transactions around any modifying behavior, and they also raise DiagramEvents afterwards, if appropriate. So if you want to implement “Delete” to just do what CommandHandler.deleteSelection() does, you don’t need to do anything more.
$("ContextMenuButton",
$(go.TextBlock, "Delete",
{
click: function(e, obj) { e.diagram.commandHandler.deleteSelection(); }
}))
You didn’t provide your changeColor function, but it ought to be similar to the changeTextSize function in that same sample. But instead of changing the TextBlock.scale property, change the TextBlock.stroke or maybe the TextBlock.background property, depending on what you want to accomplish.
We really aren’t supposed to help you with basic JavaScript or HTML or CSS programming issues, but only about how to use GoJS. But I suppose I can make this one exception.
A new value for Shape.stroke must be either a CSS color string, such as “blue” or “#33AA33”, or an instance of go.Brush, such as the result of go.GraphObject.make(go.Brush, go.Brush.Linear, { 0: “yellow”, 1: “red” }). Clearly the value “go.Brush.randomColor” is not a string that has CSS color syntax. But evaluating go.Brush.randomColor() would be a call to a static Brush function that would produce a random color string.
TextBlock.stroke must also be either a CSS color string or a go.Brush object. One cannot multiply such a value, and certainly not by an undefined variable such as factor.
var links = node.findLinksConnected();
while (links.next()) {
links.value.path.stroke = go.Brush.randomColor();
}
tb.stroke = go.Brush.randomColor();
Even more plausible would be code like:
var newcolor = go.Brush.randomColor();
var links = node.findLinksConnected();
while (links.next()) {
links.value.path.stroke = newcolor;
}
tb.stroke = newcolor;
All such modification code needs to be within a transaction, which you are doing.
Thank you for your patient and for explanation.
However, this code works only for changing link and text color, but not the actual node … Will try to sort it out how to change node and link colors …
Thanks!
one more question, any chances to use this bit of code ?! it looks like it should do the job for the whole node, not for the link and text …
functionchangeColor(e, obj) {
diagram.startTransaction("changed color");
// get the context menu that holds the button that was clickedvar contextmenu = obj.part;
// get the node data to which the Node is data boundvar nodedata = contextmenu.data;
// compute the next color for the nodevar newcolor = "lightblue";
switch (nodedata.color) {
case"lightblue": newcolor = "lightgreen"; break;
case"lightgreen": newcolor = "lightyellow"; break;
case"lightyellow": newcolor = "orange"; break;
case"orange": newcolor = "lightblue"; break;
}
// modify the node data// this evaluates data Bindings and records changes in the UndoManager
diagram.model.setDataProperty(nodedata, "color", newcolor);
diagram.commitTransaction("changed color");
}
// here is the example of old version of code, which changing only the link's
and text's color ...
function changeColor(obj, factor) {
var adorn = obj.part;
adorn.diagram.startTransaction("Change Color");
var node = adorn.adornedPart;
var tb = node.findObject("TEXT");
var newcolor = go.Brush.randomColor();
var links = node.findLinksConnected();
while (links.next()) {
links.value.path.stroke = newcolor;
}
tb.stroke = newcolor;
adorn.diagram.commitTransaction("Change Color");
}</span></font></pre><pre -="" id="contextmenus" =" hljs " style="padding: 0.5em; : rgb35, 35, 35;"><font color="#e6e1dc" size="3"><span style="line-height: normal;">
<pre -="" id=“contextmenus” =" hljs " style=“padding: 0.5em; : rgb35, 35, 35;”>Any help please, as I spent too much time on it, and still no result …<pre -="" id=“contextmenus” =" hljs " style=“padding: 0.5em; : rgb35, 35, 35;”>Thank you in advance !