Question about factories vs DiagramModel assembling

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]

will do =)

[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