Skip to content
A set of React components to manage GoJS Diagrams, Palettes, and Overviews
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 6444e93 Nov 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add issue template Nov 6, 2019
scripts Initial commit Oct 21, 2019
src
.gitattributes Initial commit Oct 21, 2019
.gitignore Update .gitignore Oct 21, 2019
IMPLEMENTATION.md Update for GoJS 2.1 release Nov 6, 2019
LICENSE.md Initial commit Oct 21, 2019
README.md Update README.md Nov 13, 2019
package-lock.json Fix links, add prepare script Nov 8, 2019
package.json Fix links, add prepare script Nov 8, 2019
rollup.config.js Initial commit Oct 21, 2019
tsconfig.json Initial commit Oct 21, 2019

README.md

gojs-react

By Northwoods Software for GoJS 2.1

This project provides React components for GoJS Diagrams, Palettes, and Overviews to simplify usage of GoJS within a React application. See the gojs-react-basic project for example usage and the Intro page on using GoJS with React for more information. Some more detail on the implementation of these components can be found here.

Installation

gojs-react can be installed via NPM or used via CDN. This package has peer dependencies on GoJS and React, so make sure those are also installed or included on your page.

NPM

npm install --save gojs-react

CDN

<script src="https://unpkg.com/gojs-react/dist/gojsreact.production.min.js"></script>

Usage

This package provides three components - ReactDiagram, ReactPalette, and ReactOverview - corresponding to the related GoJS classes. The gojs-react-basic repository provides example usage. Feel free to use these components as examples for setting up your own React components for GoJS. If you'd like to do so, we suggest reading more about the implementation of these components here.

<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}
/>

<ReactPalette
  initPalette={this.initPalette}
  divClassName='palette-component'
  nodeDataArray={[{ key: 0, text: 'Alpha' }]}
/>

<ReactOverview
  initOverview={this.initOverview}
  divClassName='overview-component'
  observedDiagram={this.state.observed}
/>

Component Props

initDiagram/initPalette/initOverview

Specifies a function that is reponsible for initializing and returning a GoJS Diagram, Palette, or Overview. In the case of an Overview, this is an optional property and when not provided, an Overview with default properties and centered content will be created.

function initDiagram() {
  const $ = go.GraphObject.make;

  const diagram = $(go.Diagram,
    {
      'undoManager.isEnabled': true,
      model: $(go.GraphLinksModel, {
        linkKeyProperty: 'key'  // this should always be set when using a GraphLinksModel
      })
    });

  diagram.nodeTemplate =
    $(go.Node, 'Auto',  // the Shape will go around the TextBlock
      $(go.Shape, 'RoundedRectangle', { strokeWidth: 0, fill: 'white' },
        // Shape.fill is bound to Node.data.color
        new go.Binding('fill', 'color')),
      $(go.TextBlock,
        { margin: 8 },  // some room around the text
        // TextBlock.text is bound to Node.data.key
        new go.Binding('text', 'key'))
    );

  return diagram;
}

divClassName

Specifies the CSS classname to add to the rendered div. This should usually specify a width/height.

.diagram-component {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

nodeDataArray (ReactDiagram and ReactPalette only)

Specifies the array of nodes for the Diagram's model.

nodeDataArray: [
  { key: 'Alpha', color: 'lightblue' },
  { key: 'Beta', color: 'orange' },
  { key: 'Gamma', color: 'lightgreen' },
  { key: 'Delta', color: 'pink' }
]

Optional - linkDataArray (ReactDiagram and ReactPalette only)

Specifies the array of links for the Diagram's model.

linkDataArray: [
  { key: -1, from: 'Alpha', to: 'Beta' },
  { key: -2, from: 'Alpha', to: 'Gamma' },
  { key: -3, from: 'Beta', to: 'Beta' },
  { key: -4, from: 'Gamma', to: 'Delta' },
  { key: -5, from: 'Delta', to: 'Alpha' }
]

Optional - modelData (ReactDiagram and ReactPalette only)

Specifies a modelData object for the Diagram's model.

skipsDiagramUpdate (ReactDiagram only)

Specifies whether the component should skip updating, often set when updating state from a GoJS model change. This flag is checked during shouldComponentUpdate.

onModelChange (ReactDiagram only)

Specifies a function to be called when a GoJS transaction has completed. This function will typically be responsible for updating React/Redux state.

function handleModelChange(data) {
  const insertedNodeKeys = data.insertedNodeKeys;
  const modifiedNodeData = data.modifiedNodeData;
  const removedNodeKeys = data.removedNodeKeys;
  const insertedLinkKeys = data.insertedLinkKeys;
  const modifiedLinkData = data.modifiedLinkData;
  const removedLinkKeys = data.removedLinkKeys;

  // ... make state changes
}

observedDiagram (ReactOverview only)

Specifies the go.Diagram which the Overview will observe.

License

This project is intended to be used alongside GoJS, and is covered by the GoJS software license.

Copyright 1998-2019 by Northwoods Software Corporation.

You can’t perform that action at this time.