Vertical rule grow infinite !

[jonlepage]

I think the vertical rule have some bug ? it seem grow infinitely when is compute rendering! Horizontal work fine !

here preview gif code used in my projet look like this ps:i also try many css styles, without success.

const Camera = ({ children }) => {
    const pos = store({
        x: 0,
        y: 0,
    });
    return (
        <>
    <Box
            className='content'
            bgcolor='grey.700'
            display='flex'
            justifyContent='top'
            flexDirection='column'
            style={{ minWidth: '100%', width: 0, minHeight: '100%', height: 0 }}
        >
            <Box bgcolor='grey.200'>
                <div className='Ruler' style={{ width: '100%', height: '24px' }}>
                    <Ruler type='horizontal' scrollPos={pos.x} />
                </div>
            </Box>
            <Box
                className='content'
                bgcolor='grey.700'
                display='flex'
                justifyContent='top'
                flexDirection='row'
                flexGrow={1}
            >
                <Box m={0.5} display='flex' bgcolor='grey.200'>
                    <div className='Ruler' style={{ width: '28px' }}>
                        <Ruler type='vertical' scrollPos={pos.y} />
                    </div>
                </Box>
                <Box flexGrow={1} bgcolor='grey.200'>
                    <TransformWrapper
                        options={{
                            limitToBounds: true,
                            limitToWrapper: true,
                            minScale: 1,
                            maxScale: 2,
                        }}
                        onPanning={(e) => {
                            pos.x = e.positionX;
                            pos.y = e.positionY;
                        }}
                    >
                        <TransformComponent>
                            <div>Camera:</div>
                            <div>{children}</div>
                        </TransformComponent>
                    </TransformWrapper>
                </Box>
            </Box>
        </Box>
        </>
    );
};
export default view(Camera);

is this a know issue ? or if you want i can take time to make you a demo ? thanks again

[daybrush]

@djmisterjon

Can you show the other styles of canvas and the styles applied to the Ruler class?

[jonlepage]

do you mean the parent style ?

i think the issue start here with flex rules if i remove <Ruler type='vertical' scrollPos={pos.y} /> i get no more infinite grow.

All my styles are inline and show in the code upper, i doesn't add class yet for testing stuff before.

[daybrush]

@djmisterjon

I want know style of <div className="Ruler"> and Muibox-root-58

[jonlepage]

look fine for me

.MuiBox-root-58 {
    display: flex;
    background-color: rgb(238, 238, 238);
    margin: 4px;
}

if you dont know , I can make you a simple demo , if you give me ~30 min :)

[daybrush]

@djmisterjon

How about Muibox-root-58?

[daybrush]

@djmisterjon I would really appreciate it if you did. It does not reproduce well.

[jonlepage]

@djmisterjon I would really appreciate it if you did. It does not reproduce well.

ok here Drag the camera with mouse. https://codesandbox.io/s/sparkling-pond-s3wzq?file=/src/ruler.js the file app.js are not important.

Look in ruler.js , is where i create the FrontEnd skeleton for the app and embed the box with camera and your ruler. At line 34 you can see the issue, i also add you a comment. I hope is not my fault and waste your time :)

[jonlepage]

you can also click on this to debug in new window context , if is your first time on Codesandbox :) Also watch out , cache update with hot reload. it can give you false behavior. Better to reset page is you made change.

[daybrush]

@djmisterjon

Add

height: calc(100% - 24px);

to Muibox-root-18

[jonlepage]

ho !!! thanks for this solution, i would never think about it by myself. Work fine !!! Thank you so much for your precious time friend !