I’m trying to render my graph using a JSON file #2938
-
IntroductionHi, I have a question. In this repo, I’m trying to render my graph using a JSON file. When I manually create the elements with code and add them to the graph, the custom ElementViews work correctly — everything renders as expected and behaves properly. However, when I try to load the same elements from JSON and add them to the graph using graph.fromJSON() or graph.addCells(), the elements don't show up at all on the paper, and none of the ElementViews seem to be applied. Is there something I’m missing in order to make the views work properly when loading from JSON? Any help would be greatly appreciated! Steps to reproduceNo response Restrictions & ConstraintsNo response Does your question relate to JointJS or JointJS+. Select both if applicable.JointJS |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
There is no problem with views. Make sure you pass all arguments when overriding the initialize(...args) {
super.initialize(...args);
this.on("change:size", this.updatePortsOnResize, this);
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your response, but unfortunately it still doesn't work. Actually, it's not even specific to one element — none of the elements render properly when I add them from JSON. I think I’m starting to understand the issue a bit better though. In my scada.vue file, I’m using fetch to load the JSON data asynchronously. After fetching, I call the method that renders the graph using that JSON. But when I do it this way, the elements don’t appear correctly on the paper — even though the graph data seems fine. However, if I don’t use fetch and instead directly pass the JSON data into the rendering method (e.g., hardcoded or imported), everything works perfectly and all elements show up as expected. So it seems the problem might be related to timing or something about how/when the rendering is happening after fetch. Any thoughts or suggestions on how to fix this? |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me. Please create an example (or a commit) that does exactly what you describe. I had to make some other changes in your repo, because the JSON is invalid to begin with (contains invalid links). Also note, that |
Beta Was this translation helpful? Give feedback.
-
|
Hi again, I’ve been trying to load my graph from a JSON file and render it on the paper. However, when I load the graph via fetch() and use graph.fromJSON(json) to add the elements, none of the custom behaviors work, and the elements don't even appear properly. After investigating more deeply, I discovered that the issue is related to this line in my app: Here’s the relevant controller code: import PumpControl from "./PumpControl";
import SliderValveControl from "./SliderValveControl";
import ToggleValveControl from "./ToggleValveControl";
import ChartController from "./ChartBarController";
import ZoomController from "./ZoomController";
import MultiSelectController from "./MultiSelectController";
export default {
controllers: {
PumpControl,
SliderValveControl,
ToggleValveControl,
ChartController,
ZoomController,
MultiSelectController,
},
initControls: (paper) => {
const graph = paper.model;
MultiSelectController(paper, graph);
ZoomController(paper, document);
graph.getElements().forEach((cell) => {
switch (cell.get("type")) {
case "ControlValve":
SliderValveControl.add(cell.findView(paper), "root", "slider", {
name: cell.attr("label/text"),
});
break;
case "HandValve":
ToggleValveControl.add(cell.findView(paper), "root", "button");
break;
case "Pump":
PumpControl.add(cell.findView(paper), "root", "selection");
break;
case "ChartBar":
ChartController.add(cell.findView(paper), "root", "chartCanvas");
break;
}
});
},
};So it seems the controllers are initialized too early — before the elements from the JSON are added — and they never get applied to the newly added elements. 🔄 What I'm looking for: I’d like to know the best practice for binding controllers (or views/behaviors) to elements that are added after initControls() is called — for example when loading from a JSON file with fetch(). Is there a way to re-run the controller logic just for the new elements, or should I be calling initControls() again after loading? Any guidance would be much appreciated 🙏 Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, you should listen to graph.on('add', (cell) => {
switch (cell.get("type")) {
case "ControlValve":
SliderValveControl.add(cell.findView(paper), "root", "slider", {
name: cell.attr("label/text"),
});
break;
case "HandValve":
ToggleValveControl.add(cell.findView(paper), "root", "button");
break;
case "Pump":
PumpControl.add(cell.findView(paper), "root", "selection");
break;
case "ChartBar":
ChartController.add(cell.findView(paper), "root", "chartCanvas");
break;
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much — that completely solved my issue! |
Beta Was this translation helpful? Give feedback.
Yes, you should listen to
addandresetgraph events.