javascript - React-diagrams自定义节点窗口小部件未在engine.repaintCanvas（）上更新(React-diagrams custom node widget not updating on engine.repaintCanvas())

Question

I have copied the react-diagrams demo project and done some changes to the TSCustomNodeWidget.tsx, and when I call engine.repaintCanvas() it does not update the values I have set (whereas the name of the DefaultNodeModel does).

(我已经复制了react-diagrams演示项目，并对TSCustomNodeWidget.tsx进行了一些更改，当我调用engine.repaintCanvas（）时，它不会更新我设置的值（而DefaultNodeModel的名称会更新）。)

TSCustomNodeModel.ts

(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

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

TSCustomNodeWidget.tsx

(TSCustomNodeWidget.tsx)

import * as React from 'react';
import { DiagramEngine, PortWidget } from '@projectstorm/react-diagrams-core';
import { TSCustomNodeModel } from './TSCustomNodeModel';



export interface TSCustomNodeWidgetProps {
    node: TSCustomNodeModel;
    engine: DiagramEngine;
}

export interface TSCustomNodeWidgetState {}

export class TSCustomNodeWidget extends React.Component<TSCustomNodeWidgetProps, TSCustomNodeWidgetState> {
    constructor(props: TSCustomNodeWidgetProps) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="custom-node">
                <PortWidget engine={this.props.engine} port={this.props.node.getPort('IN')}>
                    <div className="circle-port" />
                </PortWidget>
                <PortWidget engine={this.props.engine} port={this.props.node.getPort('OUT')}>
                    <div className="circle-port" />
                </PortWidget>
                <div className="custom-node-color" 
                    style={{ backgroundColor: this.props.node.color }}>
                    {this.props.node.value}
                </div>
            </div>
        );
    }
}

App.tsx Setup

(App.tsx设定)

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

Adding the node with button (repaintCanvas works)

(使用按钮添加节点（repaintCanvas可以使用）)

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

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

        return node;
    }

Updating the node (repaintCanvas does not work)

(更新节点（repaintCanvas不起作用）)

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

  ask by Matija Martinec translate from so

Answer 1

等待大神答复