I'm trying to make mxGraph responsive and so far I have tweaked the vertexes to have dynamic width based on container size, roughly like the snippet below.
graph.getModel().beginUpdate();
try {
var containerWidth = container.clientWidth;
var itemWidth = 0.1 * containerWidth;
var itemHeight = 40;
var distanceWidth = itemWidth + (0.018 * containerWidth);
var v1 = graph.insertVertex(parent, null, 'Item A', 0, distanceHeight, itemWidth, itemHeight,'vertexStyle');
var v2 = graph.insertVertex(parent, null, 'Item B', distanceWidth, distanceHeight, itemWidth, itemHeight,'vertexStyle');
}
finally {
graph.getModel().endUpdate();
}
This works except it needs to be refreshed upon resizing of window. I'm guessing I will need to use mxEvent to listen to the resizing of the window. However, I can't quite figure out how to do that. Has anyone done anything similar before? Any hint or guidance would be appreciated. Thanks!