my project use the package react-gojs, and the demand is I add an node，then change the node text，but I can't get the new text value

I m importing diagram from a json file, after which ModelChangeEvent is not being recognised.

 // import data from json file 
    public importFromFile = () => {
        // Make a request for data from file
        axios.get('/file.json' )
            .then((response) => {
                const newModel = new go.GraphLinksModel(response.data.stages, response.data.links);
                const newDiagram = this.state.diagram;
                newDiagram.model = newModel;
                this.setState({
                    diagram: newDiagram
                });
            })
            .catch((error) => {
                console.log(error);
            });
    }

I cloned react / redux / react-gojs example.
Rest of the code works fine If i don’t upload diagram from file and just add a node the diagram it recognizes
ModelChangeEvent.

Support the latest version of gojs https://gojs.net/latest/changelog.html

Event such as click a node, I didn't see it. I think just use GoJS would be fine; however, this repo show a good sample for using gojs.

I'm trying to add multiple links between two nodes after initialisation via:

<GojsDiagram model={myModel} linkKeyProperty="key" />

I do have linkKeyProperty="key" defined as described in #83. My model looks initially looks like this:

{
  nodeDataArray: [{type: "Company", key: "id1"}, {type: "Person", , key: "id2"}],
  linkDataArray: [{from: "id1", key: "id1-id2-worksAt", text: "WorksAt", to: "id2", type: "WorksAt"}]
}

After updating after initialisation, it looks like this:

{
  nodeDataArray: [{type: "Company", key: "id1"}, {type: "Person", , key: "id2"}],
  linkDataArray: [{from: "id1", key: "id1-id2-worksAt", to: "id2", type: "WorksAt"}, {from: "id1", key: "id1-id2-buysAt", to: "id2", type: "BuysAt"}]
}

I was expecting that the diagram would render the second node but it does only do that when it was already included on initial render.

It did find applyAddRemoveLinksFromModel in GojsDiagram.tsx is checking for el.from === e.from && el.to === e.to, which means that it will not return a second link added to the model which has the same from and to as and existing link. A possible fix could be checking for the unique identifier linkKeyProperty, like el.from === e.from && el.to === e.to && el[this.props.linkKeyProperty] === e[this.props.linkKeyProperty]. The array linksToAdd now includes an object representing a second link added after initialisation. However, it still doesn't render in the diagram after calling (this.myDiagram.model as GojsModel).addLinkDataCollection(linksToAdd); I can't look for a possible bug in the source of this file since it's minified.

Could you confirm that after (this.myDiagram.model as GojsModel).addLinkDataCollection(linksToAdd); the diagram should render the new link? What could be the reason that the second link is not being rendered?

We want to use the same CI on every project (open source and internally).
As we mainly use circleci, we want to migrate this project to circleci

Hi! Awesome integration!

With a palette and a diagram where allowDrop is true, when the user drags a node from the palette onto the diagram, the add event is triggered twice. Once when the cursor enters the diagram and again on the drop.

function createDiagram(id) {
  const diagram = $(go.Diagram, id, {
    allowDrop: true, // permit accepting drag-and-drops
  })
 //...
}

Add a callback to notify when the diagram model has changed internally.
This callback is very useful to keep your model (provided as prop) in sync with the diagram (especially in designer perspective)

https://prettier.io/

Need to add binding to nodeCategoryProperty from the component props. I raised a PR: #52

I want to have buttons to control the zoom levels of my canvas.
I want to call mydiagram.commandHandler.increaseZoom() to achieve that. How can I access the diagram created in this case?

I copied the example project into a new one and put the GojsDiagram into a pure component.

const NormDiagram = ({ model, createDiagram, modelChangeHandler, ...props }) => {

  return <div className="row">
    <Global styles={ css`
      canvas {
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
      }
      ` }
    />
    <div className="col-md-10 col-md-offset-1">
      <GojsDiagram
        css={ css`
          width: 70%;
          flex: 1 1 auto;
          margin: auto;
        ` }
        key="gojsDiagram"
        diagramId="myDiagramDiv"
        model={ model }
        createDiagram={ createDiagram }
        className="myDiagram"
        onModelChange={ modelChangeHandler }
      />
    </div>
  </div>
}

This error appears with GoJS 2.1.x due to an API change.
As we don't want to do significant developments in the repository, I will downgrade goJS to the latest 2.0.x version.
If you want to use the latest goJS version, just use the official gojs-react library.

As the model provided as parameter can be immutable (redux use case), GojsDiagram should not mutate nodes and links

For our application, we need to set a copyNodeDataFunction. (see https://gojs.net/latest/api/symbols/Model.html#copyNodeDataFunction).

Working on a branch and will do a pull request when I'm done.

I am using js files in my project instead of ts files. Also I don't have redux. Can anyone give me a demo, pretty basic demo of how to use this with the above setup, ie without converting my component to ts file.?

I am trying to set additional model state variables but for some reason the additional variables are not carried into the gojs canvas. the variables I'm trying to set are copiesArrays , copiesArrayObject, Below is where i'm trying to set the variables.

render() {
return [

];
}

I was playing with model binding properties to change the look and feeling about the nodes and edges and i realise that for nodes is working but it isn't for links.
Any idea why it isn't my links updating?

Check https://codesandbox.io/embed/kxq6zx47y7 a way to reproduce this issue. Just click into the button to generate a random look and feeling for all nodes and links.

Edit: added same example in vanilla gojs(https://codesandbox.io/embed/9opn15521w), but as you could see it is working. So something related with how model links get updates.
Edit2: after checking more in deep how this lib works i notice that maybe it could be a gojs problem, check following example(https://codesandbox.io/embed/5j9jwyo4k) into Diagram.js method refreshModel, i use applyIncrementalJson method and then you see that links somehow are not updated

It doesn't look like modelData is supported within the model object. Any chance this is a priority in the near future?

GoJs has the ability to add overview to a diagram. The overview is supposed to be instantiated the same time as the diagram, but has a different id. And that id is used in the div to render it.

React-gojs seems to only support one id from the createDiagram function.

Example: https://gojs.net/latest/samples/orgChartStatic.html

Some techincal files should not be included in our npm package.
For example, .prettierrc, travis.yml etc...

Hello,

As of GoJS 2.1, Northwoods now publishes an official GoJS-React component:

https://github.com/NorthwoodsSoftware/gojs-react

https://www.npmjs.com/package/gojs-react

If you don't feel like maintaining this component any longer, feel free to point to the official one.

Thanks for all your help. If you have any commentary on how we've developed the in-house component, we'd love to hear from you.

Do not try to deploy on both node 8 and node 10 environments