UNPKG

gojs/extensionsJSM/Table.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6<meta name="description" content="TypeScript: Use the TableLayout extension to arrange nodes in a tabular or grid-like form."/> 
7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>Northwoods Software</title>
10</head>
11
12<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
  <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
  <!-- * * * * * * * * * * * * * -->
  <!-- Start of GoJS sample code -->
  
51
  <div class="p-4 w-full">
<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myPaletteDiv" style="width: 120px; height: 600px; margin-right: 2px; border: solid 1px black"></div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 600px; border: solid 1px black"></div>
  </div>
  <p>
    This sample demonstrates a custom Layout, TableLayout, that is very much like a simplified "Table" Panel layout, but working
    on non-Link Parts in a Diagram or a Group rather than on GraphObjects in a Panel. The layout is defined in its own
    file, as <a href="TableLayout.ts">TableLayout.ts</a>.
  </p>
  <p>
    You can drag-and-drop nodes from the Palette into any Group. Dragging into a Group highlights the Group. Drops must occur
    inside Groups; otherwise the action is cancelled.
  </p>
  <p>
    Each row and each column is <a>Part.resizable</a> and has a custom <a>Part.resizeAdornmentTemplate</a> showing a single
    resize handle on the right side or on the bottom. There is a custom LaneResizingTool to provide a minimum width or
    height based on the contents of all of the groups (cells) in that column or row.
  </p>
  <p>
    This example assumes the Groups are predefined and exist in each cell at a particular row/column, but this sample could be
    extended to allow adding and removing rows and/or columns.
  </p>
</div>
77
<script type="module" id="code">
  import * as go from "../release/go-module.js";
  import { TableLayout } from './TableLayout.js';
81
  if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this
  const $ = go.GraphObject.make; // for conciseness in defining templates
84
  // define a custom ResizingTool to limit how far one can shrink a row or column
  class LaneResizingTool extends go.ResizingTool {
    computeMinSize() {
      const diagram = this.diagram;
      if (this.adornedObject === null)
        return new go.Size();
      const lane = this.adornedObject.part; // might be row or column
      if (lane === null)
        return new go.Size();
      const horiz = (lane.category === 'Column Header'); // or "Row Header"
      const margin = diagram.nodeTemplate.margin;
      let bounds = new go.Rect();
      diagram.findTopLevelGroups().each((g) => {
        if (lane === null)
          return;
        if (horiz ? (g.column === lane.column) : (g.row === lane.row)) {
          const b = diagram.computePartsBounds(g.memberParts);
          if (b.isEmpty())
            return; // nothing in there?  ignore it
          b.unionPoint(g.location); // keep any empty space on the left and top
          b.addMargin(margin); // assume the same node margin applies to all nodes
          if (bounds.isEmpty()) {
            bounds = b;
          }
          else {
            bounds.unionRect(b);
          }
        }
      });
      // limit the result by the standard value of computeMinSize
      const msz = super.computeMinSize();
      if (bounds.isEmpty())
        return msz;
      return new go.Size(Math.max(msz.width, bounds.width), Math.max(msz.height, bounds.height));
    }
    resize(newr) {
      const diagram = this.diagram;
      if (this.adornedObject === null)
        return;
      const lane = this.adornedObject.part;
      if (lane === null)
        return;
      const horiz = (lane.category === 'Column Header');
      const lay = diagram.layout; // the TableLayout
      if (horiz) {
        const col = lane.column;
        const coldef = lay.getColumnDefinition(col);
        coldef.width = newr.width;
      }
      else {
        const row = lane.row;
        const rowdef = lay.getRowDefinition(row);
        rowdef.height = newr.height;
      }
      lay.invalidateLayout();
    }
  }
