From 141d322ae223bd0bee4345b2e1a7a1f3cdc8330d Mon Sep 17 00:00:00 2001
From: vidhya-metacell <vidhya@metacell.us>
Date: Fri, 22 Jul 2022 17:09:37 +0200
Subject: [PATCH] #14 Merging Canvas and theme props to single object

---
 example/index.tsx |  7 ++++++-
 src/index.tsx     | 12 +++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/example/index.tsx b/example/index.tsx
index e555126..80e06e8 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -37,7 +37,12 @@ const App = () => {
 
     return (
         <div className={classes.main}>
-            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap} customThemeVariables={{}} canvasClassName={classes.canvasBG}/>
+            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap}
+                metaTheme={{
+                    customThemeVariables: {},
+                    canvasClassName: classes.canvasBG,
+                }}
+            />
         </div>
     );
 };
diff --git a/src/index.tsx b/src/index.tsx
index e406893..6baa67b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -33,7 +33,10 @@ interface MetaDiagramProps {
   componentsMap: ComponentsMap;
   wrapperClassName?: string;
   canvasClassName?: string;
-  customThemeVariables: object;
+  metaTheme: {
+    customThemeVariables: {};
+    canvasClassName: string;
+  };
 }
 
 const MetaDiagram = ({
@@ -41,8 +44,7 @@ const MetaDiagram = ({
   metaLinks,
   componentsMap,
   wrapperClassName,
-  canvasClassName,
-  customThemeVariables,
+  metaTheme,
 }: MetaDiagramProps) => {
   const classes = useStyles();
 
@@ -79,12 +81,12 @@ const MetaDiagram = ({
     : classes.container;
 
   return (
-    <ThemeProvider theme={createTheme(theme(customThemeVariables))}>
+    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>
       <CssBaseline />
       <Box className={containerClassName}>
         <Sidebar />
         <CanvasWidget
-          className={`${classes.canvasContainer} ${canvasClassName}`}
+          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}
           engine={engine}
         />
       </Box>