Event for position and points about react-diagrams

[will-stone]

No worries, I think I figured out quite a nice solution, I'll leave it here to help anyone else trying to start using this package in a JSX environment.

import React, { Component } from 'react'

import * as SRD from 'storm-react-diagrams'

import modelJSON from './test.json'

class Test extends Component {
  constructor() {
    super()
    this.engine = new SRD.DiagramEngine()
    this.engine.registerNodeFactory(new SRD.DefaultNodeFactory())
    this.engine.registerLinkFactory(new SRD.DefaultLinkFactory())

    this.engine.registerInstanceFactory(new SRD.DefaultNodeInstanceFactory())
    this.engine.registerInstanceFactory(new SRD.DefaultPortInstanceFactory())
    this.engine.registerInstanceFactory(new SRD.LinkInstanceFactory())

    this.model = new SRD.DiagramModel()
    this.model.deSerializeDiagram(modelJSON, this.engine)

    this.engine.setDiagramModel(this.model)
  }

  buttonClick() {
    console.log(this.model)
  }

  render() {
    return (
      <div className="Test">
        <button onClick={this.buttonClick.bind(this)}>Button</button>
        <SRD.DiagramWidget diagramEngine={this.engine} />
      </div>
    )
  }
}

export default Test

That's not to say that point and node moving events wouldn't be useful :)

[gen4sp]

  model.addListener({
    actionStoppedFiring:()=>{

    },
    linksUpdated:(entity, isAdded) => {
     
      entity.addListener({
        targetPortChanged:() => {
     
        }
      });
    },
    nodesUpdated: (entity, isAdded) => {
    }
  });

[will-stone]

None of those events triggered anything when I added a point or moved a node:

model.addListener({
  actionStoppedFiring: () => {
    console.log('actionStoppedFiring')
  },
  linksUpdated: (entity, isAdded) => {
    console.log('linksUpdated')
    entity.addListener({
      targetPortChanged: () => {
        console.log('targetPortChanged')
      }
    })
  },
  nodesUpdated: (entity, isAdded) => {
    console.log('nodesUpdated')
  }
})

[dylanvorster]

will take a look now, but I'm quite positive it will

[dylanvorster]

Okay so we implemented these as a properties in the DiagramCanvas:

actionStartedFiring?: (action: BaseAction) => boolean;
actionStillFiring?: (action: BaseAction) => void;
actionStoppedFiring?: (action: BaseAction) => void;

the action that gets sent in, which you will want to look for is:

https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L60

do an instance check on the action to see if it is the one above, and then from that object you can the entities that are being moved

[dylanvorster]

We can of course also, implement additional listeners on the models themselves, but this just felt like a cleaner solution because with this, you get access to everything that is being selected

[will-stone]

Excuse my ignorance but how is that achieved in my code (below). Essentially my goal is to log out the model after each change so I can store it in my (currently named) testConfig file.

import React, { Component } from 'react'

import * as SRD from 'storm-react-diagrams'

import modelJSON from './testConfig.json'

class Test extends Component {
  render() {
    let engine = new SRD.DiagramEngine()
    engine.registerNodeFactory(new SRD.DefaultNodeFactory())
    engine.registerLinkFactory(new SRD.DefaultLinkFactory())

    engine.registerInstanceFactory(new SRD.DefaultNodeInstanceFactory())
    engine.registerInstanceFactory(new SRD.DefaultPortInstanceFactory())
    engine.registerInstanceFactory(new SRD.LinkInstanceFactory())

    let model = new SRD.DiagramModel()
    model.deSerializeDiagram(modelJSON, engine)
    engine.setDiagramModel(model)

    /**
    * LISTEN FOR ALL MODEL CHANGES HERE
    */

    return (
        <SRD.DiagramWidget diagramEngine={engine} />
    )
  }
}

export default Test

Other JSX will be going in there, hence writing it this way (please don't judge me). It certainly would be easier (as I could adapt the documented events) if it were attached to model; I can imagine points and node moving would be something others may be interested in too.

[tiagobnobrega]

Aparently there is a problem defining wasMoved in DiagramWidget. It get passed to the stopFiringAction as false always.