Dear experts,
I want to get the dragged objects by the event ‘mouseDragEvent’ in myDiagram to drag them onto another object (‘backgroundObject’).
I get the following error : “Cannot read properties of undefined draggingTool”.
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
mouseDragEnter: (e, obj ) => {
var shape = obj.findObject("SHAPE");
console.log("backgroundObject: " + shape.part.data.key); // ok
var aPart= null, theKey = '';
var it = this.toolManager.draggingTool.draggedParts.iterator; // the error occurs in this line
while (it.next()) {
aPart = it.value;
console.log("draggedPart: " + aPart.data.key );
}
},
My second question: How can I prevent the ‘mouseDragEnter’-event fire onto the palette. I should do only on the diagram and not on the palette.
Dear support,
my use case should be simple:
Drag a node (‘dragNode’) onto another node ('target’Node) to read some ‘dragNode’.properties and set them in the 'target’Node.properties. This should do only in the same diagram (sceenshot2). The ‘dragNode’ is copied before from the palette to the diagram (screenshot1).
My problem is that I can’t read the ‘draggedNode’.properties ( see.screenshot2 / 3) .
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Top,
isShadowed: true, shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)",
mouseDragEnter: (e, obj) => {
// get node data of the 'target' node in the diagram - it looks OK in the console!
var shape = obj.findObject("SHAPE");
console.log("targetNode.key: " + shape.part.data.key); // key = className
console.log("targetNode.label: " + shape.part.data.label);
console.log("targetNode.iconText: " + shape.part.data.iconText);
console.log("targetNode.subComponents[0].instanceName: " + shape.part.data.subComponents[0].instanceName);
console.log("targetNode.subComponents[0].icon: " + shape.part.data.subComponents[0].icon);
console.log("targetNode.subComponents[1].instanceName: " + shape.part.data.subComponents[1].instanceName);
console.log("targetNode.shape.part.data.subComponents[1].icon: " + shape.part.data.subComponents[1].icon);
// get node data of the dragged node, which should be dragged onto 'target' node in the same diagram
var diagram = obj.diagram;
var tool = diagram.toolManager.draggingTool;
/*
//var it = tool.copiedParts.iterator;
copy nodes the from the palette directly onto a diagram node should not be possible,
because the user had to set some node properties before dragging !
*/
var it = tool.draggedParts.iterator;
console.log("it.count: " + it.count ); // it.count = 1 ; looks OK - I drag only 1 node
while (it.next()) {
console.log("it :" + it);
// in the console.log there is 1 node data [object Object]
console.log("it key | value :" + it.key + ": " + it.value);
// ERROR : I can't read node data [object Object]
console.log("it key | value[0].key :" + it.key + ": " + it.value[0].key);
console.log("it key | value[0].label :" + it.key + ": " + it.value[0].label);
}
/* My use case is focused only on the 'mouseDragEnter' event to read
some draggedNode.properties to set them into the targetNode.properties
*/
},
In the code below you see the setting of the palette node. The code runs successfull (see the palette in the screenshots). But I can’t read the properties later after the dragging!
xmlDoc = parser.parseFromString(components,"text/xml");
var lComponent = xmlDoc.getElementsByTagName("Component");
var Component = lComponent.item(0);
while(Component) {
if( Component.getAttribute( 'category' ) == 'AppControl' )
{
paletteAppControl.model.addNodeData(
{
// use case : get this properties later if the node is dragged
//- but I can't read it !
key: Component.getAttribute('name'),
icon: Component.getAttribute('icon'),
iconText: Component.getAttribute('iconText'),
label: Component.getAttribute('label'),
figure:"Rectangle"
}
);
}
Component = Component.nextElementSibling;
} // end while(Component )
Since you declared the mouseDragEnter event handler on the Node of the node template, the second argument will always be a Node copied from that template. So you do not need to find the “SHAPE” object and use its shape.part.
Furthermore that argument will always be in the target diagram, so its diagram property will never be the source diagram/palette. When a cross-diagram drag-and-drop is happening, it is only the source diagram’s DraggingTool that is running. The dragging operation makes use of the target diagram’s DraggingTool, but that tool is not running – i.e. Diagram.currentTool will not be a DraggingTool.
mouseDragEnter: (e, node) => {
// node.key of stationary Node
if (e.diagram.currentTool instanceof go.DraggingTool) {
// dragging within myDiagram
} else {
// dragging from a different Diagram
}
}
Dear support,
sorry - but the same problem occurs. I understand the principle of the two different draggingTools (diagram and palette). I want to drag nodes in 'myDiagram" .
What is in my code wrong ?
Thanks!
Hallo Walter,
thanks for your patience to solve my problem !
Maybe a I haven’t the correct understanding to get node properties …
Please look at the screenshot which explain my use case - Thanks!
