mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 19:13:54 +00:00
handle Layout where we dont have background images or dont draw them (#862)
This commit is contained in:
parent
9b21ed4d6b
commit
1b9fd878a4
2 changed files with 59 additions and 16 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue