Spot Panel within an Auto panel


#1

Hi,
I have a group template that looks like this :

GO(go.Group, "Auto",
    GO(go.Shape, "Rectangle", // surrounds everything),
    GO(go.Panel, "Spot",  // visible only when collapsed
        { width: 80, height: 80, fill: "gray"... },
        GO(go.Picture, alignment : go.Spot.LeftCenter....)
        GO(go.PlaceHolder....) 
    )
); // end Template

Since the Group is “Auto”, i get the following results, for the collapsed state :
image
As seen, the “Spot” panel “looses” some width, becasue of the left spotted picture.
What needs to be done in order to maintain the “spot” width ?
Regards,
Tany


#2

I appreciate the outline of your template, but I would appreciate it more if you indented it correctly. I have done that, but I had to change the code, because it didn’t make sense.

There is no fill property on the Panel class. Also, I don’t think it makes sense to put the Placeholder relative to the Picture in the “Spot” Panel.

You do have the (Rounded)Rectangle Shape surrounding the whole “Spot” Panel. Isn’t that what you wanted?


#3

It looks like I made a mistake:
GO(go.Group, “Auto”,
GO(go.Shape, “Rectangle”, // surrounds everything),
GO(go.Panel, “Spot”, // visible only when collapsed
{ width: 80, height: 80, fill: “gray”… },
GO(go.Picture, alignment : go.Spot.LeftCenter…)
) // end Spot
GO(go.PlaceHolder…)
)
); // end Template

The PlaceHolder is not within the Spot panel, but “besides” it. The “Spot” panel becomes invisible when the group is exapnded.


#4

In this forum, surround your code with lines consisting of three backquotes.

From what I can guess trying to read your code, your visual tree still has serious problems.

It’s probably not a good idea to try to set the height and width of the “Spot” Panel. But it’s even more odd when the “Spot” Panel only has the main element in it – with no element to align relative to that main element. You should be seeing a warning about this if you are using go-debug.js.

What should be the physical relationship between the Spot Panel and the Placeholder?


#5

I’m sorry for not being aware of code formatting. Will try to use it, in the future.
Let’s ignore my template. i will try explain my group template verbally :
I would like to implement a group that :
When Collapsed, it has rectangle shape, with picture and text boxes spotted with the rectangle box. Some of the pictures should be aligned “outside” the rectangle box (that’s why i used “Spot” panel, in order to align the pictures on the edge of the box) :
image
When Expanded, the group members should float within a rectangle area, while the pics and text boxes should disappear :
image
I don’t know how to combine both Panels.


#6
    myDiagram.groupTemplate =
      $(go.Group,
        { // just for testing:
          click: function(e, grp) {
            var c = grp.diagram.commandHandler;
            if (grp.isSubGraphExpanded) c.collapseSubGraph(grp); else c.expandSubGraph(grp);
          }
        },
        $(go.Panel, "Spot",
          new go.Binding("visible", "isSubGraphExpanded", function(e) { return !e; }).ofObject(),
          $(go.Shape, "RoundedRectangle", { width: 80, height: 80, fill: "lightgray" }),
          $(go.Shape, { alignment: go.Spot.Left, width: 30, height: 10, fill: "lightblue" })
        ),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSubGraphExpanded").ofObject(),
          $(go.Shape, "RoundedRectangle", { fill: "white" }),
          $(go.Placeholder)
        )
      );

#7

Look good, Thanks.
Unfortunately, the template raises back the selectionObjectName issue mentioned in the other thread.
If you notice, when the collapsed group is selected, the whole node is selected.
I tried to use the selectionObjectName in order to select only the rectangle objects.
I set the rectangle name in the Spot panel to be “CCC” and the rectangle name in the “Auto” panel to be “EEE”.
I have implemented the “click” function that sets the grp.selecttionObjectName to “EEE” or “CCC” according to the isSubGraphExpanded value. It works, yet, an additional click needs to be clicked in order to hide the last selected rectangle :
image .
After clicking somewhere on the diagram, the red rectangle gets hidden.
I must have implement the click function wrong :
if (grp.isSubGraphExpanded) grp.selectionObjectName = “EEE”; else grp.selectionObjectName = “CCC”;

Actually, i managed to overcome it by calling :
diagram.model.setDataProperty(grp.data, “selectionObjectName”, “CCC”);
OR
diagram.model.setDataProperty(grp.data, “selectionObjectName”, “EEE”);
on click and on doubleClick.
Thanks


#8

I’d recommend that you not include GraphObject names in your model data. Really, anything relating to the styling of information deserves special attention to decide whether it belongs in the model data or if it should just be part of the template.


#9

OK,
so i just
grp.selectionObjectName=“EEE”;
or
grp.selectionObjectName=“CCC”;
Thanks


#10

Now, i face a new problem:
When i add ‘parameter1: 20’ (to be much more rounded) to both shape and selectionAdornmentTemplate:
the object looks like this :
image
but when selected :
image
And when set to 30 :
image
In general,
I have noticed that the Adornment is NOT “sitting” exactly on the selected object, but adds an extra rectangle that surrounds the selected object :
image
Is it possible NOT to add extra rectangle and only emphasize the selected rectangle ?
I managed to workaround it with “transparent” Adornment and

new go.Binding("isSelected","isSelected",function(s,obj){ return s ? obj.strokeWidth=3 : 4 }).ofObject()

on the selected object.
image

Is this the right way to work ?


#11

Set https://gojs.net/latest/api/symbols/Shape.html#spot1 and spot2 to values that are close to go.SpotTopLeft and go.Spot.BottomRight, respectively.


#12

Wonderfull !!
I switched back to selectionAdornment method.
Thanks