142
  const myDiagram = $(go.Diagram, 'myDiagramDiv', {
    layout: $(TableLayout, $(go.RowColumnDefinition, { row: 1, height: 22 }), // fixed size column headers
      $(go.RowColumnDefinition, { column: 1, width: 22 }) // fixed size row headers
    ),
    'SelectionMoved': (e) => { e.diagram.layoutDiagram(true); },
    'resizingTool': new LaneResizingTool(),
    // feedback that dropping in the background is not allowed
    mouseDragOver: (e) => { e.diagram.currentCursor = 'not-allowed'; },
    // when dropped in the background, not on a Node or a Group, cancel the drop
    mouseDrop: (e) => { e.diagram.currentTool.doCancel(); },
    'animationManager.isInitial': false,
    'undoManager.isEnabled': true
  });
156
  myDiagram.nodeTemplateMap.add('Header', // an overall table header, at the top
    $(go.Part, 'Auto', {
      row: 0, column: 1, columnSpan: 9999,
      stretch: go.GraphObject.Horizontal,
      selectable: false, pickable: false
    }, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, { alignment: go.Spot.Center, font: 'bold 12pt sans-serif' }, new go.Binding('text'))));
163
  myDiagram.nodeTemplateMap.add('Sider', // an overall table header, on the left side
    $(go.Part, 'Auto', {
      row: 1, rowSpan: 9999, column: 0,
      stretch: go.GraphObject.Vertical,
      selectable: false, pickable: false
    }, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, { alignment: go.Spot.Center, font: 'bold 12pt sans-serif', angle: 270 }, new go.Binding('text'))));
170
  myDiagram.nodeTemplateMap.add('Column Header', // for each column header
    $(go.Part, 'Spot', {
      row: 1, rowSpan: 9999, column: 2,
      minSize: new go.Size(100, NaN),
      stretch: go.GraphObject.Fill,
      movable: false,
      resizable: true,
      resizeAdornmentTemplate: $(go.Adornment, 'Spot', $(go.Placeholder), $(go.Shape, // for changing the length of a lane
        {
          alignment: go.Spot.Right,
          desiredSize: new go.Size(7, 50),
          fill: 'lightblue', stroke: 'dodgerblue',
          cursor: 'col-resize'
        }))
    }, new go.Binding('column', 'col'), $(go.Shape, { fill: null }, new go.Binding('fill', 'color')), $(go.Panel, 'Auto', {
      alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom,
      stretch: go.GraphObject.Horizontal,
      height: myDiagram.layout.getRowDefinition(1).height
    }, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, {
      font: 'bold 10pt sans-serif', isMultiline: false,
      wrap: go.TextBlock.None, overflow: go.TextBlock.OverflowEllipsis
    }, new go.Binding('text')))));
193
  myDiagram.nodeTemplateMap.add('Row Sider', // for each row header
    $(go.Part, 'Spot', {
      row: 2, column: 1, columnSpan: 9999,
      minSize: new go.Size(NaN, 100),
      stretch: go.GraphObject.Fill,
      movable: false,
      resizable: true,
      resizeAdornmentTemplate: $(go.Adornment, 'Spot', $(go.Placeholder), $(go.Shape, // for changing the breadth of a lane
        {
          alignment: go.Spot.Bottom,
          desiredSize: new go.Size(50, 7),
          fill: 'lightblue', stroke: 'dodgerblue',
          cursor: 'row-resize'
        }))
    }, new go.Binding('row'), $(go.Shape, { fill: null }, new go.Binding('fill', 'color')), $(go.Panel, 'Auto', {
      alignment: go.Spot.Left, alignmentFocus: go.Spot.Right,
      stretch: go.GraphObject.Vertical, angle: 270,
      height: myDiagram.layout.getColumnDefinition(1).width
    }, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, {
      font: 'bold 10pt sans-serif', isMultiline: false,
      wrap: go.TextBlock.None, overflow: go.TextBlock.OverflowEllipsis
    }, new go.Binding('text')))));
216
  myDiagram.nodeTemplate = // for regular nodes within cells (groups); you'll want to extend this
    $(go.Node, 'Auto', { width: 100, height: 50, margin: 4 }, // assume uniform Margin, all around
      new go.Binding('row'), new go.Binding('column', 'col'), $(go.Shape, { fill: 'white' }, new go.Binding('fill', 'color')), $(go.TextBlock, new go.Binding('text', 'key')));
