Using layers with panels

GoJS
#1

Hi,

Is it possible to use the layer functionality on panels?

We currently have a group template which a placeholder for the items and then a secondary panel which displays some text boxes for that group.
We currently have this implemented using a boolean stored in the model data and binding it to the panel that holds the textboxes like so:

  $(
    Group,
    'Vertical',
    $(Panel, 'Auto', $(Placeholder), { name: 'items' }),
    $(
      Panel,
      'Vertical',
      new Binding('visible', 'showPropertyBox').ofModel(),
      ...otherTextboxesAndStuff
    )
  )

which we then toggle using:

    const { model } = this.diagram;
    model.setDataProperty(model.modelData, 'showPropertyBox', this.showPropertyBox);

We are now looking into implementing layers throughout the app (We would like to add the property box its own layer too) but I cannot seem to get it working without hiding the member parts in the group too. Is this possible or should we stick with binding the data property in the specific panel itself?

Thanks

#2

Everything that you add to the visual structure of a node or group or link template is in the visual tree of that part. All GraphObjects within a visual tree are drawn in the same Layer.

Every Part can be in a different Layer, so for Groups, the member Parts can be in different Layers than the Group itself, as well as in different Layers from each other.

I would guess that with your group template there is no way for any member nodes to be overlapping with the second panel that is your property box. So I would not think that the relative z-ordering of the member nodes with the group will matter.

Are you trying to make sure that the property box is not obscured by other non-overlapping groups?

Why not make the property box an Adornment? All Adornments normally go into the “Adornment” Layer, which is in front of all of the regular Layers.

It would be easiest to make it a selection adornment. However that would mean that the group would need to be selected for the corresponding adornment to appear. You could also manage the adornment yourself, having it show whenever you want.

#3

Hi, you are correct about the member parts not being able to overlap with the second panel (the property box).

The aim is that the property boxes visibility is optional so the user can choose if they want it displayed on the diagram or not, but the group itself and its member parts should still be visible / visible based on their own layer.

We currently bind the property boxes visibility to a boolean and show and hide the visibility of the property box panel.

We are not too concerned with the property box being obscured / overlapping at the moment as the current layout forces the parts (and thus the bounds of the groups) to not collide or overlap with each other. we just want the property box visibility itself to be togglable.

We have already implemented this using property bindings and setting a boolean in the data modal to set the panels visibility but now we are implementing layers on all of our parts so I would like to reduce the amount of different implementations to simplify the code and if its possible to use the layer system to toggle the property box.

#4

Since each property box is within its group, and the layout makes sure that the property boxes do not overlap any other groups, what is the problem?

#5

The problem I am having is changing the property boxes visibility implementation from using the binding on the panel to using layers.

  $(
    Group,
    'Vertical',
    $(Panel, 'Auto', $(Placeholder), { name: 'items' }),
    // Just the panel below visibility should be toggled not the whole group
    $(
      Panel,
      'Vertical',
      new Binding('visible', 'showPropertyBox').ofModel(),
      ...otherTextboxesAndStuff
    )
  )

The diagram either failed to render when I specify the layerName on the panel or the whole group (including the member parts) visibility was toggled as one not just the property box.

I think however your previous message might answer the issue I’m having through as you mentioned:

Everything that you add to the visual structure of a node or group or link template is in the visual tree of that part. All GraphObjects within a visual tree are drawn in the same Layer.

So it seems I will have to continue using the binding implementation we are already using to hide just the panel in the group template.