Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-diagrams invisible

Tags:

reactjs

redux

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?

like image 888
ajthinking Avatar asked Mar 27 '18 12:03

ajthinking


3 Answers

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

.srd-demo-canvas {
    height: 100vh;
}
like image 150
ajthinking Avatar answered Nov 12 '22 05:11

ajthinking


I tried following the suggested fixes but nothing worked for me.

Here's what really fixed the issue for both the nodes and the elements not showing properly.

I removed the importing of the storm-react-diagrams/dist/style.min.css

and instead, I created a custom CSS file which is the above file with the following modifications (You can find it under "node_modules/storm-react-diagrams/dist/" style.min.css):

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

(position to unset and overflow to visible)

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

(position to unset)

like image 26
Waelmas Avatar answered Nov 12 '22 05:11

Waelmas


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

Setting the background-color in addition to the height helped me see the links against the white background that Chrome gave me by default.

If you want the grid that the demos show, then install sass and:

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

}
like image 1
safe_malloc Avatar answered Nov 12 '22 05:11

safe_malloc