react-diagrams icon indicating copy to clipboard operation
react-diagrams copied to clipboard

TypeScript issues on tsc check.

Open Letrab opened this issue 4 years ago • 2 comments

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} />;
};

Letrab avatar Aug 19 '19 07:08 Letrab

Bump, I'm having the same issue.

rkesters avatar Jun 28 '21 04:06 rkesters

This repo only supports typescript version ~3.7.2 and the latest is 4.7.4

Flowwl avatar Jul 26 '22 19:07 Flowwl