React-diagrams: Node renaming

[will-stone]

Hi. Is there a way to introduce some form of node renaming? e.g. double-click a node changes the name to an input which when saved updates the model.
This is quite a common feature of diagram builders and it'd be great to see a demo of this. I have quite a large diagram to build and this would certainly help.

[dylanvorster]

Well I think the first step would be to learn how MVC works. This library in all of its examples and code, makes heavy use of Models which are then passed into factories (controllers) which then return a view (React widgets). It should then go without saying that you should:

create your own widgets for your own models, that when double clicked, change a model property which then calls the repaint method on the engine. I noticed in some of your example code you pasted, that you were storing your models and engines inside a react component. This is a bad practice because you should really store data in a store or make use of reducers etc..

[will-stone]

Hmmm... ok, yes I could store it in my Redux store and access it from there. I'll give that a go. With the new found knowledge of repaintCanvas (please, please, please, document the available methods), I have found a way to start off. I know directly manipulating props is VERY bad so will try the store approach now.

import * as React from 'react'

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

export class BoxNodeWidget extends React.Component {
  static defaultProps = {
    node: null
  }

  renameNode(id, name) {
    // Set new name
    this.props.diagramEngine.diagramModel.nodes[id].name = name
    // Rerender diagram
    this.props.diagramEngine.repaintCanvas()
  }

  render() {
    return (
      <div
        className="box-node"
        style={{
          position: 'relative',
          backgroundColor: 'silver'
        }}
        onDoubleClick={() =>
          this.renameNode(this.props.node.id, 'test new name')}
      >
...

[dylanvorster]

Okay so you would actually write it like this: (u can modify the prop, there is nothing wrong with doing so, because repaint will cause this to be repainted anyways.)

The whole point of this library is that you should modify the models directly, you don't have to go through the diagram engine.

import * as React from 'react'

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

export class BoxNodeWidget extends React.Component {
  static defaultProps = {
    node: null
  }
  render() {
    return (
      <div
        className="box-node"
        style={{
          position: 'relative',
          backgroundColor: 'silver'
        }}
        onDoubleClick={() =>
         this.props.node.name = "test";
         this.props.diagramEngine.repaintCanvas()
      >
...

[will-stone]

Cool, thanks. This feels like two-way binding which is why I thought it was frowned upon.

[JeremyRubin]

Just commenting here for future searchers:

you can register a listener inside of the Widget for events from the model, and update view on that basis without requiring a whole repaint.

[Massetho]

you can register a listener inside of the Widget for events from the model, and update view on that basis without requiring a whole repaint.

If you could give a bit more details about how to do that, it would be very useful ! Thanks.