#14 Merging Canvas and theme props to single object

MetaCell · Jul 22, 2022 · 141d322 · 141d322
1 parent 29e4ff9
commit 141d322
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -33,16 +33,18 @@ interface MetaDiagramProps {
   componentsMap: ComponentsMap;
   wrapperClassName?: string;
   canvasClassName?: string;
-  customThemeVariables: object;
+  metaTheme: {
+    customThemeVariables: {};
+    canvasClassName: string;
+  };
 }
 
 const MetaDiagram = ({
   metaNodes,
   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>