UNPKG

gojs/intro/react.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS and React -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<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-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" 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="navClosed" 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>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Using GoJS with React</h1>
137<p class="box" style="background-color: lightgoldenrodyellow;">
Examples of most of the topics discussed on this page can be found in the <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">gojs-react-basic</a> project,
which serves as a simple starter project.
140</p>
141
142<p>
If you are new to GoJS, it may be helpful to first visit the <a href="../learn/index.html" target="_blank">Getting Started Tutorial</a>.
144</p>
145
146<p>
The easiest way to get a component set up for a GoJS Diagram is to use the <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank">gojs-react</a> package,
which exports React Components for GoJS Diagrams, Palettes, and Overviews.
The <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">gojs-react-basic</a> project demonstrates how to use these components.
More information about the package, including the various props it takes, can be found on the <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank">Github</a> or
<a href="https://npmjs.com/gojs-react" target="_blank">NPM</a> pages. Our examples will be using a <a>GraphLinksModel</a>, but any model can be used.
152</p>
153
154<h2 id="quickstart">Quick start with an existing React application</h2>
155<h4 id="Installation">Installation</h4>
156<p>
Start by installing GoJS and gojs-react: <code>npm install gojs gojs-react</code>.
158</p>
159<h4 id="DiagramStyling">Diagram styling</h4>
160<p>
Next, set up a CSS class for the GoJS diagram's div:
162</p>
163<pre class="lang-css"><code>
/* App.css */
.diagram-component {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  background-color: white;
}
171</code></pre>
172<h4 id="RenderingComponent">Rendering the component</h4>
173<p>
Finally, add an initDiagram function and a model change handler function, and add the ReactDiagram component inside your render method.
Note that the UndoManager should always be enabled to allow for transactions to take place,
but the <a>UndoManager.maxHistoryLength</a> can be set to 0 to prevent undo and redo.
177</p>
178<pre class="lang-js"><code>
// App.js
import React from 'react';
181
import * as go from 'gojs';
import { ReactDiagram } from 'gojs-react';
184
import './App.css';  // contains .diagram-component CSS
186
// ...
188
/**
 * Diagram initialization method, which is passed to the ReactDiagram component.
 * This method is responsible for making the diagram and initializing the model and any templates.
 * The model's data should not be set here, as the ReactDiagram component handles that via the other props.
 */
function initDiagram() {
  const $ = go.GraphObject.make;
  // set your license key here before creating the diagram: go.Diagram.licenseKey = "...";
  const diagram =
    $(go.Diagram,
      {
        'undoManager.isEnabled': true,  // must be set to allow for model change listening
        // 'undoManager.maxHistoryLength': 0,  // uncomment disable undo/redo functionality
        'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
        model: $(go.GraphLinksModel,
          {
            linkKeyProperty: 'key'  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
          })
      });
208
  // define a simple Node template
  diagram.nodeTemplate =
    $(go.Node, 'Auto',  // the Shape will go around the TextBlock
      new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.Shape, 'RoundedRectangle',
        { name: 'SHAPE', fill: 'white', strokeWidth: 0 },
        // Shape.fill is bound to Node.data.color
        new go.Binding('fill', 'color')),
      $(go.TextBlock,
        { margin: 8, editable: true },  // some room around the text
        new go.Binding('text').makeTwoWay()
      )
    );
222
  return diagram;
}
225
/**
 * This function handles any changes to the GoJS model.
 * It is here that you would make any updates to your React state, which is dicussed below.
 */
