Change color option in Mind Map

Hi Everybody,

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 …

Thanks in advance!

P.S.

Here is the “Delete” option code:

$(“ContextMenuButton”,
$(go.TextBlock, “Delete”),<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”> {click: function(e, obj) { deleteSelection(obj); }}),

function deleteSelection (e, obj) {
<span =“Apple-tab-span” style=“white-space:pre”> e.diagram.commandHandler.deleteSelection();
<span =“Apple-tab-span” style=“white-space:pre”> var adorn = obj.part;
<span =“Apple-tab-span” style=“white-space:pre”> adorn.diagram.startTransaction(“Delete An Item”);
<span =“Apple-tab-span” style=“white-space:pre”> var node = adorn.adornedPart;
<span =“Apple-tab-span” style=“white-space:pre”> var tb = node.findObject(“Node”);
<span =“Apple-tab-span” style=“white-space:pre”> tb.scale *= factor;
<span =“Apple-tab-span” style=“white-space:pre”> adorn.diagram.commitTransaction(“Delete An Item”);
}

It seems that it works but returns with the error:


TypeError: obj is undefined<span role=“presentation” =" -errorMessage hasBreakSwitch "><div role=“presentation” ="errorTrace “><span =” “><div role=“listitem” =“errorSource errorSource-syntax focusRow subLogRow “><table =” " cellpadding=“0” cellspacing=“0”><t =” “><tr =” “><td =” “><span role=”” aria-=“false” title=“Break On Error” ="errorBreak a11yFocus “><td =” "><a ="errorSource a11yFocus "><pre title=“var adorn = obj.part;” ="errorSourceCode ">var adorn = obj.part;

and here is the "Change Color" option code, which doesn't work at all:
$("ContextMenuButton",
$(go.TextBlock, "Change color"),
{click: function(e, obj) { changeColor(obj); }}),
....
function deleteSelection (e, obj) {
e.diagram.commandHandler.deleteSelection();
var adorn = obj.part;
adorn.diagram.startTransaction("Delete An Item");
var node = adorn.adornedPart;
var tb = node.findObject("Node");
tb.scale *= factor;
adorn.diagram.commitTransaction("Delete An Item");
}

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.

Thanks a lot, will try implement tonight!

walter thanks a lot, Delete function works as ot should work!

still confused with the Color change function, here is what I have so far,
but it returns with the error: tb factor is null

here is the code:

$(“ContextMenuButton”,
$(go.TextBlock, “Change color”),
{click: function(e, obj) { changeColor(obj); }}),

the function:

function changeColor(obj, factor) {
var adorn = obj.part;
adorn.diagram.startTransaction(“Change Color”);
var node = adorn.adornedPart;
var tb = node.findObject(“TEXT”);
var links = node.findLinksConnected();
while (links.next())
{
links.value.path.stroke = “go.Brush.randomColor”;
}
tb.stroke *= factor;
adorn.diagram.commitTransaction(“Change Color”);
}

any ideas what is wrong with my code?
Thanks in advance !

Have you been able to debug your code?

No, i wasn’t ! Can’t figure out what is wrong with it, any ideas ?!

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 …

function changeColor(e, obj) {
    diagram.startTransaction("changed color");
    // get the context menu that holds the button that was clicked
    var contextmenu = obj.part;
    // get the node data to which the Node is data bound
    var nodedata = contextmenu.data;
    // compute the next color for the node
    var 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 !

If you are using data Bindings, then you should use Model.setDataProperty when you want to change a property.

So, are you using a Binding whose source is the “color” property? And if so, what is the target property, on which GraphObject?