I am trying to bind values for Margin. When text align is topleft, topright or topcenter is provide and negative value is provided to margin, then the text is not visible ( Since it is outof bounds of the node).
Can it be made possible to show text out side the bounds of node ?
For eq. Shape in the node is displayed with small bounds and its text when aligned top,bottom is not displayed properly.
Hence needed to move outside the shape. Trying negative values doesn’t show the text.
It’s hard to provide good feedback when you show neither a screenshot nor the relevant part of the template.
I’m guessing that you are using an Auto Panel to provide a border around the TextBlock. Try using a Spot Panel instead.
I am using following template -
myDiagram.nodeTemplate = $$(go.Node, “Spot”,
{
locationObjectName: “SHAPE”, locationSpot: go.Spot.Center, zOrder: 0,
resizable: true, resizeObjectName: “PANEL”,
selectionAdorned: true
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“zOrder”, “zOrder”),
$$(go.Panel, “Auto”,
{
name: “PANEL”,
},
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify),
$$(go.Panel, “Spot”,
$$(go.Shape,
{
name: “SHAPE”, figure : “triangle”,
fill: “red”, stroke: “black”,strokeWidth:3,
portId: “”,
fromLinkable: true, toLinkable: true,
stretch: go.GraphObject.Fill,
}
),
$$(go.TextBlock, // the center text
{
alignment: go.Spot.TopRight, cursor: “move”, margin:-10, text :“Rectangle”,
overflow: go.TextBlock.OverflowEllipsis, maxLines: 1,
editable: true, isMultiline: false,
stroke : “black”
})
)
) // end Auto Panel
); // end go.Node, which is a Spot Panel with bound itemArray
With this template I am not able to move the text away from shape -
When margin is given negative, it becomes invisible or partially visible. I think it is not the correct one I am using.
How to move text away from shape ?
The other problem I am facing are -
Yes, setting a negative margin on any object is likely to cause clipping.
You have an unneeded Auto Panel, and I have redirected resizing and selection handles to the “SHAPE”:
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationObjectName: "SHAPE", locationSpot: go.Spot.Center,
zOrder: 0,
resizable: true, resizeObjectName: "SHAPE",
selectionAdorned: true, selectionObjectName: "SHAPE"
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("zOrder", "zOrder"),
$(go.Panel, "Spot",
$(go.Shape,
{
name: "SHAPE", figure: "triangle",
fill: "red", stroke: "black", strokeWidth: 3,
portId: "",
fromLinkable: true, toLinkable: true,
stretch: go.GraphObject.Fill,
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
),
$(go.TextBlock, // the center text
{
alignment: go.Spot.TopRight, cursor: "move", text: "Rectangle",
overflow: go.TextBlock.OverflowEllipsis, maxLines: 1,
editable: true, isMultiline: false,
stroke: "black"
})
)
); // end go.Node, which is a Spot Panel with bound itemArray
I assume there was no binding for Panel.itemArray because you simplified the node template – thanks!
Thanks Walter,
Resizing issue and selection adornments around shape is working as expected.
Now if I set aligment to - go.Spot.MiddleTop then text and shape lines gets mixed.
How one can move it bit above ? ( OR if someone wants it horizontally center but not vertically center then what property needs to be set to based on the aligment position text gets shifted left or right or top or bottom ) ?
With the template you provided, Image and text is displayed for Triangle as required.
But when shape is changed to Circle, and alignment is “TopCenter” Or “MiddleCenter” with text rotated,
it gets attached with shape as shown in fig.
Changing font size displayes the text outside the area of rectangle bounds.
Trying to move it bit on left side using positive margin doesn’t work. But negative margin clips the text as you mentioned previously.
How one can move that bit away from edges of shape using margin ? Or some other way ??
I’m not sure what you want. Did you set GraphObject.alignmentFocus on the TextBlock?
If so, try also using Spots with offsets, either with the GraphObject.alignment or with the GraphObject.alignmentFocus. GoJS Panels -- Northwoods Software
Yes. Walter.
Working as expected now.
Needs one addition in that - When I set the spot as go.Spot(0,0,0,0) , the text is aligned at the top left position and center of text at left position , resulting some text outside (left & top).
Later on setting the offset value text gets moved inside the shape. Here i need to calculate the offset values by considering the actual text and space required for same (based on font , font size etc).
How I can get the space bounds required for text ??
You cannot easily do so ahead of time.
Usually a wise choice of alignment and alignmentFocus works well. But what is it that you want to do?