How to reorganize pallete?

GoJS
#1

I would like to reorganize pallete to look similar as following:

ss1.png1021×576 17.4 KB

Of course, instead of names there should be elements that look as following:

ss2.png744×548 16 KB

The each element should be in separate cell.

#2

Doesn’t the default Palette.layout do that already? Or perhaps you need to set the Palette’s properties appropriately, such as by modifying or replacing its Diagram.grid property.

#3

This doesn’t work:

var palette = $(go.Palette, "palette", // create a new Palette in the HTML DIV element "palette"
{
    layout: $(go.GridLayout),
    "grid.visible": true
});

that is I’ve got the same as I have on right side where the diagram is.

#4

I would like to have dashed lines among cells too.

#5

When I tried this:

    myPalette =
      $(go.Palette, "myPaletteDiv",
        {
          nodeTemplateMap: myDiagram.nodeTemplateMap,
          layout: $(go.GridLayout),
          "grid.visible": true
        });

it correctly showed the Diagram.grid.

Have you read GoJS Grid Patterns -- Northwoods Software and Shape | GoJS API ?

#6

I’ve read those articles, but I can’t see how I can get grid in palette with for example two columns and several rows where each node type is in separate cell.

#7

GridLayout automatically puts each node in a separate cell. If all of your nodes have the same size, you can make your Diagram.grid pattern have the same cell size.

#8

The nodes don’t have the same size.

#9

OK, then your grid cell size can be the largest width and height for all of the nodes. That’s what GridLayout computes, if you don’t set GridLayout.cellSize.

#10

Ok. I understand there is automatic grid layout without lines in my palette and it’s visible. But, I don’t understand how I can get dashed grid lines that form cells for each particular element.

Please, take a look at the palette with electrical elements above and tell me how to enable dashed grid that is several horizontal lines and one vertical line that divide the palette’s space in two columns.

Thank you in advance.

#11

If you know the size of the cells, you could just do something like:

    myPalette =
      $(go.Palette, "myPaletteDiv",
        {
          . . .,
          grid:
            $(go.Panel, "Grid",
              { gridCellSize: new go.Size(50, 150) },
              $(go.Shape, "LineV", { stroke: "gray", strokeDashArray: [3, 3] }),
              $(go.Shape, "LineH", { stroke: "gray", strokeDashArray: [3, 3] })
            )
        });

If the nodes might be differing sizes and you don’t know what the maximum will be in each direction, you could override GridLayout.commitLayers to get the information about the actual grid cell size computed by GridLayout:

    myPalette.layout.commitLayers = function(layerRects/*: Rect[]*/, offset/*: Point*/) {
      if (layerRects && layerRects.length > 0) {
        myPalette.grid.gridCellSize = layerRects[0].size;
      }
    }
#12

There is commitLayout method. I can’t find commitLayers. Where is it?

Also, what are layerRects and offset parameters?

#13

Ah, it’s undocumented on GridLayout, but it’s there on TreeLayout and LayeredDigraphLayout, the other layouts that are “layered”.