How to provide vertical zoomtofit , how to give group min height

  1. Below provided code I want that all groups vertically(top to bottom) fit in screen and in horizontal(left to right) no need to fit according to viewport I want only fit in viewport verticallly(top to bottom)

  2. In group I want minheight of group if I am provide minsize in this that not working

In given code pls do that these two points


  <!DOCTYPE html>
  <html lang="en">
  <body>
  <script src="https://unpkg.com/[email protected]"></script>
  
  <div id="allSampleContent" class="p-4 w-full">
          
            
            

<script src="https://unpkg.com/[email protected]/dist/extensions/SwimLaneLayout.js"></script>
<script id="code">
  var DIRECTION = 0; // used to customize the layout and the templates, only upon first initialization

  function init() {
    if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this

    var $ = go.GraphObject.make; // for conciseness in defining templates

    myDiagram = new go.Diagram('myDiagramDiv', {
      // automatically scale the diagram to fit the viewport's size
      initialAutoScale: go.AutoScale.Uniform,
      // disable user copying of parts
      allowCopy: false,
      initialContentAlignment:go.Spot.LeftCenter,
      // position all of the nodes and route all of the links
      layout: $(SwimLaneLayout, {
        laneProperty: 'group', // needs to know how to assign vertexes/nodes into lanes/groups
        direction: DIRECTION, // Group template also depends on DIRECTION
        setsPortSpots: false,
        layerSpacing: 20,
        columnSpacing: 5,
        commitLayers: function (layerRects, offset) {
          // method override requires function, not =>
          if (layerRects.length === 0) return;

          var horiz = this.direction === 0 || this.direction === 180;
          var forwards = this.direction === 0 || this.direction === 90;

          var rect = layerRects[forwards ? layerRects.length - 1 : 0];
          var totallength = horiz ? rect.right : rect.bottom;

          for (var i = 0; i < this.laneNames.length; i++) {
            var lane = this.laneNames[i];
            // assume lane names do not conflict with node names
            var group = this.diagram.findNodeForKey(lane);
            if (group === null) {
              this.diagram.model.addNodeData({ key: lane, isGroup: true });
              group = this.diagram.findNodeForKey(lane);
            }
            if (horiz) {
              group.location = new go.Point(-this.layerSpacing / 2, this.lanePositions.get(lane) * this.columnSpacing + offset.y);
            } else {
              group.location = new go.Point(this.lanePositions.get(lane) * this.columnSpacing + offset.x, -this.layerSpacing / 2);
            }
            var ph = group.findObject('PLACEHOLDER'); // won't be a go.Placeholder, but just a regular Shape
            if (ph === null) ph = group;
            if (horiz) {
              ph.desiredSize = new go.Size(totallength, (this.laneBreadths.get(lane) * this.columnSpacing));
            } else {
              ph.desiredSize = new go.Size(this.laneBreadths.get(lane) * this.columnSpacing, (totallength));
            }
          }
        },
      }),
    });

    myDiagram.nodeTemplate = $(go.Node, "Auto",
      {
        selectionAdorned:false,
        movable: true,
        selectionChanged: (part) => {
          console.log(part)
          //part.findNodesOutOf().each(n => n.fill = '#116173');
          // const shape = part.elt(0);
          // shape.fill = '#116173';
        }
      },
      new go.Binding('location', 'loc', go.Point.parse),
      go.Panel.Horizontal,
      { 
        portId: '', 
        // fromLinkable: true, 
        // toLinkable: true,
        fromSpot: go.Spot.RightCenter,  // coming out from right side
        toSpot: go.Spot.LeftCenter,   // g
        click:(e, node) =>{
          //this.showHideNode(node)
          console.log('ddd', e, node)
        }
      },
      $(go.Panel,
        go.Panel.Auto,
        {
          // click:(e, node) =>{
          //   console.log('ddd', e, node)
          // }
        },
        $(go.Shape, 'RoundedRectangle',
          { 
            fill: 'white', 
            minSize: new go.Size(150, 100), 
            desiredSize: new go.Size(150, 100), 
            strokeWidth: 1,
            margin: new go.Margin(40, 0),
            //stretch: go.GraphObject.Horizontal,
          },
          { cursor: 'pointer' }, // indicate that linking may start here
          new go.Binding('stroke', 'color'),
          //new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
          
        ),
        $(go.Panel,
          'Horizontal',
          
          $(go.TextBlock,
            { 
                margin: 2, 
                stroke: '#4c525e', 
                cursor: 'pointer',
                // stretch: go.GraphObject.Horizontal, 
                verticalAlignment: go.Spot.LeftCenter, 
                textAlign: 'left',
                overflow: go.TextBlock.OverflowEllipsis,
                wrap: go.TextBlock.None,
                desiredSize: new go.Size(140, 25),
            },
            { fromLinkable: false, toLinkable: false }, // don't start drawing a link from the text
            new go.Binding('text', 'key'),
            new go.Binding('stroke', 'color')
          ),
          
        ),
      ),
        { // Tooltip for showing full text on hover
          toolTip: $(go.Adornment, "Auto",
            $(go.Shape, { fill: "#ffffff" }),
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "key"))
          )
        },
    );

    // replace the default Node template in the nodeTemplateMap
    // myDiagram.nodeTemplate = $(go.Node,
    //   'Vertical', // the whole node panel
    //   {
    //     // when the DIRECTION is vertical, use the whole Node as the port
    //     fromSpot: go.Spot.TopBottomSides,
    //     toSpot: go.Spot.TopBottomSides,
    //   },
    //   $(go.TextBlock, // the text label
    //     new go.Binding('text', 'key')
    //   ),
    //   // $(go.Picture, // the icon showing the logo
    //   //   // You should set the desiredSize (or width and height)
    //   //   // whenever you know what size the Picture should be.
    //   //   {
    //   //     desiredSize: new go.Size(50, 50),
    //   //     // when the DIRECTION is horizontal, use this icon as the port
    //   //     portId: DIRECTION === 0 || DIRECTION === 180 ? '' : null,
    //   //     fromSpot: go.Spot.LeftRightSides,
    //   //     toSpot: go.Spot.LeftRightSides,
    //   //   },
    //   //   new go.Binding('source', 'key', convertKeyImage)
    //   // )
    // );


    // replace the default Link template in the linkTemplateMap
    myDiagram.linkTemplate = $(go.Link, // the whole link panel
      { routing: go.Routing.AvoidsNodes, corner: 10 },
      $(go.Shape, // the link shape
        { strokeWidth: 1.5 }
      ),
      $(go.Shape, // the arrowhead
        { toArrow: 'Standard', stroke: null }
      )
    );

    myDiagram.groupTemplate = // assumes SwimLaneLayout.direction === 0
      $(go.Group,
        DIRECTION === 0 || DIRECTION === 180 ? 'Horizontal' : 'Vertical',
        {
          layerName: 'Background', // always behind all regular nodes and links
          movable: false, // user cannot move or copy any lanes
          copyable: false,
          locationObjectName: 'PLACEHOLDER', // this object will be sized and located by SwimLaneLayout
          layout: null, // no lane lays out its member nodes
          avoidable: false, // don't affect any AvoidsNodes link routes,
        },
        $(go.TextBlock, { font: 'bold 12px sans-serif', angle: DIRECTION === 0 || DIRECTION === 180 ? 270 : 0  }, new go.Binding('text', 'key')),
        $(go.Panel,
          'Auto',
          $(go.Shape, { fill: 'transparent', stroke: 'orange' }),
          $(go.Shape, { name: 'PLACEHOLDER', fill: null, stroke: null, strokeWidth: 0, }),
         // $(go.TextBlock, { font: 'bold 12pt sans-serif'}, new go.Binding('text', 'text')),
        ),
        // $(go.TextBlock, { font: 'bold 12pt sans-serif', angle: DIRECTION === 0 || DIRECTION === 180 ? 90 : 0 }, new go.Binding('text', 'text'))
      );

    partitionBy('d');
  }

  // the array of node data describing each team, each division, and each conference
  var nodeDataArray = [
    { key: 'AFC', isGroup: true },
    { key: 'NFC', isGroup: true },
    { key: 'AFCE', isGroup: true },
    { key: 'AFCN', isGroup: true },
    { key: 'AFCS', isGroup: true },
    { key: 'AFCW', isGroup: true },
    { key: 'NFCE', isGroup: true },
    { key: 'NFCN', isGroup: true },
    { key: 'NFCS', isGroup: true },
    { key: 'NFCW', isGroup: true },

    { key: 'NE', conf: 'AFC', div: 'AFCE' },
    { key: 'PIT', conf: 'AFC', div: 'AFCN' },
    { key: 'DAL', conf: 'NFC', div: 'NFCE' },
    { key: 'CLE', conf: 'AFC', div: 'AFCN' },
    { key: 'NYG', conf: 'NFC', div: 'NFCE' },
    { key: 'GB', conf: 'NFC', div: 'NFCN' },
    { key: 'SEA', conf: 'NFC', div: 'NFCW' },
    { key: 'IND', conf: 'AFC', div: 'AFCS' },
    { key: 'MIN', conf: 'NFC', div: 'NFCN' },
    { key: 'PHI', conf: 'NFC', div: 'NFCE' },
    { key: 'DET', conf: 'NFC', div: 'NFCN' },
    { key: 'JAC', conf: 'AFC', div: 'AFCS' },
    { key: 'SD', conf: 'AFC', div: 'AFCW' },
    { key: 'CHI', conf: 'NFC', div: 'NFCN' },
    { key: 'TB', conf: 'NFC', div: 'NFCS' },
    { key: 'KC', conf: 'AFC', div: 'AFCW' },
    { key: 'DEN', conf: 'AFC', div: 'AFCW' },
    { key: 'TEN', conf: 'AFC', div: 'AFCS' },
    { key: 'BUF', conf: 'AFC', div: 'AFCE' },
    { key: 'OAK', conf: 'AFC', div: 'AFCW' },
    { key: 'HOU', conf: 'AFC', div: 'AFCS' },
    { key: 'ATL', conf: 'NFC', div: 'NFCS' },
    { key: 'WAS', conf: 'NFC', div: 'NFCE' },
    { key: 'CIN', conf: 'AFC', div: 'AFCN' },
    { key: 'NYJ', conf: 'AFC', div: 'AFCE' },
    { key: 'CAR', conf: 'NFC', div: 'NFCS' },
    { key: 'NO', conf: 'NFC', div: 'NFCS' },
    { key: 'BAL', conf: 'AFC', div: 'AFCN' },
    { key: 'MIA', conf: 'AFC', div: 'AFCE' },
    { key: 'ARI', conf: 'NFC', div: 'NFCW' },
    { key: 'STL', conf: 'NFC', div: 'NFCW' },
    { key: 'SF', conf: 'NFC', div: 'NFCW' },
  ];

  
  // the array of link data objects: the relationships between the nodes
  var linkDataArray = [
    { from: 'NE', to: 'CLE' },
    { from: 'NE', to: 'DAL' },
    { from: 'NE', to: 'IND' },
    { from: 'PIT', to: 'CLE' },
    { from: 'DAL', to: 'NYG' },
    { from: 'DAL', to: 'GB' },
    { from: 'CLE', to: 'SEA' },
    { from: 'NYG', to: 'DET' },
    { from: 'GB', to: 'MIN' },
    { from: 'GB', to: 'PHI' },
    { from: 'SEA', to: 'PHI' },
    { from: 'SEA', to: 'CIN' },
    { from: 'IND', to: 'TB' },
    { from: 'IND', to: 'JAC' },
    { from: 'MIN', to: 'SD' },
    { from: 'PHI', to: 'NYJ' },
    { from: 'DET', to: 'CHI' },
    { from: 'DET', to: 'DEN' },
    { from: 'JAC', to: 'DEN' },
    { from: 'SD', to: 'DEN' },
    { from: 'CHI', to: 'OAK' },
    { from: 'TB', to: 'TEN' },
    { from: 'DEN', to: 'TEN' },
    { from: 'DEN', to: 'KC' },
    { from: 'DEN', to: 'BUF' },
    { from: 'TEN', to: 'OAK' },
    { from: 'TEN', to: 'ATL' },
    { from: 'TEN', to: 'HOU' },
    { from: 'BUF', to: 'WAS' },
    { from: 'OAK', to: 'MIA' },
    { from: 'HOU', to: 'MIA' },
    { from: 'HOU', to: 'CAR' },
    { from: 'WAS', to: 'NYJ' },
    { from: 'WAS', to: 'ARI' },
    { from: 'CIN', to: 'BAL' },
    { from: 'NYJ', to: 'MIA' },
    { from: 'CAR', to: 'ARI' },
    { from: 'CAR', to: 'STL' },
    { from: 'CAR', to: 'SF' },
    { from: 'NO', to: 'SF' },
    { from: 'BAL', to: 'STL' },
    { from: 'BAL', to: 'SF' },
  ];

  function partitionBy(a) {
    // create the model and assign it to the Diagram
    var model = new go.GraphLinksModel();
    // depending on how we are partitioning the graph, each node belongs either
    // to a conference group or to a division group
    model.nodeGroupKey = a === 'c' ? 'conf' : 'div';
    model.nodeDataArray = nodeDataArray;
    model.linkDataArray = linkDataArray;
    // each node's lane information is the same as the group information
    myDiagram.layout.laneProperty = model.nodeGroupKey;
    // optionally, specify the order of known lane names, without setting laneComparer
    myDiagram.layout.laneNames = a === 'c' ? ['AFC', 'NFC'] : ['AFCE', 'AFCN', 'AFCS', 'AFCW', 'NFCE', 'NFCN', 'NFCS', 'NFCW'];
    myDiagram.model = model;
  }
  window.addEventListener('DOMContentLoaded', init);
