From 6bea69f395234f53286fee88fd936e4bba928b98 Mon Sep 17 00:00:00 2001
From: Aqib Mirza <aaron.smith@nninjatechnolabs.com>
Date: Thu, 20 Jul 2023 18:45:18 +0530
Subject: [PATCH] fix: margin padding for lottie

---
 .../comps/comps/jsonComp/jsonLottieComp.tsx   | 49 ++++++++++---------
 .../comps/controls/styleControlConstants.tsx  |  2 +
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 1eb4da69a..faf49602b 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -94,31 +94,36 @@ let JsonLottieTmpComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (
-      <div
-        style={{
-          height: "100%",
-          display: "flex",
-          justifyContent: "center",
-          backgroundColor: `${props.backgroundColor.background}`,
-        }}
-      >
-        <Player
-          key={
-            [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
-          }
-          keepLastFrame={props.keepLastFrame}
-          autoplay={props.animationStart === "auto" && true}
-          hover={props.animationStart === "on hover" && true}
-          loop={props.loop === "single" ? false : true}
-          speed={Number(props.speed)}
-          src={props.value}
+      <div style={{
+        padding: `${props.backgroundColor.margin}`,
+      }}>
+        <div
           style={{
             height: "100%",
-            width: "100%",
-            maxWidth: "100%",
-            maxHeight: "100%",
+            display: "flex",
+            justifyContent: "center",
+            backgroundColor: `${props.backgroundColor.background}`,
+            padding: `${props.backgroundColor.padding}`
           }}
-        />
+        >
+          <Player
+            key={
+              [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
+            }
+            keepLastFrame={props.keepLastFrame}
+            autoplay={props.animationStart === "auto" && true}
+            hover={props.animationStart === "on hover" && true}
+            loop={props.loop === "single" ? false : true}
+            speed={Number(props.speed)}
+            src={props.value}
+            style={{
+              height: "100%",
+              width: "100%",
+              maxWidth: "100%",
+              maxHeight: "100%",
+            }}
+          />
+        </div>
       </div>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 67b36bdef..c1485f300 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -878,6 +878,8 @@ export const LottieStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
+  MARGIN,	
+  PADDING,
 ] as const;
 /////////////////////