The idea of making the TextBlock Node draggable will work for me, but you have declared the groupTemplate and TextBlock Node separately. What I am looking for is to incorporate this TextBlock in the default groupTemplate so that it becomes a part of it and appears as a default entity even when I create a zone using the polyline tool.
I tried putting the exact node template in place of my current TextBlock Panel but the error says “use a Panel instead.” . And when I change it to Panel, it says "Panel does not have a property of dragcomputation"
Below is my groupTemplate for reference.
this.floorPlan.groupTemplate = $(
go.Group,
go.Group.Spot,
{
layerName: "BlockLayer",
locationSpot: go.Spot.TopLeft
},
{
// This is to prevent the overlap both while creating and dragging
dragComputation: avoidNodeOverlap
},
{
selectionAdorned: true,
selectionObjectName: "SHAPE",
// custom selection adornment: a blue rectangle
selectionAdornmentTemplate: $(
go.Adornment,
"Auto",
$(go.Shape, { stroke: "dodgerblue", fill: null }),
$(go.Placeholder, { margin: -1 })
)
},
{ resizable: true, resizeObjectName: "SHAPE" },
{ reshapable: true },
$(
go.Shape,
{
name: "SHAPE",
fill: groupFill,
stroke: groupStroke
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(
go.Size.stringify
),
new go.Binding("angle").makeTwoWay(),
new go.Binding("geometryString", "geo").makeTwoWay()
),
{
resizable: true,
resizeObjectName: "SHAPE"
// because the gridSnapCellSpot is Center, offset the Group's location
// locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),
// zOrder:1
},
// always save/load the point that is the top-left corner of the node, not the location
new go.Binding("position", "pos", go.Point.parse).makeTwoWay(
go.Point.stringify
),
{
// what to do when a drag-over or a drag-drop occurs on a Group
mouseDragEnter(e, grp, prev) {
highlightGroup(grp, true);
},
mouseDragLeave(e, grp, next) {
highlightGroup(grp, false);
},
click(e, grp) {
if (
parentctxt.stampingMode &&
e.diagram.toolManager.clickCreatingTool.archetypeNodeData &&
Object.entries(
e.diagram.toolManager.clickCreatingTool.archetypeNodeData
).length
) {
e.diagram.startTransaction("stamp product");
const p = e.diagram.toolManager.clickCreatingTool.insertPart(
new go.Point(e.documentPoint.x + 15, e.documentPoint.y + 15)
);
p.data.zoneId = grp["data"].groupId;
let list = new go.List<go.Part>();
list.add(p);
grp["addMembers"](list, true);
e.diagram.commitTransaction("stamp product");
parentctxt.updateBOM(p, 1);
}
},
contextClick(e) { }
},
$(
go.Panel,
"Table",
$(
go.TextBlock,
{
overflow: go.TextBlock.OverflowEllipsis,
textAlign: "left",
font: "11pt Proxima Nova Helvetica Neue Helvetica Arial sans-serif",
stroke: "red",
editable: true,
isMultiline: false,
textValidation: this.isZoneNameValid,
},
},
new go.Binding("text", "key").makeTwoWay()
)
),
);