反应图不可见 [英] React-diagrams invisible

问题描述

按照 projectstorm/react-diagrams docs 中的安装指南进行操作>，我遇到图表无法正确渲染的问题.检查页面会显示节点的位置 - 但它们是不可见的.使用sass，我已经导入到app.scss<代码>@import "~storm-react-diagrams/src/sass/main";我也尝试过使用原始缩小的 css，但没有任何改进.

我仍然认为这是我的错误，可能是我在错误的地方创建了引擎?我有一个 engineReducer 来提供默认引擎.

import * as SRD from "storm-react-diagrams";//1) 设置图表引擎var engine = new SRD.DiagramEngine();engine.installDefaultFactories();//2) 设置图表模型var model = new SRD.DiagramModel();//3-A) 创建一个默认节点var node1 = new SRD.DefaultNodeModel("节点 1", "rgb(0,192,255)");让 port1 = node1.addOutPort("Out");node1.setPosition(100, 100);//3-B) 创建另一个默认节点var node2 = new SRD.DefaultNodeModel("节点 2", "rgb(192,255,0)");让 port2 = node2.addInPort("In");node2.setPosition(400, 100);//连接端口让 link1 = port1.link(port2);link1.addLabel("Hello World!");//4) 将模型添加到根图模型.addAll(节点1，节点2，链接1)；//5) 将模型加载到引擎中engine.setDiagramModel(模型);const initialEngine = 引擎；导出默认功能(状态=引擎，动作){返回状态；}

然后，我的主要组件如下所示:

import React, { Component } from 'react';从 'react-dom' 导入 ReactDOM；从storm-react-diagrams"导入 * 作为 SRD从'react-redux'导入{connect}；类 Main 扩展组件 {使成为() {console.log(this.props.engine);//看起来不错！返回 (<div className="app"><SRD.DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.engine}/>

);}}函数 mapStateToProps(state) {返回 { 引擎:state.engine };}导出默认连接(mapStateToProps)(主)

老实说，我不明白对

的文档参考<块引用>

在您的图书馆代码中

也就是说，我应该在哪里初始化引擎?我还缺少什么?

解决方案

您需要为小部件设置明确的高度.类似的东西:

.srd-demo-canvas {高度:100vh；}

Following the installation guide in projectstorm/react-diagrams docs, I have trouble with the diagram not rendering properly. Inspecting the page reveals the positions of the nodes - but they are invisible. Using sass, I have imported into app.scss @import "~storm-react-diagrams/src/sass/main"; I have also tried using the raw minified css with no improvement.

I still assume this is an error on my end, possibly I create the engine in the wrong place? I have a engineReducer to provide the default engine.

import * as SRD from "storm-react-diagrams";

//1) setup the diagram engine
var engine = new SRD.DiagramEngine();
engine.installDefaultFactories();

//2) setup the diagram model
var model = new SRD.DiagramModel();

//3-A) create a default node
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
let port1 = node1.addOutPort("Out");
node1.setPosition(100, 100);

//3-B) create another default node
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);

// link the ports
let link1 = port1.link(port2);
link1.addLabel("Hello World!");

//4) add the models to the root graph
model.addAll(node1, node2, link1);

//5) load model into engine
engine.setDiagramModel(model);

const initialEngine = engine;

export default function (state = engine, action) {        
    return state;
}

Then, my main component looks like this:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import * as SRD from "storm-react-diagrams"
import {connect} from 'react-redux';

class Main extends Component {

    render() {
        console.log(this.props.engine); // Looks good!        
        return (
            <div className="app">               
                <SRD.DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.engine} />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return { engine: state.engine };
  }

export default connect(mapStateToProps)(Main)

Quite honestly I dont understand the docs reference to

In your library code

that is, where should I initialize the engine? What else am I missing?

解决方案

You need to set a explicit height for the widget. Something like:

.srd-demo-canvas {
    height: 100vh;
}

这篇关于反应图不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！