Cant find a way to create custom modes in drag and drop compnent

[amrit981]

I am quite new in react diagram and I don't know how to run custom node.This is my code. TSCustomNodeFactory, TSCustomNodeModel are my custom node and model>please help creating custom node;

import * as SRD from '@projectstorm/react-diagrams'; import createEngine, { DefaultLinkModel, DiagramModel } from '@projectstorm/react-diagrams'; import { TSCustomNodeFactory } from './custom/TSCustomNodeFactory'; import { TSCustomNodeModel } from './custom/TSCustomNodeModel';

const engine = createEngine(); engine.getNodeFactories().registerFactory(new TSCustomNodeFactory());

export class Application { protected activeModel: SRD.DiagramModel; protected diagramEngine: SRD.DiagramEngine;

constructor() {
    this.diagramEngine = SRD.default();
    this.newModel();
}

public newModel() {
    this.activeModel = new SRD.DiagramModel();
    this.diagramEngine.setModel(this.activeModel);

    //3-A) create a default node
    var node1 = new SRD.DefaultNodeModel("A", 'rgb(0,192,255)');
    let port = node1.addOutPort('Out');
    node1.addOutPort('ABC');
    node1.setPosition(100, 100);

    //3-B) create another default node
    var node2 = new SRD.DefaultNodeModel('Node 2', 'rgb(192,255,0)');
    let port2 = node2.addInPort('In');
    node2.setPosition(400, 100);

    let node3 = new TSCustomNodeModel({ color: 'rgb(0,192,255)' });
    node3.setPosition(500, 100);

    let link3 = new DefaultLinkModel();
    link3.setSourcePort(node3.getPort('out'));

    // link the ports
    let link1 = port.link(port2);

    this.activeModel.addAll(node1, node2, link1, node3, link3);
}

public getActiveDiagram(): SRD.DiagramModel {
    return this.activeModel;
}

public getDiagramEngine(): SRD.DiagramEngine {
    return this.diagramEngine;
}