Adding cutom layer for multiple nodes

[si-gaurav]

Hi

I want to make multiple layers having multiple nodes with conections, want to add different colors for every layers, Can you please help me how can we customize the layer.

Code for reference

SILayerModel.ts import { NodeLayerModel } from '@projectstorm/react-diagrams-core';

export class SILayerModel extends NodeLayerModel { constructor() { super(); } }

SILayerModelFactory.tsx

export class SILayerModelFactory extends AbstractReactFactory<SILayerModel, DiagramEngine> { constructor() { super('diagram-nodes'); } generateModel() { return new SILayerModel(); } generateReactWidget(event: any): JSX.Element { return <SILayerModelWidget layer={event.model} engine={event.engine} />; } }

SILayerModelWidget.tsx

import { SILayerModel } from './SILayerModel'; import { DiagramEngine, NodeLayerWidget } from '@projectstorm/react-diagrams-core';

export interface NodeLayerWidgetProps { layer: SILayerModel; engine: DiagramEngine; } export class SILayerModelWidget extends React.Component<NodeLayerWidgetProps> { render() { return ( <div style={{ backgroundColor: 'black' }}> <NodeLayerWidget engine={this.props.engine} layer={this.props.layer} /> ); } }

Getting error when registering the factory

engine.getLayerFactories().registerFactory(new SILayerModelFactory());

Below is the error getting while registering

Argument of type 'SILayerModelFactory' is not assignable to parameter of type 'AbstractReactFactory<LayerModel<LayerModelGenerics>, CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>>'.  The types returned by 'generateModel(...).getChildModelFactoryBank(...)' are incompatible between these types.    Type 'FactoryBank<AbstractReactFactory<NodeModel<NodeModelGenerics>, DiagramEngine>, FactoryBankListener<AbstractReactFactory<NodeModel<NodeModelGenerics>, DiagramEngine>>>' is not assignable to type 'FactoryBank<AbstractModelFactory<BaseModel<BaseModelGenerics>, CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>>, FactoryBankListener<...>>'.      Type 'FactoryBankListener<AbstractReactFactory<NodeModel<NodeModelGenerics>, DiagramEngine>>' is not assignable to type 'FactoryBankListener<AbstractModelFactory<BaseModel<BaseModelGenerics>, CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>>>'.        Property 'generateReactWidget' is missing in type 'AbstractModelFactory<BaseModel<BaseModelGenerics>, CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>>' but required in type 'AbstractReactFactory<NodeModel<NodeModelGenerics>, DiagramEngine>'.ts(2345)

[yuliolinares]

Hi, I have the same problem as you, did you find a solution, Thank you