220
  myDiagram.groupTemplate = // for cells
    $(go.Group, 'Auto', {
      layerName: 'Background',
      stretch: go.GraphObject.Fill,
      selectable: false,
      computesBoundsAfterDrag: true,
      computesBoundsIncludingLocation: true,
      handlesDragDropForMembers: true,
      mouseDragEnter: (e, group) => {
        if (group instanceof go.Group) group.isHighlighted = true;
      },
      mouseDragLeave: (e, group) => {
        if (group instanceof go.Group) group.isHighlighted = false;
      },
      mouseDrop: (e, group) => {
        if (!(group instanceof go.Group)) return;
        // if any dropped part wasn't already a member of this group, we'll want to let the group's row
        // column allow themselves to be resized automatically, in case the row height or column width
        // had been set manually by the LaneResizingTool
        const anynew = e.diagram.selection.any((p) => p.containingGroup !== group);
        // Don't allow headers/siders to be dropped
        const anyHeadersSiders = e.diagram.selection.any((p) => {
          return p.category === 'Column Header' || p.category === 'Row Sider';
        });
        if (!anyHeadersSiders && group.addMembers(e.diagram.selection, true)) {
          if (anynew) {
            e.diagram.layout.getRowDefinition(group.row).height = NaN;
            e.diagram.layout.getColumnDefinition(group.column).width = NaN;
          }
        }
        else { // failure upon trying to add parts to this group
          e.diagram.currentTool.doCancel();
        }
      }
    }, new go.Binding('row'), new go.Binding('column', 'col'),
      // the group is normally unseen -- it is completely transparent except when given a color or when highlighted
      $(go.Shape, {
        fill: 'transparent', stroke: 'transparent',
        strokeWidth: myDiagram.nodeTemplate.margin.left,
        stretch: go.GraphObject.Fill
      }, new go.Binding('fill', 'color'), new go.Binding('stroke', 'isHighlighted', (h) => h ? 'red' : 'transparent').ofObject()), $(go.Placeholder, {
        alignment: ((m) => new go.Spot(0, 0, m.top, m.left))(myDiagram.nodeTemplate.margin),
        padding: ((m) => new go.Margin(0, m.right, m.bottom, 0))(myDiagram.nodeTemplate.margin)
      }));
265
  myDiagram.model = new go.GraphLinksModel([
    // headers
    { key: 'Header', text: 'Vacation Procedures', category: 'Header' },
    { key: 'Sider', text: 'Personnel', category: 'Sider' },
    // column and row headers
    { key: 'Request', text: 'Request', col: 2, category: 'Column Header' },
    { key: 'Approval', text: 'Approval', col: 3, category: 'Column Header' },
    { key: 'Employee', text: 'Employee', row: 2, category: 'Row Sider' },
    { key: 'Manager', text: 'Manager', row: 3, category: 'Row Sider' },
    { key: 'Administrator', text: 'Administrator', row: 4, category: 'Row Sider' },
    // cells, each a group assigned to a row and column
    { key: 'EmpReq', row: 2, col: 2, isGroup: true, color: 'lightyellow' },
    { key: 'EmpApp', row: 2, col: 3, isGroup: true, color: 'lightgreen' },
    { key: 'ManReq', row: 3, col: 2, isGroup: true, color: 'lightgreen' },
    { key: 'ManApp', row: 3, col: 3, isGroup: true, color: 'lightyellow' },
    { key: 'AdmReq', row: 4, col: 2, isGroup: true, color: 'lightyellow' },
    { key: 'AdmApp', row: 4, col: 3, isGroup: true, color: 'lightgreen' },
    // nodes, each assigned to a group/cell
    { key: 'Delta', color: 'orange', size: '100 100', group: 'EmpReq' },
    { key: 'Epsilon', color: 'coral', size: '100 50', group: 'EmpReq' },
    { key: 'Zeta', color: 'tomato', size: '50 70', group: 'ManReq' },
    { key: 'Eta', color: 'coral', size: '50 50', group: 'ManApp' },
    { key: 'Theta', color: 'tomato', size: '100 50', group: 'AdmApp' }
  ]);
