Accessing and Updating Node/Group Properties

GoJS
#1

Hi All,

I’ve been trying to set up a double click function that creates a popup that allows a user to view and update a node/group properties. I’ve created a Double Click listener and using the htmlinteraction example as a reference I can see how to access elements text/shape etc.

If I can access the main object components of an element with elem (via e.diagram.selection) - "SHAP’ or “TEXT”…

  1. How can I access the properties of the element? In this case a property called prop1, below I try findObject but I/m guessing it’s a property as opposed to an object.

  2. How do I write/update the property of the selected node/group?

Thanks,

Z

// Double Click

var info = document.getElementById("myInfo");

myDiagram.addDiagramListener("ObjectDoubleClicked", function (e) {

var sel = e.diagram.selection;

var str = "";

if (sel.count === 0) {

str = "Selecting nodes in the main Diagram will display information here.";

info.innerHTML = str;

return;

} else if (sel.count > 1) {

str = sel.count + " objects selected.";

info.innerHTML = str;

return;

}

var elem = sel.first();

var shape = elem.findObject("SHAPE");

var txtblock = elem.findObject("TEXT");

var propy1 = elem.findObject("prop1"); //doesn't read prop1 property of selected object

alert("display " + txtblock.text + " " + propy1); //null because is empty

});

#2

From the use of findObject it appears that you are trying to capture the double click event just for a particular object. If that is the case it is a lot easier to implement the GraphObject.doubleClick event on that particular object (presumably within a template) than to implement the same functionality at the Diagram level for all double clicks.

The second argument to the event handler will be the GraphObject on which the event was declared. But you can get the GraphObject where the click actually happened via InputEvent.targetObject, on the first argument to the event handler.

Philosophically our design has tried to provide two different levels at which to control things, locally and globally. Locally means on the particular GraphObject; globally means on the Diagram or one of its helper objects such as its predefined Tools.

#3

Awesome, that make things a lot easier alright. So if I was doing this on a listener I would need the Transaction parts I’m guessing.

doubleClick: // here the second argument is this object, which is this Node

function(e, node) {

console.log(node.data.prop1);

alert("Prop1 is: " + node.data.prop1);

//change node.data

node.data.prop1 = "new prop value";

console.log(node.data.prop1);

}

#4

For the clicking events, yes, there’s no transaction implied, so if you want to make any changes to the diagram or model you very likely want to start and commit a transaction around your calls to Model.setDataProperty or whatever.

But for some other events, such as GraphObject.mouseDrop, something else, such as the DraggingTool, is responsible for the transaction.

The documentation should explain the expectations.

#5

Gotcha, thanks.

Presume there’s no nice go.js dialog popups?

Not really sure how to open a dialog form from within the doubleClick deceleration, pretty sure I can’t use jquery call.

doubleClick: // here the second argument is this object, which is this Node

function(e, node) {

** open a form popup **

<span =“Apple-tab-span” style=“line-height: 1.4;”> <span =“Apple-tab-span” style=“line-height: 1.4;”> <span =“Apple-tab-span” style=“line-height: 1.4;”> <span =“Apple-tab-span” style=“line-height: 1.4;”> <span =“Apple-tab-span” style=“line-height: 1.4;”> }

#6

Actually, jQuery UI does have dialogs. But that’s all beyond the scope of GoJS.