Hi Alec,
Thanks for replying!
This is the code that i have under App.vue, all these is testing code so the logic to load the data from my own db is not in yet.
<template>
<div id="app">
<svg
:width="width"
:height="height"
id="pointer_canvas"
style="position:absolute; top:0;"
></svg>
<ejs-diagram
id="diagram"
:width="width"
:height="height"
:nodes="graphData.nodes"
:connectors="graphData.connectors"
></ejs-diagram>
<presence-list
...
/>
<chat
...
/>
</div>
</template>
...
<script>
...
export default {
name: "app",
data() {
return {
...
graphData: {
nodes: [
{
id: "node1",
offsetY: 50,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "Start"
}
]
},
{
id: "node2",
offsetY: 140,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "var i = 0;"
}
]
},
{
id: "node3",
offsetY: 230,
shape: { type: "Flow", shape: "Decision" },
annotations: [
{
content: "i < 10?"
}
]
},
{
id: "node4",
offsetY: 320,
shape: { type: "Flow", shape: "PreDefinedProcess" },
annotations: [
{
content: 'print("Hello!!");',
style: { fill: "white" }
}
]
},
{
id: "node5",
offsetY: 410,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "i++;"
}
]
},
{
id: "node6",
offsetY: 500,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "End"
}
]
}
],
connectors: [
{
id: "connector1",
sourceID: "node1",
targetID: "node2"
},
{
id: "connector2",
sourceID: "node2",
targetID: "node3"
},
{
id: "connector3",
sourceID: "node3",
targetID: "node4",
annotations: [{ text: "Yes" }]
},
{
id: "connector4",
sourceID: "node3",
targetID: "node6",
labels: [{ text: "No" }],
segments: [
{ length: 30, direction: "Right" },
{ length: 300, direction: "Bottom" }
]
},
{
id: "connector5",
sourceID: "node4",
targetID: "node5"
},
{
id: "connector6",
sourceID: "node5",
targetID: "node3",
segments: [
{ length: 30, direction: "Left" },
{ length: 200, direction: "Top" }
]
}
]
},
...
};
},
</script
The component ejs-diagram takes in node and connectors to render the graph. graphdata will be passed to convergence domain controller to open/create the model in convergence.
_openModel(modelId, graphData) {
console.log("graphData", graphData);
return this._domain
.models()
.openAutoCreate({
id: modelId,
collection: "testcollection",
data: this.graphData
})
.then(model => {
// returns the realtime collaboration model, any edits should be done to this model
this._model = model;
});
}
So if i were to just pass in this.graphData, this is the error i get from the javascript console
So I suspect that the graphData is bloated with vue reactivity methods which causes this error.
To get the code to work. I pass in a parsed instance of the data to remove the bloat. So instead of
data: this.graphData
I used
data:JSON.parse(JSON.stringify(this.graphData))
So what came to my mind is that the realTimeModel that is returned by the domain object will not be in synced with the data used to render the graph.
Do let me know if I am being clear on the problem. Thanks!
