反应图不可见

时间:2018-03-27 12:49:49

标签: reactjs redux

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

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

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

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

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)

老实说,我不明白文档引用

  

在你的图书馆代码中

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

4 个答案:

答案 0 :(得分:5)

您需要为窗口小部件设置显式高度。类似的东西:

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

答案 1 :(得分:1)

我尝试按照建议的修复方法进行操作,但对我没有任何帮助。

真正解决了节点和元素显示不正确的问题的原因。

我删除了the storm-react-diagrams/dist/style.min.css

的导入

相反,我创建了一个自定义CSS文件,它是上面的文件,并进行了以下修改(您可以在"node_modules/storm-react-diagrams/dist/" style.min.css 下找到它):

.srd-diagram{position:unset;flex-grow:1;display:flex;cursor:move;overflow:visible}

(位置未设置,溢出到可见位置)

.srd-link-layer{position:unset; ...}

(要设置的位置)

答案 2 :(得分:0)

.srd-demo-canvas {
    height: 100vh;
    background-color: rgb(60,60,60)
}

除了设置高度以外,还设置背景颜色有助于我查看Chrome默认为我提供的白色背景上的链接。

如果要演示显示的网格,请安装sass并:

.srd-demo-canvas{
  height: 100%;
  min-height: 300px;
  background-color: rgb(60,60,60) !important;
  $color: rgba(white, .05);
  background-image:
    linear-gradient(0deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent),
    linear-gradient(90deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent);
  background-size:50px 50px;

  .pointui{
    fill: rgba(white,0.5);
  }

}

答案 3 :(得分:-1)

大家好,我已经决定使用ReactJs开始我自己的流程图打开项目,但是如果需要,您可以将其改编为纯JavaScript,请随时贡献。

enter image description here https://github.com/lmoraobando/lmDiagram