"Uncaught TypeError" occurred if calling the constructor with "options" object containing no "defaultStyles" property. #95
Description
Describe the bug
When calling the constructor of the Graph class while supplying the optional "options" object for configuration, an uncaught TypeError would occur if the options object did not contain the "defaultStyles" property.
This error is caused by accessing the "initialScale" and "initialPosition" properties without checking the existence of "defaultStyles" first.
To Reproduce
Steps to reproduce the behavior:
- Create a "index.html" as following:
<!DOCTYPE html>
<html>
<head>
<title>PCUI-graph testing</title>
<meta name="viewport" content="" />
<style>
body, html {
background-color: #364346;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "./node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "./node_modules/@playcanvas/pcui/dist/module/src/index.mjs",
"@playcanvas/pcui-graph": "./testing/pcui-graph/pcui-graph.mjs",
"@playcanvas/pcui/styles": "./node_modules/@playcanvas/pcui/styles/dist/index.mjs",
"@playcanvas/pcui-graph/styles": "./node_modules/@playcanvas/pcui-graph/styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module" src="pcui-graph.js"></script>
</body>
</html>- Create a "pcui-graph.js" as following, which is a slightly modified version of the "Getting Started" example code in the README.md:
import Graph from '@playcanvas/pcui-graph';
import '@playcanvas/pcui/styles';
import '@playcanvas/pcui-graph/styles';
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 graphData = {
nodes: {
1001: {
id: 1001,
nodeType: 0,
name: 'Hello',
posX: 50,
posY: 150
},
1002: {
id: 1002,
nodeType: 1,
name: 'World',
posX: 350,
posY: 150
}
},
edges: {
'1001-1002': {
edgeType: 0,
from: 1001,
to: 1002
}
}
}
const graph = new Graph(schema, {
initialData: graphData,
passiveUIEvents: false,
includeFonts: true
});
graph.dom.style.width = "100%";
graph.dom.style.height = "100%";
document.body.appendChild(graph.dom);- Start a local http server, and load the page using browser.
Expected behavior
The directed graph with a "Hello" node in red and a "World" node in green connected by a directional edge in blue should be shown, and there should be no error shown in the console.