Having “visible overflow” inside of a node or graphObject

GoJS
#1

I want to have a shape inside of a node, which would be partly out of the boundaries of the node. Meaning, -10px top and left of the parent element.

Right now I have rectangle and a circle inside of a node and it looks like this:

As you can see, the link does not connect properly, since the size of the node has expanded. I would like the circle to be, using css terms, to be absolutely positioned, in other words, I don’t want it to affect the node sizing the node (which is, obviously, invisible in this sample).

I have tried the following solutions:

Setting width and height to the node. Then it crops the circle, because it is out of the boundaries.

Using the fromSpot and toSpot properties in the node to connect the link to the center of the node. Apparently they are overridden by the layout, and I can’t figure out how to disable isLayoutPositioned

Using adornments, but I don’t understand at all how am I supposed to use them.

Searching if I could somehow set the overflow of the element visible, or to affect somehow the boundaries, or something like that, but have not found anything which would work for me.

What would be the proper solution here?

#2

Make your Node a “Spot” Panel, make the “main” element of your node the “port” by assigning it a GraphObject.portId, and position the red circle relative to the “main” element by setting its GraphObject.alignment property, in this case to go.Spot.TopLeft. I’m also guessing that assigning the Node.locationObjectName is what you will want.

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center, locationObjectName: "BODY" },
        $(go.Shape,
          { name: "BODY", width: 50, height: 50,
            fill: "lightgreen", strokeWidth: 0,
            portId: "" }),
        $(go.Shape, "Circle",
          { alignment: go.Spot.TopLeft, width: 20, height: 20,
            fill: "transparent", stroke: "red" })
      );

enter image description here

Please read more at http://gojs.net/latest/intro/nodes.html. I recommend reading not only the Getting Started page, http://gojs.net/learn, but also all of the Introduction pages, http://gojs.net/intro, that apply to the kind of app you want to create.

In particular, these should be useful:

I would prefer it if you didn’t ask the same question in multiple places. That wastes both your time and ours.

#3

Thank you for your assistance.

If you refer me asking the same question in StackOverflow, I don’t really see the problem. I don’t think you need to pay attention to SO if it feels like a waste of time.

GoJS is not very simple library to learn, the documentation is sometimes… a bit vague (sometimes, not always) and also I need to deliver.

#4

Well, we want to help everyone that we can. We normally get to StackOverflow after email and this forum. But this is a holiday weekend, so I happened to see SO first.

If you have any suggestions regarding how we could improve our documentation, we’d appreciate them.

#5

Right, happy holidays!

Well, as having purely a front end background having more code samples how to apply certain methods would help a lot. Of course, as a developer I should be able to read technical documentation, but occasionally I find it hard to wrap my head around some things without seeing how to actually apply it.

The application samples are great though, that helps a lot evaluating if the library will fit our company’s needs (at the moment I think it will fit us perfectly, especially when I learn how to handle it).

#6

Well, our documentation includes hundreds of live samples – there are no screenshots in our documentation. (Well, our home page and the samples index page do have a lot of screenshots. But not in http://gojs.net/learn or in http://gojs.net/intro.)