From ac31fb6801a8ce4a6a28670ac762dc8672865b71 Mon Sep 17 00:00:00 2001
From: jberg <jberg@users.noreply.github.com>
Date: Tue, 16 Jul 2019 18:47:26 -0700
Subject: [PATCH] fix button image rendering and handle layout without x/y
 (#812)

---
 experiments/modern/src/App.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/experiments/modern/src/App.js b/experiments/modern/src/App.js
index dace47d4..f39d7ff2 100644
--- a/experiments/modern/src/App.js
+++ b/experiments/modern/src/App.js
@@ -150,13 +150,20 @@ function Layer({ id, image, children, x, y }) {
     console.warn("Unable to find image to render. Rendering null", image);
     return null;
   }
+  const params = {};
+  if (x !== undefined) {
+    params.left = Number(x);
+  }
+  if (y !== undefined) {
+    params.top = Number(y);
+  }
   return (
     <>
       <img
         data-node-type="Layer"
         data-node-id={id}
         src={img.imgUrl}
-        style={{ position: "absolute", top: Number(y), left: Number(x) }}
+        style={Object.assign({ position: "absolute" }, params)}
       />
       {children}
     </>
@@ -166,7 +173,7 @@ function Layer({ id, image, children, x, y }) {
 function Button({ id, image, action, x, y, downImage, tooltip, children }) {
   const data = React.useContext(SkinContext);
   const [down, setDown] = React.useState(false);
-  const imgId = down ? downImage : image;
+  const imgId = down && downImage ? downImage : image;
   if (imgId == null) {
     console.warn("Got a Button without a imgId. Rendering null", id);
     return null;
@@ -195,7 +202,7 @@ function Button({ id, image, action, x, y, downImage, tooltip, children }) {
         top: Number(y),
         left: Number(x),
         backgroundPositionX: -Number(img.x),
-        backgroundPositionx: -Number(img.y),
+        backgroundPositionY: -Number(img.y),
         width: Number(img.w),
         height: Number(img.h),
         backgroundImage: `url(${img.imgUrl})`,