From 1b9fd878a4b9c7941106963d64780fc817ebd958 Mon Sep 17 00:00:00 2001
From: jberg <jberg@users.noreply.github.com>
Date: Sun, 18 Aug 2019 12:46:59 -0700
Subject: [PATCH] handle Layout where we dont have background images or dont
 draw them (#862)

---
 modern/src/App.js               | 65 ++++++++++++++++++++++++++-------
 modern/src/runtime/GuiObject.js | 10 ++++-
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/modern/src/App.js b/modern/src/App.js
index b4264725..2bc44658 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -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}
diff --git a/modern/src/runtime/GuiObject.js b/modern/src/runtime/GuiObject.js
index 14fe410b..5121e76b 100644
--- a/modern/src/runtime/GuiObject.js
+++ b/modern/src/runtime/GuiObject.js
@@ -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) {