Question about factories vs DiagramModel assembling

[cattired]

Hi guys,

first of all thank you very much for your time and effort put into making this awesome library based on modern technologies. I'm trying to utilize it for a specific challenge I'm facing and it looks very promising. I'm a little confused about proper usage of factories / model creation and would appreciate if someone provides me some start aid.

I want to (later) customize elements appearance, so I created my factory for that.

export class OntologyNodeFactory extends AbstractReactFactory<OntologyNodeModel, DiagramEngine> {
    ontology: Ontology;

	constructor(ontology: Ontology) {
		super('ont-custom-node');
		this.ontology = ontology
	}

        generateModel(initialConfig: any) {
               return new ModelCreator(this.ontology).createModel();
        }

	generateReactWidget(event: any): JSX.Element {
		return <DefaultNodeWidget engine={this.engine} node={event.model} />;
	}
}

• ModelCreator class is responsible for traversing the data model and creating a custom node model.

export class ModelCreator {

    ontology: Ontology;

    constructor(ontology: Ontology) {
        this.ontology = ontology;
    }

    createModel(): OntologyNodeModel {
        let root = ModelCreator.createRootNode(this.ontology);
        let rootOut = root.getPort('out') as unknown as DefaultPortModel;

        Object.entries(this.ontology.properties).forEach(([key, value]) => {
            let node = ModelCreator.createNode(key, value.type.type);
            let portIn = node.getPort('in');
            rootOut.link<DefaultLinkModel>(portIn!);
            root.children.push(node)
        });
        return root;
    }

    static createRootNode(ontology: Ontology): OntologyNodeModel {
        return new OntologyNodeModel({
            name: ontology.title,
            color: 'rgb(0,192,255)',
        });
    }

    static createNode(property: string, type: string): OntologyNodeModel {
        return new OntologyNodeModel({
            name: property + ' (' + type + ')',
            color: 'rgb(0,192,255)',
        });
    }

}

What seems strange to me, however, is that now, my component which I expected to care about layout of nodes, needs to traverse the node model somehow in order to get all elements into DiagramModel. I even added a "children" element to my node model to make it easier (which is arguably robust) but it still looks like I'm doing things twice.

const AppDiagram: React.FC<Props> = (props: Props) => {

    const {ontology} = props;

    let factory = new OntologyNodeFactory(ontology);
    engine.getNodeFactories().registerFactory(factory);

    const root = factory.generateModel({});
    root.setPosition(100, 100);
    let rootOut = root.getPort('out') as DefaultPortModel;

    const model = new DiagramModel();
    model.addNode(root);

    root.children.forEach(childNode => {
        model.addNode(childNode);
        childNode.setPosition(random(1, 1000, false), random(1, 600, false));
        let portIn = childNode.getPort('in');
        let link = rootOut!.link<DefaultLinkModel>(portIn!);
        model.addLink(link);
    });

    engine.setModel(model);

    return (
        <OntologyCanvasWidget>
            <CanvasWidget engine={engine} />
        </OntologyCanvasWidget>
    )
};

I have a feeling I'm misinterpreting something. What is the factory method "generateModel" for - am I using it wrong?

Appreciate any hint, thanks!

[cattired]

Alright, probably I should simplify my question. Let's take the demo project.
TSCustomNodeFactory provides generateModel() method and main.tsx registers that factory. Still we do assemble the model in main.tsx. Why if there is a factory for that?

[renato-bohler]

I'm not sure if I can help with this one, but here it goes:

1. The model is assembled on main.tsx only as an example of programatically modifying the diagram content. You could use the factory to generate the model here aswell.

2. You need to implement and register the factory so that react-diagrams can recreate the correct model upon deserializing. It does this by looking at the type property on the serialized data and looking for a factory registered with this same type.

[cattired]

@renato-bohler thanks for your input, I will rethink. Just one more related question - serializing/deserializing is a feature? I mean it's not part of the react-diagrams core logic, that is, it is meant to be used in cases like e.g. when I need to persist both the data model and the layout - do I get it right? So if it's not my intention to persist the diagram I do not need to care about model recreation upon deserializing, is that correct?

[renato-bohler]

Hmm I'm not 100% sure if node factories are only used on deserialization... maybe you should try to not implement it and see what happens haha

[cattired]

will do =)