Passing argument on double click event

GoJS
1

Hi,

How can we pass argument on double click event. Below is my detail scenario,

I have palette, When I am dragging Image form palette to Floor, I am showing one alert using “ExternalObjectsDropped” listener. Now I want to pass argument say “ImageId” to the function.

divFloor.addDiagramListener(“ExternalObjectsDropped”, function (e) {

//How can I get this ImageId =1 here.
<span =“apple-tab-span”="" style=“white-space:pre”> alert("Selected ImageIdId is " + ImageId);

});

Where to give this ImageId =1 while creating template.

2

First, please realize that the user may have dragged-and-dropped multiple Parts from the Palette to the target Diagram. (That’s why the DiagramEvent is named “ExternalObjectsDropped”.)

e.subject will be the collection of dropped Parts, and will be the same as the Diagram.selection. So you could iterate over that collection to look at what was dropped.

3

Hi Walter,

Thanks for the reply. But I am not sure how to iterate over e.Subject.


I want to bind this function to each palette parts. Basically, My palette having different parts/images (for example, Desktop, Laptop) when user drags Desktop I want to show popup windows which will show Desktop related property, Same for Laptop, If user select Laptop, popup will show laptop property.


Below is my Node. I want to add custom attribute and want to fetch its value at above event. Below is my try, but it is not working

Desktoptemplate =go$(go.Node, “Spot”, nodeStyle(),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“EqipId”,“Id”,“1”),
go$(go.Panel, “Auto”,
go$(go.Shape, “Rectangle”,
{ fill: mainColor, stroke: null },
new go.Binding(“figure”, “figure”)),
go$(go.Picture, { source: replaceImage, name: “pic”,
width: 80, height: 55, imageStretch: go.GraphObject.Fill
})
));

divFloor.nodeTemplateMap.add(“Desktop”, Desktoptemplate );<span =“Apple-tab-span” style=“white-space:pre”> //Same template for Laptop.

divFloor.addDiagramListener(“ExternalObjectsDropped”, function (e) {
alert(e.subject);
var data = divFloor.model.nodeDataArray[0]; // get the first node data
var node = divFloor.findNodeForData(data); // find the corresponding Node
var p = node.EqipId;
alert§;
});

Output: Undefined.

Note: Yes Agree, that multiple parts can be dragged from palatte.

4

For discussion about GoJS collections: GoJS Collections -- Northwoods Software.

Perhaps your “ExternalObjectsDropped” Diagram listener could do something like:
function(e) {
e.subject.each(function(p) {
alert(p.data.Id);
});
}

5

Not Sure Walter what I am doing wrong here,

I am getting undefined is not a function for e.subject.each().

When I tried to alert(e.subject), I am getting alert message text “set(Part)#225”.

When I tried to alert(e.subject.data), I am getting alert message text “undefined”.

Tried all this but nothing helped. Seems e.subject is not collect in my case.

[QUOTE=walter]For discussion about GoJS collections: GoJS Collections -- Northwoods Software.

Perhaps your “ExternalObjectsDropped” Diagram listener could do something like:
function(e) {
e.subject.each(function(p) {
alert(p.data.Id);
});
}
[/quote]

6

Iterable.each is a new method in version 1.4, along with some other methods.

What works in all versions is discussed in GoJS Collections -- Northwoods Software, and can be seen in many samples.

7

Hi Walter,

We have purchased license for Version 1.3.8. Is there any method or work around available to pass the custom value to the event.

[QUOTE=walter]Iterable.each is a new method in version 1.4, along with some other methods.

What works in all versions is discussed in GoJS Collections -- Northwoods Software, and can be seen in many samples.

[/quote]

8

Have you read intro/collections.html in your version?

Or, if you did not download the ZIP file for a version 1.3.* GoJS web site, read the latest: http://gojs.net/latest/intro/collections.html and ignore mentions of the new Iterable.each method. In your Node template, you do not want to try to use: new go.Binding("EqipId","Id","1") because "EqipId" is not a known property on the Node class. If you look at the console log, you should have seen warnings about this. That is why my suggested code gets the "Id" property directly from the node data in the model.
9

Ok, I tried something like below, removed EqipId.

go$(go.Node, “Spot”, nodeStyle(),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“id”,“1”),
go$(go.Panel, “Auto”,

and in function tried to just alert it whether I am getting value “1”,

divFloor.addDiagramListener(“ExternalObjectsDropped”, function (e) {
alert(e.subject.id);
});

Still getting undefined. Did not get any collection.

10

I recommend that you read about data binding, http://gojs.net/latest/intro/dataBinding.html and http://gojs.net/latest/api/symbols/Binding.html#constructor, for why passing “1” as the second argument to the constructor is probably not what you want to do. Furthermore “id” is not a property of the Node class, so trying to bind that target property may produce a warning message, as I mentioned before.

And since in the DiagramEvent the value of e.subject is a collection (actually an instance of http://gojs.net/latest/api/symbols/Set.html) that does not have an “id” property, that is why you are getting an undefined value.

11

Hi Walter,

We are just started using the GoJS library in our project. I am at beginner level and do not have much knowledge about it. I have gone through the links you provided and seems this is not I wanted. I think I have not described my scenario correctly. Let me describe it shortly what I need to achieve,

My Palette having two component’s 1) Desktop & 2) Laptop. User can drag them on the floor. Floor can have more than one components. (i.e. can be 2 Desktop and 5 Laptops). What I want is,

  1. Each time user drags any component, I want to open one popup that will show the respective properties of that component. For this I need to pass what component (Desktop or Laptop) is being added to the floor. So I can pass that component Type to database and fetch the related property to show on the popup.

  2. Once he click save on the popup, all properties will be saved in database and procedure will return primary key. That primary key should be assigned to the respective component placed on floor. When that component is double clicked, I want to pass that Id to database to again fetch the properties, so I can show them again same popup for editing purpose.

Hope I have clearly explained my issue.

Please note, We have 1.3.8 version’s license, so searching for options available in that version only.

[QUOTE=walter]

I recommend that you read about data binding, http://gojs.net/latest/intro/dataBinding.html and http://gojs.net/latest/api/symbols/Binding.html#constructor, for why passing “1” as the second argument to the constructor is probably not what you want to do. Furthermore “id” is not a property of the Node class, so trying to bind that target property may produce a warning message, as I mentioned before.

And since in the DiagramEvent the value of e.subject is a collection (actually an instance of http://gojs.net/latest/api/symbols/Set.html) that does not have an “id” property, that is why you are getting an undefined value.[/quote]

12

OK, it sounds like you just need to add a property on each node data in your Palette’s model that tells you what type of component it is. Look at any of the samples that use a Palette, or the Introduction page about Palettes (GoJS Palette -- Northwoods Software), and you will see how the node data in the palette’s model has properties. In the case of the Introduction page, the extra property is named “color”, but you could use “componentType” if you would prefer.

In your main Diagram’s “ExternalObjectsDropped” listener, you can look at the Node.data to decide what to do, and you can update the data with whatever information your Node or your app needs.

myDiagram = $(go.Diagram, "myDiagramDiv", { . . ., // other initializations of the Diagram "ExternalObjectsDropped": function(e) { var it = e.subject.iterator; while (it.next()) { var node = it.value; if (node.data.componentType === "Desktop") { . . . } else . . . } } });
If you want to make any changes to the node data object for which you expect the GoJS diagram to care about, you should call Model.setDataProperty. All changes should be in a transaction. Please search for examples of this in the samples.

13

Thanks Walter,

node.data.componentType, It did work.

Let try to set the Id for that component using Model.setDataProperty.


Will update you.