react-diagrams
react-diagrams copied to clipboard
TypeScript issues on tsc check.
Hi,
I am using the latest beta. But I get TypeScript issues when running tsc. Even with a simple example:
src/components/Graph.tsx:39:16 - error TS2345: Argument of type 'DefaultNodeModel' is not assignable to parameter of type 'BaseModel<BaseModelGenerics>'.
Types of property 'deserialize' are incompatible.
Type '(event: DeserializeEvent<DefaultNodeModel>) => void' is not assignable to type '(event: DeserializeEvent<BaseModel<BaseModelGenerics>>) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'DeserializeEvent<BaseModel<BaseModelGenerics>>' is not assignable to type 'DeserializeEvent<DefaultNodeModel>'.
Types of property 'engine' are incompatible.
Type 'import("/Users/bartel/git/test-electron-react/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-core/dist/@types/src/CanvasEngine").CanvasEngine<import("/Users/bartel/git/test-electron-react/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-co...' is not assignable to type 'import("/Users/bartel/git/test-electron-react/node_modules/@projectstorm/react-canvas-core/dist/@types/src/CanvasEngine").CanvasEngine<import("/Users/bartel/git/test-electron-react/node_modules/@projectstorm/react-canvas-core/dist/@types/src/CanvasEngine").CanvasEngineListener, import("/Users/bartel/git/test-electro...'.
Property 'model' is protected but type 'CanvasEngine<L, M>' is not a class derived from 'CanvasEngine<L, M>'.
39 model.addAll(node1, node2 , link);
~~~~~
src/components/Graph.tsx:42:54 - error TS2322: Type 'DiagramEngine' is not assignable to type 'CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>'.
Property 'model' is protected but type 'CanvasEngine<L, M>' is not a class derived from 'CanvasEngine<L, M>'.
42 return <CanvasWidget className="diagram-container" engine={engineL} />;
~~~~~~
node_modules/@projectstorm/react-canvas-core/dist/@types/src/entities/canvas/CanvasWidget.d.ts:4:5
4 engine: CanvasEngine;
~~~~~~
The expected type comes from property 'engine' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<CanvasWidget> & Readonly<DiagramProps> & Readonly<{ children?: ReactNode; }>'
Found 2 errors.
Same tsconfig as root repo.
With just a simple demo component:
import * as React from 'react';
import createEngine, {
DefaultLinkModel,
DefaultNodeModel,
DiagramModel
} from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import '../assets/css/Graph.css';
export default () => {
// create an instance of the engine with all the defaults
const engineL = createEngine();
// create a diagram model
let model = new DiagramModel();
// node 1
const node1 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)'
});
node1.setPosition(0, 0);
let port1 = node1.addOutPort('Out');
// node 2
const node2 = new DefaultNodeModel({
name: 'Node 2',
color: 'rgb(0,255,255)'
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort('in');
// link them and add a label to the link
const link = new DefaultLinkModel();
link.setSourcePort(node1.getPort('Out'));
link.setTargetPort(node2.getPort('in'));
link.addLabel('Hello World!');
model.addAll(node1, node2 , link);
engineL.setModel(model);
// 6) render the diagram!
return <CanvasWidget className="diagram-container" engine={engineL} />;
};
Bump, I'm having the same issue.
This repo only supports typescript version ~3.7.2 and the latest is 4.7.4