GuidedDraggingTool how it will work for group template

GoJS
25

Hi,

public createGroupTemplate() {
this._groupTemplate = this.goMake(go.Group, “Spot”, {
locationSpot: go.Spot.Center,
layout: this.goMake(go.TreeLayout, {
arrangement: go.TreeLayout.ArrangementFixedRoots
})
},
new go.Binding(“location”, “location”, go.Point.parse).makeTwoWay(go.Point.stringify),
this.goMake(go.Panel, “Auto”,
this.goMake(go.Shape, “Rectangle”, {
parameter1: 14,
fill: “rgba(128,128,128,0.33)”,
stroke: “transparent”
},
new go.Binding(“fill”, “fill”)),
this.goMake(go.Placeholder, {
padding: 5,
alignment: go.Spot.Center
})
),
);
return this.groupTemplate;
}

26

It would be nice if in the future you formatted your code so that it’s easier to read.

Why are you using a Group.layout that is a TreeLayout? Do you expect to have links connecting the member nodes?

Because you do use a TreeLayout, unconnected nodes are arranged as if they were root nodes without any child nodes. That means they are arranged according to the TreeLayout.arrangement property and separated by the TreeLayout.arrangementSpacing property.

28

So dragging a node within the diagram is snapping correctly, but dropping a node from your HTML panel that implements the palette is not snapping correctly. Do I understand the situation correctly?

If you were using a Palette, you would be using the DraggingTool and you probably would not be having any problems with snapping.

But assuming that you have to implement your own drag-and-drop from some HTML element, what code are you executing to implement the drop?

29

yes Walter , you understood correctly,
I have Implemented Html palette having element
the code I am executing to implement the drop - I am using below html drop event
and getting the location and the location I am sending to the model while drop the element
HTML Drag and Drop, and external Clipboard pasting

 let mx = ev.clientX - bbox.left * ((can.width / pixelratio) / bbw) - dragged['offsetX'];
    let my = ev.clientY - bbox.top * ((can.height / pixelratio) / bbh) - dragged['offsetY'];
    let point = this.transformViewToDoc(new go.Point(mx, my));
    const org = this.grid.gridOrigin;
    const sz = this.grid.gridCellSize;
    point.snapToGrid(org.x + sz.width / 2, org.y + sz.height / 2, sz.width, sz.height);

the code I have written above giving me center position first time.
can we do some computation here like this
or is there any way we can set the node inside the grid cell let say if we can calculate the width and height of the node and based on the that we can fit the node either one cell or two cell … I am not sure whether it is possible or not …
whether it is possible or not in gojs I am not able to find out any solution in the gojs

can you provide some hint or example for the few nodes having different size and fit inside the cell only in the center

Thanks Walter for the supporting.

30

Hi Walter,
any workaround here?