Since I oriented my code on this sandbox I have the exact same problem. The heatmap will only get rendered on the first rendered part of the bpmn-viewer, meaning it depends on the scale of the monitor if/where the heatmap will be cutted. Even when I hard-force my code to first do “fit-viewport” and then plot the heatmap it won’t work.
I tried to solve this problem for the last 8 days and could not figure it out…please help.
This looks like a problem with your configuration of heatmap-js, as it works fine for me when opening it in a new window:
My guess is that you use some relative measurements of the window to render the heatmap, which fails in small screens.
It looks like your question is not related to our project or one of our toolkits. For questions regarding other tools please refer to their respective communication channels.
Please provide more context if you are certain this is the right place to get an answer and we may be able to help you.
Do you know how I implement this with the relative measurements?
My guess is that when passing the BPMNViewer object, only the original size is passed, even if you do fit-viewport. Thats why I think I’m right in this Forum.
Its correct that the problem in the sandbox depends on smaller screens. But as soon as you want to view large BPMNs, its no longer a problem only for small screens, then a screen cant be large enough to avoid the problem, so I need a solution.
You’ll need to help me with some heatmap-js internals here, as I have not used it before. Where do you initialize it and with what size? What data are you feeding in?
Just from my understanding, you want to initialize heatmap independent of the zoom level, normalize your data to fit the heatmap canvas size and then stretch/shrink the resulting image to fit the diagram.
It looks like you are currently feeding in data that will be rendered outside of the canvas.
Okay so since I’m not the biggest Pro either and I just ordiented on the sandbox I cant go very much into detail.
So the heatmap Instance gets initialised on line 43 to 46 and since you set the container there he orients the size of the heatmap-container on the size of the .djs-container (Documentation: heatmap.js Documentation (patrick-wied.at))
After he fitted the container to .djs-container the size of the heatmap is fixed and it just moves with the transformation matrix of the BPMN Viewer. But everytime I try to use another container like viewport or something that has the full size of the BPMN the heatmap is gone.
Back to the code: in lines 49ff. the datapoints of the heatmap are set with the variable data. Min and Max are for the coloring of the heatmap like the max could be 100 so you can make the values of your data with percentages. For more context of the sandbox code: the data is set in lines 28ff. Here there are more datapoints set for each BPMN Element oriented on the shape of the element.
So the goal would be (in the example of the sandbox) that even on small screens the heatmap will be rendered on every element. Even when the element is outside of the canvas at the beginning
Thanks that you want to help and sorry for my english
So the problem is that you create the heatmap on the container and then scale it down. The example data in your sandbox has a maximum x value of 1122. So your container needs to be 1122px + radius wide or it will not be properly rendered.
As far as I can see, you can fix it in 2 ways:
Ensure the container is wide enough, e.g. by manually creating a container instead of using the djs-parent
scale the data to fit within the viewport. So if your Container is, for example, only 500px wide, you need to scale all values by a factor of 500/(1122 + radius). As the heatmap has another scale than the diagram-js canvas in that case, you would need to account for that in your transformation function as well.
@Martin I tried fixing it with all I know in Javascript, it wont work out…it would be great if you try to fix the code in the sandbox with your approaches and if there is a way it works you can send the code to me so I can try to use it in my project.
I’m at the end of my knowledge
as I previously said, this is not a problem with bpmn-io library, but with the usage of HeatmapJS. Please refer to their respective communication channels to receive support for these libraries.
We are happy to assist with any questions or problems you have that are related to our libraries.
Okay, Ithought its a problem of BPMN but maybe you’re right, thanks @Martin for the help then.
Let me just try to tag the creator of the Sandbox and see if he can tell me how he solved his issue. @kickbuttowski maybe you get a notification email and come back to the forum.
I need your help
You can write me on Twitter/X too. (Nicho_Link is my name there too)
