DefaultNodeModel

[lieyongchang]

Is it possible to add multiple name to the DefaultNodeModel constructor? as shown in IMG 1.1. The image is achieve using photoshop. (IMG 1.1)

[renato-bohler]

Hey!

Well, you cannot achieve that with the DefaultNode, but you can implement your own node, so you can have any properties/methods implemented on YourNodeModel and any components/styling on YourComponentWidget.

You can configure your own node on your project: take a look at this example on the storybook (link to story). You could make YourNodeModel extend DefaultNodeModel and add a subtitle property, or you could build it extending the more generic NodeModel and add a title and then a subtitle...

[lieyongchang]

so if I understand this correctly, it should be something like this?

import React, { Component } from "react";
import * as SRD from "storm-react-diagrams";

export class MyNodeModel extends Component {
 constructor(props) {
    super(props);
       return <SRD.DefaultNodeModel subtitle: string>

}
}

Sorry, I am still quite new to programming.

[renato-bohler]

Ooh :confused: if you are new to programming, I'm not sure if this is a good starting point, as this task may be a little bit too much in this case.

But anyways, there's three implementations you have to do when implementing a custom node:

• a Model (like DiamondNodeModel), on which you can implement custom methods or add custom properties for your node.
• a Widget (like DiamondNodeWidget), which is the visual representation of this node: you can access its corresponding Model instance (via node props, injected by the Factory) to call its methods or access its properties.
• a Factory (like DiamondNodeFactory): this is used by react-diagrams to instantiate the corresponding Model and Widget upon serialization (diagram loading).

Your subtitle would be a property on the Model, which could be received from the Factory and set on the Model's constructor, and then shown on your Widget.

My suggestion would be to start by copying the DiamondNode example and playing around with it.

[lieyongchang]

Understand! Thanks for being patient with me, and giving me the steps. Really appreciate it.