You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I don't know if the headline is specific enough to fit the question, but I currently have an edge-case where I am manually resizing RGL element on the canvas through JavaScript inline styling.
The reason why I "have to do this" is because I am using another library for Scada Designing, and upon saving that design, I crop the canvas of that designer to fit the content created, then loading the cropped content inside an RGL item and then resizing that item to fit its content (because the RGL item has defined grid width and height that might not fit the size of the scada design).
I have the element visually represented on the canvas in its correct dimensions. However, the problem is now that it still retains its original grid properties, which means the new size of the element does not correspond with how RGL interprets the item. I therefore believe I need to convert my pixel dimensions into RGL grid dimensions and update the layout, using these grid values. I know I will never get a perfect pixel to grid ratio, but getting as close as possible will be enough. Just so that the backdrop animation, collisions etc. behaves in a more precise manner.
This is where I am stuck, currently. How do I go about calculating the pixel to grid unit ratio?
My component is the <ResponsiveReactGridLayout>.
The RGL canvas width will be 1534px on a 1920px monitor.
the current RGL settings (props) is:
-cols=48
-rowHeight=15
-margin=[15, 15]
-containerPadding=[15, 20]
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I don't know if the headline is specific enough to fit the question, but I currently have an edge-case where I am manually resizing RGL element on the canvas through JavaScript inline styling.
The reason why I "have to do this" is because I am using another library for Scada Designing, and upon saving that design, I crop the canvas of that designer to fit the content created, then loading the cropped content inside an RGL item and then resizing that item to fit its content (because the RGL item has defined grid width and height that might not fit the size of the scada design).
I have the element visually represented on the canvas in its correct dimensions. However, the problem is now that it still retains its original grid properties, which means the new size of the element does not correspond with how RGL interprets the item. I therefore believe I need to convert my pixel dimensions into RGL grid dimensions and update the layout, using these grid values. I know I will never get a perfect pixel to grid ratio, but getting as close as possible will be enough. Just so that the backdrop animation, collisions etc. behaves in a more precise manner.
This is where I am stuck, currently. How do I go about calculating the pixel to grid unit ratio?
My component is the
<ResponsiveReactGridLayout>
.The RGL canvas width will be 1534px on a 1920px monitor.
the current RGL settings (props) is:
-cols=48
-rowHeight=15
-margin=[15, 15]
-containerPadding=[15, 20]
Thanks in advance.
Beta Was this translation helpful? Give feedback.
All reactions