290
  const myPalette = $(go.Palette, 'myPaletteDiv', {
    nodeTemplateMap: myDiagram.nodeTemplateMap,
    'model.nodeDataArray': [
      { key: 'Alpha', color: 'orange' },
      { key: 'Beta', color: 'tomato' },
      { key: 'Gamma', color: 'goldenrod' }
    ]
  });
299
  window.myDiagram = myDiagram; // Attach to the window for console debugging
</script>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
306</body>
307<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
308<script src="../assets/js/goSamples.js"></script>
309</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6	`<meta name="description" content="TypeScript: Use the TableLayout extension to arrange nodes in a tabular or grid-like form."/>`
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->`
9	`<title>Northwoods Software</title>`
10	`</head>`
11
12	`<body>`
13	`<!-- This top nav is not part of the sample code -->`
14	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
15	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
16	`<div class="md:pl-4">`
17	`<a class="text-white hover:text-white no-underline hover:no-underline`
18	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
19	`<h1 class="mb-0 p-1 ">GoJS</h1>`
20	`</a>`
21	`</div>`
22	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
23	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
24	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
25	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
26	`</svg>`
27	`</button>`
28	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
29	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
30	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
31	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
32	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
33	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
34	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
38	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
40	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
41	`</ul>`
42	`</div>`
43	`</div>`
44	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
45	`</nav>`
46	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
47	`<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>`
48	`<!-- * * * * * * * * * * * * * -->`
49	`<!-- Start of GoJS sample code -->`
50
51
52	`<div class="p-4 w-full">`
53	`<div id="sample">`
54	`<div style="width: 100%; display: flex; justify-content: space-between">`
55	`<div id="myPaletteDiv" style="width: 120px; height: 600px; margin-right: 2px; border: solid 1px black"></div>`
56	`<div id="myDiagramDiv" style="flex-grow: 1; height: 600px; border: solid 1px black"></div>`
57	`</div>`
58	`<p>`
59	`This sample demonstrates a custom Layout, TableLayout, that is very much like a simplified "Table" Panel layout, but working`
60	`on non-Link Parts in a Diagram or a Group rather than on GraphObjects in a Panel. The layout is defined in its own`
61	`file, as <a href="TableLayout.ts">TableLayout.ts</a>.`
62	`</p>`
63	`<p>`
64	`You can drag-and-drop nodes from the Palette into any Group. Dragging into a Group highlights the Group. Drops must occur`
65	`inside Groups; otherwise the action is cancelled.`
66	`</p>`
67	`<p>`
68	`Each row and each column is <a>Part.resizable</a> and has a custom <a>Part.resizeAdornmentTemplate</a> showing a single`
69	`resize handle on the right side or on the bottom. There is a custom LaneResizingTool to provide a minimum width or`
70	`height based on the contents of all of the groups (cells) in that column or row.`
71	`</p>`
72	`<p>`
73	`This example assumes the Groups are predefined and exist in each cell at a particular row/column, but this sample could be`
74	`extended to allow adding and removing rows and/or columns.`
75	`</p>`
76	`</div>`
77
78	`<script type="module" id="code">`
79	`import * as go from "../release/go-module.js";`
80	`import { TableLayout } from './TableLayout.js';`
81
82	`if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this`
83	`const $ = go.GraphObject.make; // for conciseness in defining templates`
84
85	`// define a custom ResizingTool to limit how far one can shrink a row or column`
86	`class LaneResizingTool extends go.ResizingTool {`
87	`computeMinSize() {`
88	`const diagram = this.diagram;`
89	`if (this.adornedObject === null)`
90	`return new go.Size();`
91	`const lane = this.adornedObject.part; // might be row or column`
92	`if (lane === null)`
93	`return new go.Size();`
94	`const horiz = (lane.category === 'Column Header'); // or "Row Header"`
95	`const margin = diagram.nodeTemplate.margin;`
96	`let bounds = new go.Rect();`
97	`diagram.findTopLevelGroups().each((g) => {`
98	`if (lane === null)`
99	`return;`
100	`if (horiz ? (g.column === lane.column) : (g.row === lane.row)) {`
101	`const b = diagram.computePartsBounds(g.memberParts);`
102	`if (b.isEmpty())`
103	`return; // nothing in there? ignore it`
104	`b.unionPoint(g.location); // keep any empty space on the left and top`
105	`b.addMargin(margin); // assume the same node margin applies to all nodes`
106	`if (bounds.isEmpty()) {`
107	`bounds = b;`
108	`}`
109	`else {`
110	`bounds.unionRect(b);`
111	`}`
112	`}`
113	`});`
114	`// limit the result by the standard value of computeMinSize`
115	`const msz = super.computeMinSize();`
116	`if (bounds.isEmpty())`
117	`return msz;`
118	`return new go.Size(Math.max(msz.width, bounds.width), Math.max(msz.height, bounds.height));`
119	`}`
120	`resize(newr) {`
121	`const diagram = this.diagram;`
122	`if (this.adornedObject === null)`
123	`return;`
124	`const lane = this.adornedObject.part;`
125	`if (lane === null)`
126	`return;`
127	`const horiz = (lane.category === 'Column Header');`
128	`const lay = diagram.layout; // the TableLayout`
129	`if (horiz) {`
130	`const col = lane.column;`
131	`const coldef = lay.getColumnDefinition(col);`
132	`coldef.width = newr.width;`
133	`}`
134	`else {`
135	`const row = lane.row;`
136	`const rowdef = lay.getRowDefinition(row);`
137	`rowdef.height = newr.height;`
138	`}`
139	`lay.invalidateLayout();`
140	`}`
141	`}`
142
143	`const myDiagram = $(go.Diagram, 'myDiagramDiv', {`
144	`layout: $(TableLayout, $(go.RowColumnDefinition, { row: 1, height: 22 }), // fixed size column headers`
145	`$(go.RowColumnDefinition, { column: 1, width: 22 }) // fixed size row headers`
146	`),`
147	`'SelectionMoved': (e) => { e.diagram.layoutDiagram(true); },`
148	`'resizingTool': new LaneResizingTool(),`
149	`// feedback that dropping in the background is not allowed`
150	`mouseDragOver: (e) => { e.diagram.currentCursor = 'not-allowed'; },`
151	`// when dropped in the background, not on a Node or a Group, cancel the drop`
152	`mouseDrop: (e) => { e.diagram.currentTool.doCancel(); },`
153	`'animationManager.isInitial': false,`
154	`'undoManager.isEnabled': true`
155	`});`
156
157	`myDiagram.nodeTemplateMap.add('Header', // an overall table header, at the top`
158	`$(go.Part, 'Auto', {`
159	`row: 0, column: 1, columnSpan: 9999,`
160	`stretch: go.GraphObject.Horizontal,`
161	`selectable: false, pickable: false`
162	`}, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, { alignment: go.Spot.Center, font: 'bold 12pt sans-serif' }, new go.Binding('text'))));`
163
164	`myDiagram.nodeTemplateMap.add('Sider', // an overall table header, on the left side`
165	`$(go.Part, 'Auto', {`
166	`row: 1, rowSpan: 9999, column: 0,`
167	`stretch: go.GraphObject.Vertical,`
168	`selectable: false, pickable: false`
169	`}, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, { alignment: go.Spot.Center, font: 'bold 12pt sans-serif', angle: 270 }, new go.Binding('text'))));`
170
171	`myDiagram.nodeTemplateMap.add('Column Header', // for each column header`
172	`$(go.Part, 'Spot', {`
173	`row: 1, rowSpan: 9999, column: 2,`
174	`minSize: new go.Size(100, NaN),`
175	`stretch: go.GraphObject.Fill,`
176	`movable: false,`
177	`resizable: true,`
178	`resizeAdornmentTemplate: $(go.Adornment, 'Spot', $(go.Placeholder), $(go.Shape, // for changing the length of a lane`
179	`{`
180	`alignment: go.Spot.Right,`
181	`desiredSize: new go.Size(7, 50),`
182	`fill: 'lightblue', stroke: 'dodgerblue',`
183	`cursor: 'col-resize'`
184	`}))`
185	`}, new go.Binding('column', 'col'), $(go.Shape, { fill: null }, new go.Binding('fill', 'color')), $(go.Panel, 'Auto', {`
186	`alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom,`
187	`stretch: go.GraphObject.Horizontal,`
188	`height: myDiagram.layout.getRowDefinition(1).height`
189	`}, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, {`
190	`font: 'bold 10pt sans-serif', isMultiline: false,`
191	`wrap: go.TextBlock.None, overflow: go.TextBlock.OverflowEllipsis`
192	`}, new go.Binding('text')))));`
193
194	`myDiagram.nodeTemplateMap.add('Row Sider', // for each row header`
195	`$(go.Part, 'Spot', {`
196	`row: 2, column: 1, columnSpan: 9999,`
197	`minSize: new go.Size(NaN, 100),`
198	`stretch: go.GraphObject.Fill,`
199	`movable: false,`
200	`resizable: true,`
201	`resizeAdornmentTemplate: $(go.Adornment, 'Spot', $(go.Placeholder), $(go.Shape, // for changing the breadth of a lane`
202	`{`
203	`alignment: go.Spot.Bottom,`
204	`desiredSize: new go.Size(50, 7),`
205	`fill: 'lightblue', stroke: 'dodgerblue',`
206	`cursor: 'row-resize'`
207	`}))`
208	`}, new go.Binding('row'), $(go.Shape, { fill: null }, new go.Binding('fill', 'color')), $(go.Panel, 'Auto', {`
209	`alignment: go.Spot.Left, alignmentFocus: go.Spot.Right,`
210	`stretch: go.GraphObject.Vertical, angle: 270,`
211	`height: myDiagram.layout.getColumnDefinition(1).width`
212	`}, $(go.Shape, { fill: 'transparent', strokeWidth: 0 }), $(go.TextBlock, {`
213	`font: 'bold 10pt sans-serif', isMultiline: false,`
214	`wrap: go.TextBlock.None, overflow: go.TextBlock.OverflowEllipsis`
215	`}, new go.Binding('text')))));`
216
217	`myDiagram.nodeTemplate = // for regular nodes within cells (groups); you'll want to extend this`
218	`$(go.Node, 'Auto', { width: 100, height: 50, margin: 4 }, // assume uniform Margin, all around`
219	`new go.Binding('row'), new go.Binding('column', 'col'), $(go.Shape, { fill: 'white' }, new go.Binding('fill', 'color')), $(go.TextBlock, new go.Binding('text', 'key')));`
220
221	`myDiagram.groupTemplate = // for cells`
222	`$(go.Group, 'Auto', {`
223	`layerName: 'Background',`
224	`stretch: go.GraphObject.Fill,`
225	`selectable: false,`
226	`computesBoundsAfterDrag: true,`
227	`computesBoundsIncludingLocation: true,`
228	`handlesDragDropForMembers: true,`
229	`mouseDragEnter: (e, group) => {`
230	`if (group instanceof go.Group) group.isHighlighted = true;`
231	`},`
232	`mouseDragLeave: (e, group) => {`
233	`if (group instanceof go.Group) group.isHighlighted = false;`
234	`},`
235	`mouseDrop: (e, group) => {`
236	`if (!(group instanceof go.Group)) return;`
237	`// if any dropped part wasn't already a member of this group, we'll want to let the group's row`
238	`// column allow themselves to be resized automatically, in case the row height or column width`
239	`// had been set manually by the LaneResizingTool`
240	`const anynew = e.diagram.selection.any((p) => p.containingGroup !== group);`
241	`// Don't allow headers/siders to be dropped`
242	`const anyHeadersSiders = e.diagram.selection.any((p) => {`
243	`return p.category === 'Column Header' \|\| p.category === 'Row Sider';`
244	`});`
245	`if (!anyHeadersSiders && group.addMembers(e.diagram.selection, true)) {`
246	`if (anynew) {`
247	`e.diagram.layout.getRowDefinition(group.row).height = NaN;`
248	`e.diagram.layout.getColumnDefinition(group.column).width = NaN;`
249	`}`
250	`}`
251	`else { // failure upon trying to add parts to this group`
252	`e.diagram.currentTool.doCancel();`
253	`}`
254	`}`
255	`}, new go.Binding('row'), new go.Binding('column', 'col'),`
256	`// the group is normally unseen -- it is completely transparent except when given a color or when highlighted`
257	`$(go.Shape, {`
258	`fill: 'transparent', stroke: 'transparent',`
259	`strokeWidth: myDiagram.nodeTemplate.margin.left,`
260	`stretch: go.GraphObject.Fill`
261	`}, new go.Binding('fill', 'color'), new go.Binding('stroke', 'isHighlighted', (h) => h ? 'red' : 'transparent').ofObject()), $(go.Placeholder, {`
262	`alignment: ((m) => new go.Spot(0, 0, m.top, m.left))(myDiagram.nodeTemplate.margin),`
263	`padding: ((m) => new go.Margin(0, m.right, m.bottom, 0))(myDiagram.nodeTemplate.margin)`
264	`}));`
265
266	`myDiagram.model = new go.GraphLinksModel([`
267	`// headers`
268	`{ key: 'Header', text: 'Vacation Procedures', category: 'Header' },`
269	`{ key: 'Sider', text: 'Personnel', category: 'Sider' },`
270	`// column and row headers`
271	`{ key: 'Request', text: 'Request', col: 2, category: 'Column Header' },`
272	`{ key: 'Approval', text: 'Approval', col: 3, category: 'Column Header' },`
273	`{ key: 'Employee', text: 'Employee', row: 2, category: 'Row Sider' },`
274	`{ key: 'Manager', text: 'Manager', row: 3, category: 'Row Sider' },`
275	`{ key: 'Administrator', text: 'Administrator', row: 4, category: 'Row Sider' },`
276	`// cells, each a group assigned to a row and column`
277	`{ key: 'EmpReq', row: 2, col: 2, isGroup: true, color: 'lightyellow' },`
278	`{ key: 'EmpApp', row: 2, col: 3, isGroup: true, color: 'lightgreen' },`
279	`{ key: 'ManReq', row: 3, col: 2, isGroup: true, color: 'lightgreen' },`
280	`{ key: 'ManApp', row: 3, col: 3, isGroup: true, color: 'lightyellow' },`
281	`{ key: 'AdmReq', row: 4, col: 2, isGroup: true, color: 'lightyellow' },`
282	`{ key: 'AdmApp', row: 4, col: 3, isGroup: true, color: 'lightgreen' },`
283	`// nodes, each assigned to a group/cell`
284	`{ key: 'Delta', color: 'orange', size: '100 100', group: 'EmpReq' },`
285	`{ key: 'Epsilon', color: 'coral', size: '100 50', group: 'EmpReq' },`
286	`{ key: 'Zeta', color: 'tomato', size: '50 70', group: 'ManReq' },`
287	`{ key: 'Eta', color: 'coral', size: '50 50', group: 'ManApp' },`
288	`{ key: 'Theta', color: 'tomato', size: '100 50', group: 'AdmApp' }`
289	`]);`
290
291	`const myPalette = $(go.Palette, 'myPaletteDiv', {`
292	`nodeTemplateMap: myDiagram.nodeTemplateMap,`
293	`'model.nodeDataArray': [`
294	`{ key: 'Alpha', color: 'orange' },`
295	`{ key: 'Beta', color: 'tomato' },`
296	`{ key: 'Gamma', color: 'goldenrod' }`
297	`]`
298	`});`
299
300	`window.myDiagram = myDiagram; // Attach to the window for console debugging`
301	`</script>`
302	`</div>`
303	`<!-- * * * * * * * * * * * * * -->`
304	`<!-- End of GoJS sample code -->`
305	`</div>`
306	`</body>`
307	`<!-- This script is part of the gojs.net website, and is not needed to run the sample -->`
308	`<script src="../assets/js/goSamples.js"></script>`
309	`</html>`