Is there a way to scale and resize table node for TABLESHAPE dynamically

GoJS
1
  • We have requirement where table node has different sizes and number of seats. Currently we bind size using new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify) for incoming different sizes. Table does gets the size that we set but the inside content that is table shape and seats size we use desired size. How can we resize the TABLESHAPE that is inside content and Seat size.
const Seat = (number, align, focus, theme) => {
  if (typeof align === 'string') align = go.Spot.parse(align);
  if (!align || !align.isSpot()) align = go.Spot.Right;
  if (typeof focus === 'string') focus = go.Spot.parse(focus);
  if (!focus || !focus.isSpot()) focus = align.opposite();
  return $(
    go.Panel,
    'Spot',
    { name: number.toString(), alignment: align, alignmentFocus: focus },
    $(
      go.Shape,
      'Circle',
      {
        name: 'SEATSHAPE',
        desiredSize: new go.Size(30, 30), // how can make this dynamic based on table size.
        fill: theme.palette.secondary.main,
        stroke: 'white',
        strokeWidth: 2,
      },
      new go.Binding('fill'),
    ),
    $(
      go.TextBlock,
      number.toString(),
      { font: '10pt "Rubik", Arial, sans-serif' },
      new go.Binding('angle', 'angle', (n) => -n),
    ),
  );
};

myDiagram.nodeTemplateMap.add(
    'TableR6', // rectangular with 6 seats
    $(
      go.Node,
      'Spot',
      customTableStyle ? customTableStyle() : tableStyle(),
      new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
      $(
        go.Panel,
        'Spot',
        $(
          go.Shape,
          'Rectangle',
          {
            name: 'TABLESHAPE',
            desiredSize: new go.Size(120, 60), // how can make this dynamic based on table size.
            fill: theme.palette.secondary.main,
            stroke: null,
          },
          new go.Binding('fill'),
        ),
        $(
          go.TextBlock,
          { editable: true, font: 'bold 11pt "Rubik", Arial, sans-serif' },
          new go.Binding('text', 'name').makeTwoWay(),
          new go.Binding('angle', 'angle', (n) => -n),
        ),
      ),
      Seat(1, '0.2 0', '0.5 1', theme),
      Seat(2, '0.8 0', '0.5 1', theme),
      Seat(3, '1 0.5', '0 0.5', theme),
      Seat(4, '0.8 1', '0.5 0', theme),
      Seat(5, '0.2 1', '0.5 0', theme),
      Seat(6, '0 0.5', '1 0.5', theme),
    ),
  );
2

The Seating Chart sample already has a TwoWay Binding on the desiredSize of the “TABLESHAPE” Shape. So all you need to do is add this declaration on the Node template(s):

          { resizable: true, resizeObjectName: "TABLESHAPE" },

You can do that either in the tableStyle function to apply to all such “table” templates, or you can do it in individual templates.

3

Oh, just in case you really were trying to also be able to re-scale a table node, you could use this extension:
Rescaling GraphObjects using the RescalingTool
RescalingTool | GoJS API
But I’m moderately confident that is not what you are looking for.