Javascript React diagrams自定义节点小部件未在engine.repaintCanvas（）上更新

我复制了react diagrams演示项目，并对TSCustomNodeWidget.tsx做了一些更改，当我调用engine.RepainCanvas（）时，它不会更新我设置的值（而DefaultNodeModel的名称会更新）

TSCustomNodeModel.ts

import { NodeModel, DefaultPortModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
import { BaseModelOptions } from '@projectstorm/react-canvas-core';

export interface TSCustomNodeModelOptions extends BaseModelOptions {
    color?: string;
    value?: number;
    name?: string;
}

export class TSCustomNodeModel extends DefaultNodeModel {
    color: string;
    name: string;
    value: number;

    constructor(options: TSCustomNodeModelOptions = {}) {
        super({
            ...options,
            type: 'ts-custom-node'
        });
        this.color = options.color || 'red';
        this.value = options.value || 0;
        this.name = options.name || 'name';

        // setup an in and out port
        this.addPort(
            new DefaultPortModel({
                in: true,
                name: 'IN'
            })
        );
        this.addPort(
            new DefaultPortModel({
                in: false,
                name: 'OUT'
            })
        );
    }

    serialize() {
        return {
            ...super.serialize(),
            color: this.color
        };
    }

    deserialize(event:any): void {
        super.deserialize(event);
        this.color = event.data.color;
    }
}

TSCustomNodeFactory.tsx

import * as React from 'react';
import { TSCustomNodeModel } from './TSCustomNodeModel';
import { TSCustomNodeWidget } from './TSCustomNodeWidget';
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
import { DiagramEngine } from '@projectstorm/react-diagrams-core';

export class TSCustomNodeFactory extends AbstractReactFactory<TSCustomNodeModel, DiagramEngine> {
    constructor() {
        super('ts-custom-node');
    }

    generateModel(initialConfig:any) {
        return new TSCustomNodeModel();
    }

    generateReactWidget(event:any): JSX.Element {
        return <TSCustomNodeWidget engine={this.engine as DiagramEngine} node={event.model} />;
    }
}

使用按钮添加节点（重新绘制画布工作）

更新节点（重新绘制画布不起作用）

---

我遇到了一个类似的问题，即更改节点不会立即更新画布，我通过强制react组件重新渲染来解决这个问题：

function useForceUpdate(){
    const [, setValue] = useState(0);
    return () => setValue(value => ++value);
}

const MyComponent = () => {
    const forceUpdate = useForceUpdate();

    // do some update to diagram
    ...
    forceUpdate();
};

不记得我是否也必须调用engine.RepainCanvas（）

晚会有点晚了，但希望这能有所帮助

    // create an instance of the engine with all the defaults
    const engine = createEngine();

    const state = engine.getStateMachine().getCurrentState();
    if (state instanceof DefaultDiagramState) {
        state.dragNewLink.config.allowLooseLinks = false;
    }

    const model = new DiagramModel();
    engine.getNodeFactories().registerFactory(new TSCustomNodeFactory());

    model.setGridSize(5);
    engine.setModel(model);

    function addConstNode() {
        const node = new TSCustomNodeModel({
            name: "CONST",
            value: 0
        });
        node.setPosition(50, 50);

        model.addAll(node);
        engine.repaintCanvas();   //This works

        return node;
    }

currentNode.value = value;
...
engine.repaintCanvas();

function useForceUpdate(){
    const [, setValue] = useState(0);
    return () => setValue(value => ++value);
}

const MyComponent = () => {
    const forceUpdate = useForceUpdate();

    // do some update to diagram
    ...
    forceUpdate();
};