function handleModelChange(changes) {
  alert('GoJS model changed!');
}
233
// render function...
function App() {
  return (
    &lt;div&gt;
      ...
      &lt;ReactDiagram
        initDiagram={initDiagram}
        divClassName='diagram-component'
        nodeDataArray={[
          { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
          { key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
          { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
          { key: 3, text: 'Delta', color: 'pink', loc: '150 150' }
        ]}
        linkDataArray={[
          { key: -1, from: 0, to: 1 },
          { key: -2, from: 0, to: 2 },
          { key: -3, from: 1, to: 1 },
          { key: -4, from: 2, to: 3 },
          { key: -5, from: 3, to: 0 }
        ]}
        onModelChange={handleModelChange}
      /&gt;
      ...
    &lt;/div&gt;
  );
}
261</code></pre>
262<p>
That's it! You should now have a GoJS diagram rendering within your React application.
Try editing the text of a node or deleting a node, and you'll see an alert on the page.
265</p>
266
267<h2 id="stateful">Usage in a stateful React app</h2>
268<p>
Typically the data being passed to the ReactDiagram component will be used elsewhere in your app and will exist in React state.
For example, you may have some kind of inspector that can be used to modify node properties, and therefore the state should be lifted up and held by a parent component
of both the diagram and the inspector.
272</p>
273<p>
A basic setup can be seen in the <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">gojs-react-basic</a> project,
but we'll describe some of the methodology here.
276</p>
277<h4 id="CreatingWrapperComponent">Creating a wrapper component</h4>
278<p>
When handling state, it is often useful to write a wrapper component around the gojs-react components to pass the necessary props along and keep GoJS initialization out of the main app.
There are a few things that should be set up in the wrapper component:
<ul>
  <li>a set of props coming in from the parent component which holds state and handlers</li>
  <li>a ref to the ReactDiagram component so getDiagram() and clear() can be used</li>
  <li>componentDidMount and componentWillUnmount methods to add/remove app-specific diagram listeners</li>
  <li>an initDiagram method to be passed to the ReactDiagram component</li>
</ul>
Node and link data are <i>merged</i> into the GoJS model, thus properties should not be removed from node or link data,
but rather set to undefined if they are no longer needed; GoJS avoids destructive merging.
289</p>
290<p>
Below, we'll pass linkDataArray and modelData as props to the ReactDiagram, but note that they are not always needed in gojs-react components,
so your app may not need to include them. For proper initial loading of data, one should have the data ready before the ReactDiagram component mounts.
This allows layouts and linking to occur properly with the initial data set.
294</p>
295<pre class="lang-js"><code>
import * as go from 'gojs';
import { ReactDiagram } from 'gojs-react';
import * as React from 'react';
299
// props passed in from a parent component holding state, some of which will be passed to ReactDiagram
interface WrapperProps {
  nodeDataArray: Array&lt;go.ObjectData&gt;;
  linkDataArray: Array&lt;go.ObjectData&gt;;
  modelData: go.ObjectData;
  skipsDiagramUpdate: boolean;
  onDiagramEvent: (e: go.DiagramEvent) => void;
  onModelChange: (e: go.IncrementalData) => void;
}
309
export class DiagramWrapper extends React.Component&lt;WrapperProps, {}&gt; {
  /**
   * Ref to keep a reference to the component, which provides access to the GoJS diagram via getDiagram().
   */
  private diagramRef: React.RefObject&lt;ReactDiagram&gt;;
315
  constructor(props: WrapperProps) {
    super(props);
    this.diagramRef = React.createRef();
  }
320
  /**
   * Get the diagram reference and add any desired diagram listeners.
   * Typically the same function will be used for each listener,
   * with the function using a switch statement to handle the events.
   * This is only necessary when you want to define additional app-specific diagram listeners.
   */
  public componentDidMount() {
    if (!this.diagramRef.current) return;
    const diagram = this.diagramRef.current.getDiagram();
    if (diagram instanceof go.Diagram) {
      diagram.addDiagramListener('ChangedSelection', this.props.onDiagramEvent);
    }
  }
334
  /**
   * Get the diagram reference and remove listeners that were added during mounting.
   * This is only necessary when you have defined additional app-specific diagram listeners.
   */
  public componentWillUnmount() {
    if (!this.diagramRef.current) return;
    const diagram = this.diagramRef.current.getDiagram();
    if (diagram instanceof go.Diagram) {
      diagram.removeDiagramListener('ChangedSelection', this.props.onDiagramEvent);
    }
  }
346
  /**
   * Diagram initialization method, which is passed to the ReactDiagram component.
   * This method is responsible for making the diagram and initializing the model, any templates,
   * and maybe doing other initialization tasks like customizing tools.
   * The model's data should not be set here, as the ReactDiagram component handles that via the other props.
   */
  private initDiagram(): go.Diagram {
    const $ = go.GraphObject.make;
    // set your license key here before creating the diagram: go.Diagram.licenseKey = "...";
    const diagram =
      $(go.Diagram,
        {
          'undoManager.isEnabled': true,  // must be set to allow for model change listening
          // 'undoManager.maxHistoryLength': 0,  // uncomment disable undo/redo functionality
          'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
          model: $(go.GraphLinksModel,
            {
              linkKeyProperty: 'key',  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
              // positive keys for nodes
              makeUniqueKeyFunction: (m: go.Model, data: any) => {
                let k = data.key || 1;
                while (m.findNodeDataForKey(k)) k++;
                data.key = k;
                return k;
              },
              // negative keys for links
              makeUniqueLinkKeyFunction: (m: go.GraphLinksModel, data: any) => {
                let k = data.key || -1;
                while (m.findLinkDataForKey(k)) k--;
                data.key = k;
                return k;
              }
            })
        });
381
    // define a simple Node template
    diagram.nodeTemplate =
      $(go.Node, 'Auto',  // the Shape will go around the TextBlock
        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, 'RoundedRectangle',
          {
            name: 'SHAPE', fill: 'white', strokeWidth: 0,
            // set the port properties:
            portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer'
          },
          // Shape.fill is bound to Node.data.color
          new go.Binding('fill', 'color')),
        $(go.TextBlock,
          { margin: 8, editable: true, font: '400 .875rem Roboto, sans-serif' },  // some room around the text
          new go.Binding('text').makeTwoWay()
        )
      );
399
    // relinking depends on modelData
    diagram.linkTemplate =
      $(go.Link,
        new go.Binding('relinkableFrom', 'canRelink').ofModel(),
        new go.Binding('relinkableTo', 'canRelink').ofModel(),
        $(go.Shape),
        $(go.Shape, { toArrow: 'Standard' })
      );
408
    return diagram;
  }
411
  public render() {
    return (
      &lt;ReactDiagram
        ref={this.diagramRef}
        divClassName='diagram-component'
        initDiagram={this.initDiagram}
        nodeDataArray={this.props.nodeDataArray}
        linkDataArray={this.props.linkDataArray}
        modelData={this.props.modelData}
        onModelChange={this.props.onModelChange}
        skipsDiagramUpdate={this.props.skipsDiagramUpdate}
      /&gt;
    );
  }
}
427</code></pre>
428<h4 id="UsingWrapperComponentWithinApp">Using the wrapper component within the app</h4>
429<p>
The application should set up a few things to be passed to the wrapper described above:
<ul>
  <li>state containing a nodeDataArray, linkDataArray, modelData object, and skipsDiagramUpdate flag</li>
  <li>a handleDiagramEvent method for any app-specific DiagramEvents, such as 'ChangedSelection'</li>
  <li>a handleModelChange method for updating state based on updates from the GoJS model</li>
</ul>
436</p>
437<pre class="lang-js"><code>
import * as go from 'gojs';
import * as React from 'react';
440
import { DiagramWrapper } from './components/Diagram';
442
interface AppState {
  // ...
  nodeDataArray: Array&lt;go.ObjectData&gt;;
  linkDataArray: Array&lt;go.ObjectData&gt;;
  modelData: go.ObjectData;
  selectedKey: number | null;
  skipsDiagramUpdate: boolean;
}
451
class App extends React.Component&lt;{}, AppState&gt; {
  constructor(props: object) {
    super(props);
    this.state = {
      // ...
      nodeDataArray: [
        { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
        { key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
        { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
        { key: 3, text: 'Delta', color: 'pink', loc: '150 150' }
      ],
      linkDataArray: [
        { key: -1, from: 0, to: 1 },
        { key: -2, from: 0, to: 2 },
        { key: -3, from: 1, to: 1 },
        { key: -4, from: 2, to: 3 },
        { key: -5, from: 3, to: 0 }
      ],
      modelData: {
        canRelink: true
      },
      selectedKey: null,
      skipsDiagramUpdate: false
    };
    // bind handler methods
    this.handleDiagramEvent = this.handleDiagramEvent.bind(this);
    this.handleModelChange = this.handleModelChange.bind(this);
    this.handleRelinkChange = this.handleRelinkChange.bind(this);
  }
481
  /**
   * Handle any app-specific DiagramEvents, in this case just selection changes.
   * On ChangedSelection, find the corresponding data and set the selectedKey state.
   *
   * This is not required, and is only needed when handling DiagramEvents from the GoJS diagram.
   * @param e a GoJS DiagramEvent
   */
  public handleDiagramEvent(e: go.DiagramEvent) {
    const name = e.name;
    switch (name) {
      case 'ChangedSelection': {
        const sel = e.subject.first();
        if (sel) {
          this.setState({ selectedKey: sel.key });
        } else {
          this.setState({ selectedKey: null });
        }
        break;
      }
      default: break;
    }
  }
504
  /**
   * Handle GoJS model changes, which output an object of data changes via Model.toIncrementalData.
   * This method should iterates over those changes and update state to keep in sync with the GoJS model.
   * This can be done via setState in React or another preferred state management method.
   * @param obj a JSON-formatted string
   */
  public handleModelChange(obj: go.IncrementalData) {
    const insertedNodeKeys = obj.insertedNodeKeys;
    const modifiedNodeData = obj.modifiedNodeData;
    const removedNodeKeys = obj.removedNodeKeys;
    const insertedLinkKeys = obj.insertedLinkKeys;
    const modifiedLinkData = obj.modifiedLinkData;
    const removedLinkKeys = obj.removedLinkKeys;
    const modifiedModelData = obj.modelData;
519
    console.log(obj);
521
    // see gojs-react-basic for an example model change handler
    // when setting state, be sure to set skipsDiagramUpdate: true since GoJS already has this update
  }
525
  /**
   * Handle changes to the checkbox on whether to allow relinking.
   * @param e a change event from the checkbox
   */
  public handleRelinkChange(e: any) {
    const target = e.target;
    const value = target.checked;
    this.setState({ modelData: { canRelink: value }, skipsDiagramUpdate: false });
  }
535
  public render() {
    let selKey;
    if (this.state.selectedKey !== null) {
      selKey = &lt;p&gt;Selected key: {this.state.selectedKey}&lt;/p&gt;;
    }
541
    return (
      &lt;div&gt;
        &lt;DiagramWrapper
          nodeDataArray={this.state.nodeDataArray}
          linkDataArray={this.state.linkDataArray}
          modelData={this.state.modelData}
          skipsDiagramUpdate={this.state.skipsDiagramUpdate}
          onDiagramEvent={this.handleDiagramEvent}
          onModelChange={this.handleModelChange}
        /&gt;
        &lt;label&gt;
          Allow Relinking?
          &lt;input
            type='checkbox'
            id='relink'
            checked={this.state.modelData.canRelink}
            onChange={this.handleRelinkChange} /&gt;
        &lt;/label&gt;
        {selKey}
      &lt;/div&gt;
    );
  }
}
565</code></pre>
566<h4>A Note on Diagram Reinitialization</h4>
567<p>
Occasionally you may want to treat a model update as if you were loading a completely new model.
But initialization is done via the initDiagram function, within the componentDidMount lifecycle method, and only once.
A regular model update is not treated as an initialization, so none of the <b>initial...</b> properties
of your Diagram will apply.
572</p>
573<p>
To address this problem, ReactDiagram exposes a clear() method.
When called, it clears its diagram of all nodes, links, and model data, and
prepares the next state update to be treated as a diagram initialization.
That will result in an initial layout and perform initial diagram content alignment and scaling.
Note that the initDiagram function is not called again.
579</p>
580<p>
Here is a small sample of how one might trigger diagram reinitilization using the clear() method.
582</p>
583<pre class="lang-js"><code>
public reinitModel() {
  this.diagramRef.current.clear();
  this.setState({
    nodeDataArray: [
      { key: 0, text: 'Epsilon', color: 'lightblue' },
      { key: 1, text: 'Zeta', color: 'orange' },
      { key: 2, text: 'Eta', color: 'lightgreen' },
      { key: 3, text: 'Theta', color: 'pink' }
    ],
    linkDataArray: [
      { key: -1, from: 0, to: 1 },
      { key: -2, from: 0, to: 2 },
      { key: -3, from: 1, to: 1 },
      { key: -4, from: 2, to: 3 },
      { key: -5, from: 3, to: 0 }
    ],
    skipsDiagramUpdate: false
  });
}
603</code></pre>
604<p>
These are the basics for setting up GoJS within a React application. See <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">gojs-react-basic</a>
for a working example and the <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank">gojs-react</a> Github page for further explanation of various props
passed to the components.
608</p>
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
619
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a 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>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
682
            </ul>
          </li>
        </ul>
686
687
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
693</footer>  </body>
694
695<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
696<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
707
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
717</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
733</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
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS and React -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<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">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<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>`
30	`<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>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`