handle Layout where we dont have background images or dont draw them (#862)

This commit is contained in:
jberg 2019-08-18 12:46:59 -07:00 committed by Jordan Eldredge
parent 9b21ed4d6b
commit 1b9fd878a4
2 changed files with 59 additions and 16 deletions

View file

@ -140,6 +140,10 @@ function Layout({
background,
desktopalpha,
drawBackground,
x,
y,
w,
h,
minimum_h,
maximum_h,
minimum_w,
@ -147,33 +151,66 @@ function Layout({
droptarget,
children,
}) {
if (background == null) {
if (drawBackground && background == null) {
console.warn("Got a Layout without a background. Rendering null", id);
return null;
}
const image = node.js_imageLookup(background);
if (image == null) {
console.warn("Unable to find image to render. Rendering null", background);
return null;
if (drawBackground) {
const image = node.js_imageLookup(background);
if (image == null) {
console.warn(
"Unable to find image to render. Rendering null",
background
);
return null;
}
return (
<div
data-node-type="layout"
data-node-id={id}
src={image.imgUrl}
draggable={false}
style={{
backgroundImage: `url(${image.imgUrl})`,
width: image.w,
height: image.h,
// TODO: This combo of height/minHeight ect is a bit odd. How should we combine these?
minWidth: minimum_w == null ? null : Number(minimum_w),
minHeight: minimum_h == null ? null : Number(minimum_h),
maxWidth: maximum_w == null ? null : Number(maximum_w),
maxHeight: maximum_h == null ? null : Number(maximum_h),
position: "absolute",
}}
>
{children}
</div>
);
}
const params = {};
if (x !== undefined) {
params.left = Number(x);
}
if (y !== undefined) {
params.top = Number(y);
}
if (w !== undefined) {
params.width = Number(w);
}
if (h !== undefined) {
params.height = Number(h);
}
return (
<div
data-node-type="layout"
data-node-id={id}
src={image.imgUrl}
draggable={false}
style={{
backgroundImage: `url(${image.imgUrl})`,
width: image.w,
height: image.h,
// TODO: This combo of height/minHeight ect is a bit odd. How should we combine these?
minWidth: minimum_w == null ? null : Number(minimum_w),
minHeight: minimum_h == null ? null : Number(minimum_h),
maxWidth: maximum_w == null ? null : Number(maximum_w),
maxHeight: maximum_h == null ? null : Number(maximum_h),
position: "absolute",
...params,
}}
>
{children}

View file

@ -61,11 +61,17 @@ class GuiObject extends MakiObject {
}
getheight() {
return Number(this.attributes.h) || 0;
// TODO
// I don't know how it gets calculated exactly, but if a node has a minimum
// and maximum h, but no h, getwidth still returns a value, return min for now
return Number(this.attributes.h) || Number(this.attributes.minimum_h) || 0;
}
getwidth() {
return Number(this.attributes.w) || 0;
// TODO
// I don't know how it gets calculated exactly, but if a node has a minimum
// and maximum w, but no w, getwidth still returns a value, return min for now
return Number(this.attributes.w) || Number(this.attributes.minimum_w) || 0;
}
resize(x, y, w, h) {