gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
233 lines (225 loc) • 12.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="TypeScript: Using the RowResizingTool and ColumnResizingTool to allow the user to change the size of rows and columns in a Table Panel."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Resizing Rows and Columns in a Table Panel</title>
</head>
<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="my-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 -->
<div id="allSampleContent" class="p-4 w-full">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
<p>
This makes use of two tools, defined in their own files: <a href="ColumnResizingTool.js" target="_blank">ColumnResizingTool.js</a> and <a href="RowResizingTool.js" target="_blank">RowResizingTool.js</a>.
Each tool adds an <a>Adornment</a> to a selected node that has a resize handle for each column or each row of a "Table" <a>Panel</a>.
While resizing, you can press the Tab or the Delete key in order to stop the tool and restore the column or row to its natural size.
</p>
<p>
This sample also adds TwoWay Bindings to the <a>RowColumnDefinition.width</a> property for the columns.
Each column width is stored in the corresponding index of the node data's "widths" property, which must be an Array of numbers.
The default value is NaN, allowing the column to occupy its natural width.
Note that there are <b>no</b> Bindings for the row heights.
</p>
<p>The model data, automatically updated after each change or undo or redo:</p>
<textarea id="mySavedModel" style="width:100%;height:300px"></textarea>
<p>See also the <a href="../samples/addRemoveColumns.html">Add & Remove Rows & Columns</a> sample.</p>
</div>
<script type="module" id="code">
import * as go from "../release/go-module.js";
import { ColumnResizingTool } from './ColumnResizingTool.js';
import { RowResizingTool } from './RowResizingTool.js';
if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this
const $ = go.GraphObject.make; // for conciseness in defining templates
const myDiagram = new go.Diagram('myDiagramDiv', {
validCycle: go.Diagram.CycleNotDirected,
'undoManager.isEnabled': true
});
myDiagram.toolManager.mouseDownTools.add(new RowResizingTool());
myDiagram.toolManager.mouseDownTools.add(new ColumnResizingTool());
// This template is a Panel that is used to represent each item in a Panel.itemArray.
// The Panel is data bound to the item object.
const fieldTemplate = $(go.Panel, 'TableRow', // this Panel is a row in the containing Table
new go.Binding('portId', 'name'), // this Panel is a "port"
{
background: 'transparent',
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
// allow drawing links from or to this port:
fromLinkable: true, toLinkable: true
}, $(go.Shape, {
column: 0,
width: 12, height: 12, margin: 4,
// but disallow drawing links from or to this shape:
fromLinkable: false, toLinkable: false
}, new go.Binding('figure', 'figure'), new go.Binding('fill', 'color')), $(go.TextBlock, {
column: 1,
margin: new go.Margin(0, 2),
stretch: go.GraphObject.Horizontal,
font: 'bold 13px sans-serif',
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
// and disallow drawing links from or to this text:
fromLinkable: false, toLinkable: false
}, new go.Binding('text', 'name')), $(go.TextBlock, {
column: 2,
margin: new go.Margin(0, 2),
stretch: go.GraphObject.Horizontal,
font: '13px sans-serif',
maxLines: 3,
overflow: go.TextBlock.OverflowEllipsis,
editable: true
}, new go.Binding('text', 'info').makeTwoWay()));
// Return initialization for a RowColumnDefinition, specifying a particular column
// and adding a Binding of RowColumnDefinition.width to the IDX'th number in the data.widths Array
function makeWidthBinding(idx) {
// These two conversion functions are closed over the IDX variable.
// This source-to-target conversion extracts a number from the Array at the given index.
function getColumnWidth(arr) {
if (Array.isArray(arr) && idx < arr.length)
return arr[idx];
return NaN;
}
// This target-to-source conversion sets a number in the Array at the given index.
function setColumnWidth(w, data) {
let arr = data.widths;
if (!arr)
arr = [];
if (idx >= arr.length) {
for (let i = arr.length; i <= idx; i++)
arr[i] = NaN; // default to NaN
}
arr[idx] = w;
return arr; // need to return the Array (as the value of data.widths)
}
return [
{ column: idx },
new go.Binding('width', 'widths', getColumnWidth).makeTwoWay(setColumnWidth)
];
}
// This template represents a whole "record".
myDiagram.nodeTemplate =
$(go.Node, 'Auto', new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
// this rectangular shape surrounds the content of the node
$(go.Shape, { fill: '#EEEEEE' }),
// the content consists of a header and a list of items
$(go.Panel, 'Vertical', { stretch: go.GraphObject.Horizontal, margin: 0.5 },
// this is the header for the whole node
$(go.Panel, 'Auto', { stretch: go.GraphObject.Horizontal }, // as wide as the whole node
$(go.Shape, { fill: '#1570A6', strokeWidth: 0 }),
$(go.TextBlock, {
alignment: go.Spot.Center,
margin: 3,
stroke: 'white',
textAlign: 'center',
font: 'bold 12pt sans-serif'
}, new go.Binding('text', 'key'))),
// this Panel holds a Panel for each item object in the itemArray;
// each item Panel is defined by the itemTemplate to be a TableRow in this Table
$(go.Panel, 'Table', {
name: 'TABLE', stretch: go.GraphObject.Horizontal,
minSize: new go.Size(100, 10),
defaultAlignment: go.Spot.Left,
defaultStretch: go.GraphObject.Horizontal,
defaultColumnSeparatorStroke: 'gray',
defaultRowSeparatorStroke: 'gray',
itemTemplate: fieldTemplate
}, $(go.RowColumnDefinition, makeWidthBinding(0)), $(go.RowColumnDefinition, makeWidthBinding(1)), $(go.RowColumnDefinition, makeWidthBinding(2)), new go.Binding('itemArray', 'fields')) // end Table Panel of items
) // end Vertical Panel
); // end Node
myDiagram.linkTemplate =
$(go.Link, { relinkableFrom: true, relinkableTo: true, toShortLength: 4 }, // let user reconnect links
$(go.Shape, { strokeWidth: 1.5 }), $(go.Shape, { toArrow: 'Standard', stroke: null }));
myDiagram.model =
new go.GraphLinksModel( {
linkFromPortIdProperty: 'fromPort',
linkToPortIdProperty: 'toPort',
// automatically update the model that is shown on this page
'Changed': e => {
if (e.isTransactionFinished)
showModel();
},
nodeDataArray: [
{
key: 'Record1',
widths: [NaN, NaN, 60],
fields: [
{ name: 'field1', info: 'first field', color: '#F7B84B', figure: 'Ellipse' },
{ name: 'field2', info: 'the second one', color: '#F25022', figure: 'Ellipse' },
{ name: 'fieldThree', info: '3rd', color: '#00BCF2' }
],
loc: '0 0'
},
{
key: 'Record2',
widths: [NaN, NaN, NaN],
fields: [
{ name: 'fieldA', info: '', color: '#FFB900', figure: 'Diamond' },
{ name: 'fieldB', info: '', color: '#F25022', figure: 'Rectangle' },
{ name: 'fieldC', info: '', color: '#7FBA00', figure: 'Diamond' },
{ name: 'fieldD', info: 'fourth', color: '#00BCF2', figure: 'Rectangle' }
],
loc: '250 0'
}
],
linkDataArray: [
{ from: 'Record1', fromPort: 'field1', to: 'Record2', toPort: 'fieldA' },
{ from: 'Record1', fromPort: 'field2', to: 'Record2', toPort: 'fieldD' },
{ from: 'Record1', fromPort: 'fieldThree', to: 'Record2', toPort: 'fieldB' }
]
});
showModel(); // show the diagram's initial model
function showModel() {
const elt = document.getElementById('mySavedModel');
if (elt !== null)
elt.textContent = myDiagram.model.toJson();
}
window.myDiagram = myDiagram; // Attach to the window for console debugging
</script>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>