Difficulties in adding node and moving to desired location

Hi
I have several issue here ,
What Iam planning is remove the dropped node and add a another node when drop of 2 nodes is successful on a background Diagram .

The First issue I have to hard code the node as shown below , addnode does not work for me
myDiagram.model.addNodeData({key: “Rckasmbledptchpnl”, color: green, source:“cat6assembledtotalrack.png” ,size: “50 50”,pos: new go.Point(0, 0),level:“level1”,parent:“rack”});

The second issue is when we add the above node it always goes to the Topmost left grid always …
Please refer mouseDrop: function(e, node,prev) for the logic (Ignore prev not using anywhere)

Also I do not understand as to why I get Binding error: undefined target property at several places .

Planogram .ui-accordion .ui-accordion-content { padding: 1px; }

Patch Panels

Connectors

Cabinets

Big items

     <h4>Assembled items</h4>
	<div>
	 <div id="myPaletteAssembled" style="width: 140px; height: 360px"></div>
    </div>
  </div>
</span>
<span style="display: inline-block; vertical-align: top; width:80%">
  <div id="myDiagramDiv" style="border: solid 1px black; height: 500px"></div>
</span>

A planogram is a visual representation of a store's products or services, often used as a tool to maximize sales.

Drag-and-drop "items" from the Palette onto "racks" in the Diagram. "Items" are implemented as Nodes; "racks" are implemented as Groups. Once items have been placed on a rack, they can be resized, if necessary. The DraggingTool.isGridSnapEnabled and ResizingTool.isGridSnapEnabled are both set to true to allow for snapping to the background grid. Node and Group templates both use dragging functions to allow for highlighting so the user knows which rack an item will belong to.

A jQuery Accordion is used to create the four collapsible Palettes.

Diagram Model saved in JSON format, automatically updated after each transaction:

  

See also Northwoods Software's planogramming services: GoPlanogram.

I’m sorry, but I really cannot understand what you are describing in your post. Please review what you have written and edit it so that someone else can understand your situation and what you want and how it is different from what you have now.

For your first issue, calling Model.addNodeData is the normal thing to do when you want to add a node to your diagram. You should do so within a transaction.

Due to the presence of the parent property I assume you are using a TreeModel, yes? But the Planogram sample uses a GraphLinksModel.

Due to the presence of the pos property, you are not using a TreeLayout? The Planogram sample does require having a saved position for each node, because it does not use any Layout at all.

Walter
Assume that Iam using the sample planogram.html and
and I need add to another node say assembled rack when I drop 2 nodes mysmallpalette and mybigpalette .onto the background . How do I do that ?

The way I have thought about this is :
Before I add the assembled rack when mysmallplatte is added to mybigpalette I will check who is the parent of mysmallplatte and if it is mybigpalette then I will add it but before that I will remove both the palettes mysmallplatte and
mybigpalette but copy there current location and add the assembled rack at the same location .

How do I do that ? (Any layout is fine for me but the planogram sample is suiting my needs ).
Do we have any built in attributes to check location and parent for those templates or I have to add them ?
if I need to add do I need to change the Layout ?

OK, you’re starting from the Planogram sample, so you’re using the default Layout and a GraphLinksModel.

I am completely confused by what you mean by “mysmallpalette” and “mybigpalette”.

The Palette class inherits from Diagram, so the normal interpretation of those words would be to refer to two different Diagrams – in fact two of the Palettes created by that Planogram sample. Yet your words are treating them as if they were Nodes. Perhaps you mean Nodes that are copied from the respective Palettes.

But even that interpretation doesn’t make sense because then you talk about “when mysmallplatte is added to mybigpalette”, which does not make sense either for Palettes or for Nodes.

And what do you mean by “assembled rack”?

And what is the problem that you have?

Thanks Walter , All I do is follow what is there in the sample which shows small items (Which I refer as mysmallpallete)
and Tall Items as mybigpalette. Now seeing those I made another palette which I call as assembled rack palette but Rest of
the explanation remains same

The only properties that the models and diagrams know about are those defined by model properties whose names end in “…Property”. Anything to do with node location or colors or whatever have to be defined by you and appropriate Bindings in the template(s).

Presumably if your node template has a Binding for Node.location and a corresponding data property with an appropriate value for the location, the node will end up where the data specifies.

Thanks Walter , Can you give or point to an Example ?

In The example attached every time I drop a rack first and then patch panel I do get assembled rack but always at one position and that is not what I want I want the assembled rack to be placed in the Group where I put the patch panel and the Rack

Planogram .ui-accordion .ui-accordion-content { padding: 1px; }

Patch Panels

Connectors

Cabinets

Big items

     <h4>Assembled items</h4>
	<div>
	 <div id="myPaletteAssembled" style="width: 140px; height: 360px"></div>
    </div>
  </div>
</span>
<span style="display: inline-block; vertical-align: top; width:80%">
  <div id="myDiagramDiv" style="border: solid 1px black; height: 500px"></div>
</span>

A planogram is a visual representation of a store's products or services, often used as a tool to maximize sales.

Drag-and-drop "items" from the Palette onto "racks" in the Diagram. "Items" are implemented as Nodes; "racks" are implemented as Groups. Once items have been placed on a rack, they can be resized, if necessary. The DraggingTool.isGridSnapEnabled and ResizingTool.isGridSnapEnabled are both set to true to allow for snapping to the background grid. Node and Group templates both use dragging functions to allow for highlighting so the user knows which rack an item will belong to.

