How add shape with in the shape

GoJS
1

I need to add small shape with in the shape. My requirement is add circle shape with in the ellipse shape.

Please find the screen shot for your reference .

please provide your suggestion.

2

You have at least two choices.

You could use two separate Shape instances within a Panel. The advantage is that each Shape could have a separate fill brush and a separate stroke brush. The disadvantage is that this requires more resources.

Or you could use a single Shape by giving it a Geometry that has what you want. You can do that either with a geometry path string, GoJS Geometry Path Strings -- Northwoods Software, or by building the Geometry programmatically: Geometry | GoJS API and PathFigure | GoJS API and PathSegment | GoJS API.

3

Thanks for your response. i have added shape with in shape. i have added four diamond shape in the ellipse shape.
i need to align diamond shapes in sequentially (x position - row wise) . please find my code.

$$(go.Node, “Auto”,
$$(go.Panel, “Auto”,
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node’s outer shape, which will surround the TextBlock
$$(go.Shape, “Ellipse”,
{
parameter1: 20, // the corner has a large radius
stroke: “black”,
portId: “”,
fromLinkable: true,
//fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
//toLinkableSelfNode: true,
toLinkableDuplicates: false,
cursor: “pointer”,
desiredSize: new go.Size(220, 50),
},
new go.Binding(“fill”, “color”),
{
click: function (e, obj)
{
selectedObject = obj;
},
},
new go.Binding(“stroke”, “borderColor”),
new go.Binding(“strokeWidth”, “thickness”)),
$$(go.Shape, “Diamond”,
{ alignment: go.Spot.Bottom,
fill: “yellow”, width: 14, height: 14,
//strokeWidth: 5,
//location:new go.Point(226,200),
// margin:5,
visible: true
}),
$$(go.Shape, “Diamond”,
{
alignment: go.Spot.Right,
fill: “blue”, width: 14, height: 14,
//strokeWidth: 5,
//location:new go.Point(226,200),
margin:4,
visible: true
}),
$$(go.Shape, “Diamond”,
{
alignment: go.Spot.BottomLeft,
fill: “orange”, width: 14, height: 14,
//strokeWidth: 5,
//location:new go.Point(226,200),
margin: 14,
visible: true
}),
$$(go.Shape, “Diamond”,
{
alignment: go.Spot.BottomRight,
fill: “red”, width: 14, height: 14,
//strokeWidth: 5,
//location:new go.Point(226,200),
margin: 4,
visible: true
}),
// new go.Binding(“subcategory”, “showIndication”).makeTwoWay()),
$$(go.TextBlock,
{
margin:15,
font: “bold 11pt helvetica, bold arial, sans-serif”,
stroke: lightText,
editable: false // editing the text automatically updates the model data
},
new go.Binding(“text”, “displayName”).makeTwoWay())
));

please provide your suggestion. how alight shapes same row with space

4

It’s very hard to read when it isn’t formatted/indented properly.

But I can see that you probably want to use a “Position” Panel, not an “Auto” Panel.

Also you will probably want to set Shape.isGeometryPositioned to true on each of those Shapes.