Hi,
I want to place an arrow on the shape bottom right (see example).
The arrow should appear only near to specific node and it’s not change by another node click (can’t use nodeSelectionAdornmentTemplate).
I tried several ways to do this but all the solutions increase the node background size
without arrow
with arrow
What’s your node template? You can simplify what you post by removing unrelated functionality such as event handlers and Adornments.
My code template:
this.pedigreeDiagram.nodeTemplateMap.add(Gender.Female, // female $(go.Node, "Vertical", { locationSpot: go.Spot.Center, locationObjectName: "ICON", mouseEnter: this.mouseEnter, mouseLeave: this.mouseLeave }, $(go.Panel, { name: "ICON" }, $(go.Shape, "Circle", { width: 40, height: 40, strokeWidth: 1, portId: "", name: "FEMALE", fill: Colors.white, stroke: Colors.grayDark }, new go.Binding("opacity", "disabled", function (d) { return d ? 0.2 : 1; }) ), $(go.Panel, { itemTemplate: $(go.Panel, $(go.Shape, { stroke: null, strokeWidth: 0 }, new go.Binding("fill", "", this.attrFill), new go.Binding("geometry", "", this.femaleGeometry)) ), margin: 1 }, new go.Binding("itemArray", "codes") ) ), $(go.TextBlock, { textAlign: "center", maxSize: new go.Size(80, NaN) }, new go.Binding("text", "text")) ));
I try to add to add this arrow to specific node (when node is equal to user id)
Is there an option to add adornments to node template by node property? (not for selected node only)
It’s hard to read your code because it isn’t indented properly.
But I cannot see where you define that light-gray circular shape that I think you want to change.
What you want to do is make that light-gray filled circle not be surrounding the triangular arrow shape. I think you are going to have to reorganize your Panels to achieve that.
I used in Genogram nodes template: Genogram
I try to draw an arrow (or any shape for example):
the problem in my example is the arrow taking up space and pushing the text down
Is there an option to add adornments to node template by node property?
It is possible to use Adornments in the way that you imagine, but it’s a bit cumbersome.
I still cannot tell what you tried to do to get that arrow shape to appear.
I assume this extra shape is an optional thing that should be shown only when the data has some property or property value. So did you want it to be included in the codes data property, or should that be independent?
Note that the itemTemplate assumes that all of the shapes to be shown according to the data.codes Array are meant to go in the circle or square shape representing the person. So it really isn’t natural to try to implement the arrow shape using this mechanism.
I think you want to do something like what is shown in GoJS Nodes -- Northwoods Software. That means using a separate Panel just to position the (maybe visible) arrow Shape relative to the other panels holding objects. I suspect it would be most natural to use a “Spot” Panel for that, where the second element would be the arrow Shape.
Note that you have to make sure your big light-gray circle surrounds the icon and text objects, but not the whole node. That’s because you do not want the circle to surround the new “Spot” Panel that I’m suggesting.
that is great
thanks!!