</script>

  <div id="sample">
    <!-- <p><b>Beat Paths</b>: The 2007 NFL Season, divided by conference or by division</p> -->
    <div id="myDiagramDiv" style="border: 1px solid gray; margin: 10px; height: 100vh; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"><canvas tabindex="0" width="1226" height="698" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1226px; height: 698px;"></canvas><div style="position: absolute; overflow: auto; width: 1226px; height: 698px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
    <input type="radio" name="A" onclick="partitionBy('c')" id="conferenceButton">
    <label for="conferenceButton">Conferences</label><br>
    <input type="radio" name="A" onclick="partitionBy('d')" id="divisionButton" checked="">
    <label for="divisionButton">Divisions</label><br>
  </div>
  </body>
  </html>
  1. So you want to adjust the Diagram.scale so that the Diagram.documentBounds height fits in the initial viewport, but you don’t care about the width?

Then you can scale according to the ratio of those two heights. Perhaps something like:

    myDiagram = new go.Diagram('myDiagramDiv', {
      // automatically scale the diagram to fit the viewport's size
      //initialAutoScale: go.AutoScale.Uniform,
      "InitialLayoutCompleted": e => {
        const dheight = e.diagram.documentBounds.height;
        if (dheight <= 0) return;
        const vheight = e.diagram.viewportBounds.height;
        if (dheight > vheight) e.diagram.scale = vheight/dheight;
      },
  1. If you want to specify a minimum height but don’t care about the width, say:
    minSize: new go.Size(NaN, 100)

But I note that in your code you also set the desiredSize to 150x100, which will prevent it from having a variable size – it would always be 150x100. Don’t set desiredSize.height to a real number if you want the height to vary based on the contents.

In second point minsize thats not working in my code ,

I want to change group or lane size and minsize wants to provide to that lane or group so please do that change the group size and when load then minsize of that lane initially comes and gives minsize for height , width adjusts automatically and if possible you try to execute code and then verify also , that lane minsize for height its applied or not and minheight is 400 and width automatically adjusts and then in lane more node comes you height also adjust accordingly

So you want to specify a minimum breadth (i.e. height in your case) for each lane? That would be new functionality in SwimLaneLayout. Since it’s basically an enhanced LayeredDigraphLayout, I’m not sure how easy that would be to accomplish.