A jQuery Accordion is used to create the four collapsible Palettes.

Diagram Model saved in JSON format, automatically updated after each transaction:

  

See also Northwoods Software's planogramming services: GoPlanogram.

I hope you realize that when you try to post some code the results are completely nonsensical to all viewers. It appears as if you are trying to paste some HTML. You should just post the minimal needed JavaScript, surrounded by triple-backquotes on separate lines.

How is the behavior that you have now different from the behavior demonstrated by the Planogram sample? Isn’t what the Planogram sample does exactly what you want? If not, how do you want it to be different?

Note that in the Planogram sample racks are Groups. They have a mouseDrop event handler that adds dropped items (Nodes) to the group so that they become members of the group. That way when the user moves a rack/group, all of the member nodes move along.

My apologies Walter for the Spam , In planoGram when I drop the palette to a particular group Say G2 , I have an Extra logic which checks if the palette dropped is a child of the palette which is already there on G2 if yes than I remove both the
palettes and replace with a New palette , Pasting the code here .

mouseDrop: function(e, node,prev) {
_ //Took lot of time to get this_
_ var nodetoberemoved =null;_
_ var location=null;_
_ //Mouse drop here we will see if patch panel is dropped on a Rack and then chnage the image in background;_
_ //Can we add node to diagram if ptach is dropped on rack ?_
_ for (var it = e.diagram.selection.iterator; it.next(); )_
_ {_
_ var mynode = it.value;_
_ if (mynode.data.parent==“rack”)_
_ {_
_ console.log(“We have a matching key”);_
_ nodetoberemoved= mynode.data;_
_ console.log(“Spot is==================”,myDiagram.toolManager.draggingTool.gridSnapCellSpot.stringify);_
_ location=myDiagram.toolManager.draggingTool.gridSnapCellSpot;_
_ console.log("locationSpot from node ",mynode.data.locationSpot);_
_ console.log("location as given by dragging tool ",location);_

_ }_
_ console.log(“From for loop”,mynode.data.key);_
_ }_

_ console.log("Out of for loop and now removing the dropped node ");_

_ myDiagram.model.removeNodeData(nodetoberemoved);_
_ var model = myDiagram.model;_
_ model.startTransaction(“drop”);_
_ //Why should we hardcode this , can we not add a node_
_ console.log(" Adding Rackckassembledpatchpanel …");_
_ //What about Location ? where do you specify that ?_
_ myDiagram.model.addNodeData({key: “Rackassembledpatchpanel”, color: green, source:“cat6assembledtotalrack.png” ,size: “200 200”,pos:myDiagram.toolManager.draggingTool.gridSnapCellSpot});_
_ model.commitTransaction(“drop”);_

What I observe is myDiagram.model.addNodeData always adds this to Top left corner of the background instead of G2.
I dont understand why ?

Tell me what should I do so that myDiagram.model.addNodeData will add this to G2 since that is where I removed the palette using myDiagram.model.removeNodeData(nodetoberemoved)

(I’m still having a hard time reading your code, but at least it’s there. Code Formatting)

Note that the location of every Node (including any Group) is in document coordinates. So if a Group is at a particular location, you need to make sure that the node is there (perhaps with some offset) as well.

Please re-read Get Started with GoJS and the first dozen or so pages of the Introduction, starting at GoJS Introduction -- Northwoods Software. Note these two pages:
GoJS Data Binding -- Northwoods Software
GoJS Coordinate Systems-- Northwoods Software

Thanks Walter This has resolved some of my issues now Iam to track the position of a Node
using mynode.data.pos and this is set from new go.Binding(“position”, “pos”, go.Point.parse).makeTwoWay(go.Point.stringify) , Also Iam able to move the node after geting the positions
mynewnode.move(go.Point.parse(posofNodeRemoved));

But Iam getting an offset as shown below

How can i resolve this issue ? Should I use the translate api’s ?

Also one more issue I have is myDiagram.model.addNodeData(myPaletteAssembled) does not show my pallete on the Group , I have to specifically say
myDiagram.model.addNodeData({key: “Rackassembledpatchpanel”, color: green, source:“cat6assembledtotalrack.png” ,size: “150 150”});

Should I use You can also convert between coordinate systems by calling Diagram.transformDocToView34 and Diagram.transformViewToDoc here to resolve the issue ?

You haven’t described precisely what the issue is. Calling Node.move is certainly a good way to move a Node.

What is myPaletteAssembled? Is that a reference to a node data object that is held by the Palette.model? If so, I don’t think it makes any sense for that data object to be shared between the Palette and your Diagram. You need to copy that data object, probably by calling Model.copyNodeData.

Then should I use something like CopyNodeData for this ? Is there no example to show How to remove 2 palletes
if they come in sequence and add a palette from panel programmaticaly

Thanks Walter , is there any sample which you can recommend ?

I’m sorry, but I really do not understand what your problem is. You need to provide enough information so that we can figure out what you are doing and so that we can understand what you want that is different from what you have. Your terminology must be precise. And you must not include irrelevant details – show the simplest possible example that still demonstrates the problem that you have.

Try reading what you have written as if you had no knowledge of your project – ask an associate who is a programmer but who is not working on your project to review.