diagram.add(
$(go.Node, "Vertical",
{ rotatable: true, rotateObjectName: "SHAPE", // rotate the Shape, not the Node
locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
selectionObjectName: "SHAPE" },
$(go.Shape, "RoundedRectangle",
{ name: "SHAPE", fill: "orange", width: 50, height: 30 }),
$(go.TextBlock, "Hello!", { margin: 3 })
));
diagram.commandHandler.selectAll();
From this sample code, I’ve tried to add name = “SHAPE” to textblock too but it doesnot work for my node template.
myDiagram.nodeTemplateMap.add(
"", // default category
$(
go.Node,
"Auto",
{
locationSpot: go.Spot.Center,
},
{
selectionAdorned: true,
// selectionObjectName: "SHAPE",
// custom selection adornment: a blue rectangle
selectionAdornmentTemplate: $(
go.Adornment,
"Spot", //configuration panel
$(
go.Panel,
"Auto",
$(go.Shape, {
stroke: "Transparent",
strokeWidth: 2,
fill: null,
}),
$(go.Placeholder, { margin: 25 })
),
$(go.Shape, {
alignmentFocus: go.Spot.Top,
// alignment: new go.Spot(0.5, 1.2),
alignment: go.Spot.Bottom,
// margin: 15,
geometryString:
"M123 0H8C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16H123C127.418 16 131 12.4183 131 8C131 3.58172 127.418 0 123 0Z",
fill: "#00D1FF",
stroke: "#00D1FF",
strokeWidth: 40,
}),
$(
go.Panel,
"Horizontal",
{
// alignment: new go.Spot(0.5, 1.2),
alignmentFocus: go.Spot.Top,
alignment: go.Spot.Bottom,
},
$(
"Button",
{
margin: 15,
height: 26,
width: 26,
"ButtonBorder.stroke": null,
"ButtonBorder.fill": "#00D1FF",
click: function (e, button) {
// alert("Show Information about " + button.part.adornedPart.data.text);
// console.log("Show Information about " + button.part.adornedPart.data.text);
console.log(
"id on selected object = " + current_selection
);
alert("id on selected object = " + current_selection);
},
}, // defined below, to support editing the text of the node
$(go.Picture, "./settings.svg", {})
),
$(
"Button",
{
margin: 15,
height: 26,
width: 26,
"ButtonBorder.fill": "#00D1FF",
"ButtonBorder.stroke": null,
click: function (e, button) {
// this is different from CommandHandler.deleteSelection because this
// only deletes the one node, not all selected parts
e.diagram.commit(function (d) {
e.diagram.commandHandler.copySelection();
e.diagram.commandHandler.pasteSelection(
e.diagram.toolManager.contextMenuTool.mouseDownPoint
);
}, "copy node");
},
}, // defined below, to support editing the text of the node
$(go.Picture, "./copy.svg", {})
),
$(
"Button",
{
margin: 15,
height: 26,
width: 26,
"ButtonBorder.fill": "#00D1FF",
"ButtonBorder.stroke": null,
click: function (e, button) {
// this is different from CommandHandler.deleteSelection because this
// only deletes the one node, not all selected parts
e.diagram.commit(function (d) {
d.remove(button.part.adornedPart);
}, "deleted node");
},
}, // defined below, to support editing the text of the node
$(go.Picture, "./trash.svg", {})
)
)
),
},
new go.Binding("selectionAdorned", "selectionAdorned"),
{
resizable: true,
resizeObjectName: "SHAPE",
resizeAdornmentTemplate: $(
go.Adornment,
"Spot",
$(
go.Panel,
"Auto",
$(go.Shape, {
strokeDashArray: [8, 4],
stroke: "#00D1FF",
strokeWidth: 2,
fill: null,
// margin: -25
}),
$(go.Placeholder, { margin: 14 })
),
$(go.Shape, "Circle", {
alignment: go.Spot.TopRight,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 24),
cursor: "col-resize",
}),
$(go.Shape, "Circle", {
alignment: go.Spot.TopLeft,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 24),
cursor: "col-resize",
}),
$(go.Shape, "Circle", {
alignment: go.Spot.BottomLeft,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 24),
cursor: "col-resize",
}),
$(go.Shape, "Circle", {
alignment: go.Spot.BottomRight,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 24),
cursor: "col-resize",
}),
$(go.Shape, "roundedrectangle", {
alignment: go.Spot.Right,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(8, 24),
cursor: "col-resize",
}),
$(go.Shape, "roundedrectangle", {
alignment: go.Spot.Left,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(8, 24),
cursor: "col-resize",
}),
$(go.Shape, "roundedrectangle", {
alignment: go.Spot.Top,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 8),
cursor: "col-resize",
}),
$(go.Shape, "roundedrectangle", {
alignment: go.Spot.Bottom,
stroke: "#00D1FF",
// position: new go.Point(1, 1),
fill: "#00D1FF",
// margin: -25,
desiredSize: new go.Size(24, 8),
cursor: "col-resize",
})
),
},
new go.Binding("resizable", "resizable"),
{
rotatable: true,
rotateObjectName: "SHAPE",
// isShadowed: true,
// shadowOffset: new go.Point(2, 2),
// shadowBlur: 8,
// selectionAdorned: false,
},
//remember to remove the blue line decoration on selection
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
go.Point.stringify
),
$(
go.Panel,
"Verticle",
{ margin: 0 },
$(
go.Picture,
{
source: "", name: "SHAPE",
},
new go.Binding("source", "source").makeTwoWay()
)
),
$(
go.Shape,
"Ellipse",
{
strokeWidth: 2,
fill: "green",
name: "SHAPE",
// click: printKey,
}, //changing name for testing resize feature.
new go.Binding("figure", "figure"),
new go.Binding("fill", "fill"),
new go.Binding("stroke", "stroke"),
new go.Binding("name", "name"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("height", "height"),
new go.Binding("width", "width"),
new go.Binding("source", "source").makeTwoWay(),
new go.Binding("key", "figure", (fig) => {
if (fig === "circle" || fig === "rectangle" || fig === "square") {
console.log(fig);
current_selection = uuidv4();
return current_selection;
}
})
),
$(
go.TextBlock,
{
margin: 2,
// maxSize: new go.Size(200, NaN),
// wrap: go.TextBlock.WrapFit,
// textAlign: "center",
// editable: true,
font: "bold 10.5pt Inter, sans-serif",
// name: "TEXT",
name: "SHAPE",
background: "Transparemt",
width: 35,
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 1,
editable: true,
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("textAlign", "textAlign"),
new go.Binding("overflow", "textareaOverflow"),
new go.Binding("wrap", "wrap"),
new go.Binding("font", "textareaFont"),
new go.Binding("background", "background"),
new go.Binding("alignment", "TextAlignment"),
new go.Binding("margin", "Textmargin"),
new go.Binding("width", "textareaWidth"),
new go.Binding("maxLines", "textareaMaxLines")
)
)
);
