Spots in non-rectangular shapes

GoJS
1

My application utilizes icons within a node shape to serve as buttons for outside actions as well as indicators about the meaning of a particular node.

The placement of these icons into rectangular shapes is fairly reasonable using Go.Spot, i.e. ‘TopRight’, ‘TopLeft’, etc.

For example, here are icons I am using within rectangular shapes, or at least shapes with good ‘Spots’ that work:

However, once I get into non-rectangular shapes, spots only work on the rectangular portion, which forces me to place them into very arbitrary locations that don’t looks right. For example, this shape:

I would prefer to be able to place the icons in the corners of the diamond which would look much nicer.

Looking through the documentation, I haven’t seen any easy solution to this problem but it certainly seems like it should be possible. Are there ways to modify what Spots mean within a shape? Or should I be using a method to position the icons that is unrelated to Spots?

2

First, understand that you can use whatever fractional and offset values you want in Spots: Spot | GoJS API Also: GoJS Panels -- Northwoods Software

Second you have a choice: do you want to position those two icons relative to the TextBlock or to the whole Node? Either choice is reasonable, but each one has different features. Basically:

Node, "Spot",
    Panel, "Auto"
        Shape
        Panel, "Spot"
            TextBlock
            Shape (icon 1)
            Shape (icon 2)
    port 1
    port 2

Or:

Node, "Spot",
    Panel, "Auto"
        Shape
        TextBlock
        Shape (icon 1)
        Shape (icon 2)
    port 1
    port 2
3

My current node template (simplified) looks like this, where obviously ‘Rectangle’ changes based on the type of node as seen above.

   $(go.Node, 'Auto',
    	$(go.Shape, 'Rectangle'),
    	$(go.Shape, 'Icon1'),
    	$(go.Shape, 'Icon2'),
    	$(go.TextBlock)
    );

I can change the template if necessary. I’m assuming that I want the icon positions to be relative to the node shape, because, in the case of the diamond for example, I want to put the icons in the top and bottom corners of the diamond.

But, as far as I’m seeing, the normal Spot properties are just locations within a rectangular area. I need to place the icons outside of that rectangular area – into the corners of the diamond.

4

I don’t see what the problem is. Settting alignment to go.Spot.TopLeft should work.

Node, "Spot",
    Panel, "Auto"
        Shape
        TextBlock
    Shape (icon 1) { alignment: go.Spot.TopLeft }
    Shape (icon 2) { alignment: go.Spot.TopRight }

You might also want to set alignmentFocus for more precise alignments.

5

Perhaps it’s not clear where I’m trying to put the icons. Here is a quick image edit to show what I want the icons to look like in the Diamond shape.

As far as I can tell with the Spot alignment, I can only use it within a rectangular bound drawn within the diamond. I’d like to display the icons in the actual top/bottom corners of the diamond shape as seen in the image.

6

The positioning of your icons looks good, but it appears that you have set their background, causing obscuration of the main diamond Shape’s stroke.

You could also use an alignment Spot with a small offsetY value.

7

The image in my previous post is a Photoshop edit of a screenshot of what I’d like to achieve. I have not been able to achieve it with Go.Spot, due to the limitations on it being rectangular.

The rectangle of where I’m able to place things inside the shape is a rectangle inside of the node shape. These are the only places that I’ve been able to put the icons. Here’s a drawing of where I’m limited to:

I’d like to position things into the corners of the diamonds, outside of this rectangle. All of the documentation refers to placing things within a rectangular shape and any combo of the (0,1), (0.5, 0.5), (1,0) properties is just intended for that rectangular area. I need to position the icons outside of that area.

8

Have you tried what I last suggested?

9

I’m sorry, I appreciate your help, but none of your suggestions appear to have been capturing what it is that I am trying to do.

I am not trying to position things in the top left or top right of a rectangle.

I am trying to position things in the top and bottom of a diamond.

I want to put the icons where the arrows point here:

I have not been able to do this so far in GoJS. The image you saw in my previous post was photoshopped.

I can put the icons anywhere inside a rectangular shape that is inside the diamond. This is simple using Go.Spot.TopRight, Go.Spot.TopLeft, etc. But that’s not what I’m trying to do.

Right now, I am limited to a rectangle within the diamond, like so:

I can get anywhere within that rectangle using spots with the paired number values. But how do I place something in the top and bottom of the diamond?

10

I assumed it would be obvious to use go.Spot.Top and go.Spot.Bottom as the alignment values.
And you probably want to set alignmentFocus to the same values.

11

I was able to resolve this issue by putting a go.Panel.SpotPanel around the Diamond go.Shape.

In my second post, I gave the format of my node template, which shows that I was using the shape as the origin of my spots inside of an ‘Auto’ Node. With shapes, I assume GoJS creates a rectangular bounding box within the shape to use, therefore I was limited to the small box as seen in my images.

The node template structure is the important part, and Walter’s examples do work, but I assumed that his examples were just examples and not indications that my structure was incorrect. This was compounded by the fact that his first responses suggested go.Spot.TopLeft and Spot.TopRight, which led me to believe he had misunderstood my question.

By adding the SpotPanel around the shape, I can position anywhere within that rectangle, which bounds the entire diamond. Thus go.Spot.Top and go.Spot.Bottom work.

Walter, thanks for your help. I hope this post can help someone else who has trouble with the same thing.