Even though the textblock area is inside the rectangle, it goes to a far area when switching to edit mode
It should be as shown in the picture below.
Could you please tell us enough to be able to reproduce this behavior?
If the height of the object is increased and the model is zoomed out several times, the text information area may be too high on the object or it is out of view.
A nodeTemplate like below
GO(go.Group, "Auto",
{
name: "SEGMENT",
locationSpot: go.Spot.TopLeft,
rotateObjectName: "SEGMENT",
layerName: "Background", // all pools and lanes are always behind all nodes and links
background: "transparent", // can grab anywhere in bounds
copyable: false, // can't copy lanes or pools
avoidable: false, // don't impede AvoidsNodes routed Links
computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
computesBoundsIncludingLinks: false, // to reduce occurrences of links going briefly outside the lane
computesBoundsIncludingLocation: true, // to support empty space at top-left corner of lane
handlesDragDropForMembers: true
},
{
selectionAdorned: true,
selectionAdornmentTemplate:
GO(go.Adornment, "Auto",
GO(go.Shape, { stroke: "dodgerblue", fill: null }),
GO(go.Placeholder, { margin: -1 }))
},
new go.Binding("angle").makeTwoWay(),
GO(go.Shape,
{
fill: "transparent", stroke: "transparent", strokeWidth: 1,
strokeDashArray: [10, 6]
},
new go.Binding("stroke", "font", function (val, node) {
return internalHelper._getBorderColor(node.part.data);
})
),
GO(go.Panel, "Table",
{
defaultColumnSeparatorDashArray: [10, 6],
defaultRowSeparatorDashArray: [10, 6]
},
GO(go.RowColumnDefinition, {
column: 0
}),
GO(go.RowColumnDefinition, { column: 1, background: "transparent" }),
{
stretch: go.GraphObject.Fill,
defaultColumnSeparatorStroke: "transparent",
defaultRowSeparatorStroke: "transparent",
},
GO(go.Panel, "Auto",
{
name: "HEADER",
stretch: go.GraphObject.Fill,
background: "transparent",
column: 0
},
GO(go.TextBlock,
{
name: "HEADERTEXT",
editable: true, margin: 5,
stretch: go.GraphObject.Fill,
verticalAlignment: go.Spot.Center,
angle: 270
},
new go.Binding("text").makeTwoWay()
)
),
GO(go.Shape,
{
name: "SHAPE",
fill: "transparent",
column: 1,
stretch: go.GraphObject.Fill,
strokeWidth: 0,
minSize: new go.Size(100, 100)
},
new go.Binding("desiredSize", "", function (part) {
var holderSize = part.findObject("HOLDER").actualBounds;
var size = go.Size.parse(part.data.size);
return new go.Size(Math.max(size.width, holderSize.width), Math.max(size.height, holderSize.height));
}).ofObject().makeTwoWay(function (val, node, model) {
node.diagram.model.setDataProperty(node.data, "size", go.Size.stringify(val));
})
),
GO(go.Placeholder, {
name: "HOLDER",
alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft, column: 1, background: "transparent"
})
)
);
When I try your unmodified code, zoom out to make everything look small, and start editing a group’s text, I get:
This seems perfectly reasonable behavior. Note that the text editor is always upright – not at the angle of the TextBlock, so the area of the text editor is not supposed to match the area of the text block.
Horizontal Section" object’s text information is set to horizontal, as the height or size of the object is increased, the text information editing area may be too high above the object or out of view.
templateMap.add("FreeFormatShape", GO(go.Node, "Spot",
{
rotateObjectName: "",
locationSpot: go.Spot.TopLeft,
},
new go.Binding("angle").makeTwoWay(),
GO(go.Shape, { name: "SHAPE", fill: "#FFF", strokeWidth: 1.5 }),
GO(go.TextBlock,
{
editable: true, minSize: new go.Size(50, 50), verticalAlignment: go.Spot.Center, textAlign: "center",
overflow: go.TextBlock.OverflowEllipsis
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("angle").makeTwoWay()
)
));
We’ll try to improve the positioning of the textarea when textAlign is center and the TextBlock is rotated.
In the meantime you can make such changes for yourself by copying and adapting the extensions/TextEditor.js or extensionsJSM/TextEditor.ts files. You will want to fix the values of the top and left variables/styles.
If you try the GoJS 2.2 beta: https://gojs.net/beta/
or npm i gojs@beta
Do you find the results better? It should center more appropriately, now.
Fixed after trying GoJS 2.2 update
Thank you