Can we use custom Shape or SVG as adornment like we import icons in Icon example.
Also for simple Adornments can we give it dimensions like radius or width.
Yes, one can do that. For what purpose do you want to show Adornments? And what do you mean by specifying radius or width? It would help if you could provide small screenshots showing how the Adornment would change with different values.
Like in this Screenshot the adronment set default is small, i want it to be bigger than this how can we achieve that
and if i want to show some thing like in below figure, is it possible?
If you are copying the code from the Logic Circuit sample, Logic Circuit, you will see that those nodes do not use selection Adornments. They use shadows instead. What effect do you want to achieve when the user selects a node?
How did you draw that second image? Do you have SVG for that? And do you want to customize what is drawn for each node? If so, then you will need to define a function that creates and returns a Geometry meeting your requirements. Then the Shape should have a Binding on its Shape.geometry property that uses a conversion function that calls your geometry-generating function with the parameter values it needs.
For simpler examples of that technique, see:
-
Pie Charts, the
makeGeofunction -
Tool for Reshaping a Sector of a Circle, the
makeSectorfunction
Yes Logic circuit uses shadow but i want adornment and for that i want to configure size. How to do that?
We have image and that we can convert to SVG. The screenshot was that image only.
I want to achieve the effect represented in 2nd image and that too should start from the front of this node only.
So do you want to show something only when the user selects a node? If so, then GoJS Selection -- Northwoods Software starts the explanation of how to do so. Note how the Placeholder will be the same size as the adorned object.
Did you want to show the same thing for each node? If it needs to be parameterized from the node data, then you need to do something like what I outlined above.
No it can be different for different nodes.
OK, have I given you enough information for you to implement what you want? If not, please ask detailed questions.
I get it that we can give it custom shapes that we define but it is still unclear how to give them size, all the examples you provided didn’t explain how we can give it size other than stroke width. Is there any other property which we can provide it so that we can increase the area of Fill.
Hi Walter,
We are looking for a layer to be drawn on top of an Icon(which I have dragged from the palette). It is kind of shows the range for the particular icon.
@Abhishek, you have complete control over everything that is drawn when you create the Geometry for a Shape in the Adornment. That is why I gave you some examples of generating Geometrys in code that produce different results depending on some parameters.
Please read this general introduction to SVG paths: Paths — SVG 2. But note two important facts: it is much more efficient to generate PathSegments and PathFigures in code than it is to generate a string that has to be parsed, and GoJS geometries provide a strict superset of the functionality than can be expressed by SVG path strings.
@Nitin304, are you working with @Abhishek or are you asking for a different project? That is what Adornments are for – they are in the “Adornment” Layer, GoJS Layers -- Northwoods Software
This is how i achieved it
go.Shape.defineFigureGenerator("customFigureNew", function(shape, w, h){
var geo = go.Geometry.parse("PATH");
geo.normalize();
return geo;
});
var xorTemplate =
$(go.Node,
{
selectionAdornmentTemplate: // custom selection adornment: a blue rectangle
$(go.Adornment, "Auto",
{ layerName: "Background" },
$(go.Shape, "customFigureNew", { fill: "yellow", stroke: "pink", strokeWidth: 1 }),
$(go.Placeholder)
)
},
{ rotatable: true, rotateObjectName: "XorGate" },
"Spot", nodeStyle(),
$(go.Shape, "XorGate", shapeStyle()),
$(go.Shape, "Rectangle", portStyle(true),
{ portId: "in1", alignment: new go.Spot(0.26, 0.3) }),
$(go.Shape, "Rectangle", portStyle(true),
{ portId: "in2", alignment: new go.Spot(0.26, 0.7) }),
$(go.Shape, "Rectangle", portStyle(false),
{ portId: "out", alignment: new go.Spot(1, 0.5) })
);First, “PATH” is not a valid geometry path string – the syntax is nonsensical. But maybe you substituted it for this forum post.
Second, you are not generating a Geometry whose size depends on the given width and height. I suspect you do not need to bother with defining a custom figure – just generate the Geometry that you need and assign it to tje Shape.geometry.
Third, your selectionAdornmentTemplate should be a “Spot” Panel. GoJS Panels -- Northwoods Software
- Yes the path is just substitute.
- How to use height and width with geometry that is being generated with Path.
- How to Use “Spot” panel for selectionAdornmentTemplate. If i use Sopt it gives error
I think you meant it like this.
$(go.Adornment, "Spot",
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape,
{
geometryString: "...path...",
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
stroke: "pink",
. . .
})
)
No need for any custom figure generator. The Shape will get whatever size that the Geometry has.
I am also using Geo string in same way for other images also to display them in pallete and Diagram, how to use width and height there.
go.Shape.defineFigureGenerator("customFigure", function(shape, w, h){
var geo = go.Geometry.parse(CustomFigures.Figure1);
geo.normalize();
return geo;
});
var customTemplate =
$(go.Node,
"Spot", nodeStyle(),
{
selectionAdornmentTemplate: // custom selection adornment
$(go.Adornment, "Spot",
{ layerName: "Layer"},
$(go.Shape, "customFigureNew", { fill: null, stroke: "pink", strokeWidth: 1 }),
$(go.Placeholder)
)
},
$(go.Shape, "customFigure", shapeStyle()),
{ rotatable: true, rotateObjectName: "customFigure" },
);
this.diagram.nodeTemplateMap.add("custom", customTemplate);Thanks for the above solution that worked.