Renders as zero width

[AndrewRayCode]

When I render a graph following the readme, and put the graph in a dom node with a set width and height, the graph is rendered with 0 width and height:

<div style="width: 600px; height: 600px;">
<div class="pcui-element font-regular pcui-graph joint-paper joint-theme-default" style="background-color: rgb(32, 41, 43); width: 0px; height: 0px;">
...
</div>
</div>

If I manually expand the graph size manually in the chrome inspector, it shows the grid with mouse interactivity, however neither of the two nodes show up in the graph that i can find.

I'm doing this in React, but react isn't doing anything here, I'm following the readme:

useEffect(() => {
    const schema = {
      nodes: {
        0: {
          name: 'Hello',
          fill: 'red',
        },
        1: {
          name: 'World',
          fill: 'green',
        },
      },
      edges: {
        0: {
          from: [0], // this edge can connect nodes of type 0
          to: [1], // to nodes of type 1,
          stroke: 'blue',
        },
      },
    };

    const graph = new PcGraph(schema);
    if (graphRef.current) {
      graphRef.current.appendChild(graph.dom);
    }
  }, [graphRef]);

[josephrocca]

For the benefit of others who also have this issue, I solved it by just setting the width and height of graph.dom.style to 100%.

Working demo: https://jsbin.com/mowewemaxe/edit?html,output

Code of the above demo:

<style>
  html, body { margin:0px; padding:0px; width:100%; height:100%; } 
</style>

<script type="module">
  import Graph from 'https://esm.sh/@playcanvas/[email protected]?bundle';
  import 'https://esm.sh/@playcanvas/[email protected]/styles?bundle';
  import 'https://esm.sh/@playcanvas/[email protected]/styles?bundle';

  const names = {
      nodes: {
          HELLO: 0,
          WORLD: 1,
      },
      edges: {
          HELLO_TO_WORLD: 0,
      }
  };

  let graphSchema = {
      nodes: {
          [names.nodes.HELLO]: {
              name: 'Hello',
              outPorts: [
                  {
                      name: 'output',
                      type: names.edges.HELLO_TO_WORLD
                  }
              ]
          },
          [names.nodes.WORLD]: {
              name: 'World',
              inPorts: [
                  {
                      name: 'input',
                      type: names.edges.HELLO_TO_WORLD
                  }
              ]
          }
      },
      edges: {
          [names.edges.HELLO_TO_WORLD]: {
              from: names.nodes.HELLO,
              to: names.nodes.WORLD,
          }
      }
  };

  let graphData = {
      nodes: {
          1234: {
              id: 1234,
              nodeType: names.nodes.HELLO,
              name: 'Hello',
              posX: 200,
              posY: 200
          },
          1235: {
              id: 1235,
              nodeType: names.nodes.WORLD,
              name: 'World',
              posX: 500,
              posY: 200
          },
      },
      edges: {
          '1234,0-1235,0': {
              edgeType: names.edges.HELLO_TO_WORLD,
              from: 1234,
              to: 1235,
              inPort: 0,
              outPort: 0,
          }
      }
  };
  
  let graphOptions = {
    initialData: graphData,
    passiveUIEvents: false,
    includeFonts: true,
    defaultStyles: {
      edge: {
        connectionStyle: 'smoothInOut'
      },
      background: {
        color: '#20292B',
        gridSize: 10
      },
    }
  };

  let graph = new Graph(graphSchema, graphOptions);
  
  // this (or some other change) is needed otherwise the graph has zero width and height
  graph.dom.style.width = "100%";
  graph.dom.style.height = "100%";

  window.addEventListener("resize", function() {
    graph.width = window.innerWidth;
    graph.height = window.innerHeight;
  });
  
  document.body.appendChild(graph.dom);
</script>