projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Adding cutom layer for multiple nodes #822

Open si-gaurav opened 3 years ago

si-gaurav commented 3 years ago

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.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 { render() { return ( <div style={{ backgroundColor: 'black' }}>

                                                </div>
                                                        );
             }
    }

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, CanvasEngine<CanvasEngineListener, CanvasModel>>'.  The types returned by 'generateModel(...).getChildModelFactoryBank(...)' are incompatible between these types.    Type 'FactoryBank<AbstractReactFactory<NodeModel, DiagramEngine>, FactoryBankListener<AbstractReactFactory<NodeModel, DiagramEngine>>>' is not assignable to type 'FactoryBank<AbstractModelFactory<BaseModel, CanvasEngine<CanvasEngineListener, CanvasModel>>, FactoryBankListener<...>>'.      Type 'FactoryBankListener<AbstractReactFactory<NodeModel, DiagramEngine>>' is not assignable to type 'FactoryBankListener<AbstractModelFactory<BaseModel, CanvasEngine<CanvasEngineListener, CanvasModel>>>'.        Property 'generateReactWidget' is missing in type 'AbstractModelFactory<BaseModel, CanvasEngine<CanvasEngineListener, CanvasModel>>' but required in type 'AbstractReactFactory<NodeModel, DiagramEngine>'.ts(2345)

yuliolinares commented 2 years ago

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