Rich-Harris/svelte-cubed

Canvas.svelte Width and Height properties are being ignored.

DanChristos opened this issue · 1 comments

In the code for components/Canvas.svelte the exported properties width and height, if not provided, are being set during resize to the container's width and height:

const resize = () => {
if (width === undefined) {
	_width = container.clientWidth / pixelRatio;
}

if (height === undefined) {
	_height = container.clientHeight / pixelRatio;
}
};

And if provided are used to set the size of the renderer:

const w = width !== undefined ? width : _width;
const h = height !== undefined ? height : _height;

root.renderer.setSize(w, h, false);

But all of this is superseded by setting the position to absolute and both the width and the height to 100% on both the container and the canvas:

<style>
	.container,
	canvas {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
</style>

Why are you setting the position of these elements to absolute?
Perhaps you could conditionally set the css if width && height are both undefined.
Or expose the canvas so we can style it how we like.

Are you using Tailwind CSS? There is a conflict with the container class, see:

#43
#60