Merge pull request #15 from MetaCell/feature/13

Feature/13, 14 - Add theme to meta-diagram, fix the example to use the same.

example/index.tsx

@@ -5,13 +5,17 @@ import MetaDiagram, {MetaNode, Position, ComponentsMap, MetaLink} from "./..";
 import {CustomNodeWidget} from "./components/widgets/CustomNodeWidget";
 import {makeStyles} from "@material-ui/core";
 import CustomLinkWidget from "./components/widgets/CustomLinkWidget";
+import BG from "./components/assets/svg/bg-dotted.svg";
 
 const useStyles = makeStyles(_ => ({
     main: {
         position: 'absolute',
         height: '100%',
         width: '100%',
     },
+    canvasBG: {
+        backgroundImage: `url(${BG})`
+    }
 }))
 
 const App = () => {
@@ -33,7 +37,12 @@ const App = () => {
 
     return (
         <div className={classes.main}>
-            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap} />
+            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap}
+                metaTheme={{
+                    customThemeVariables: {},
+                    canvasClassName: classes.canvasBG,
+                }}
+            />
         </div>
     );
 };

src/index.tsx

@@ -10,6 +10,10 @@ import { MetaNodeModel } from './react-diagrams/MetaNodeModel';
 import { getLinkModel } from './helpers/linksHelper';
 import { makeStyles } from '@mui/styles';
 import Sidebar from './components/Sidebar';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from './theme';
+import { Box } from '@mui/material';
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -19,7 +23,7 @@ const useStyles = makeStyles(_ => ({
   canvasContainer: {
     height: '100%',
     width: '100%',
-    background: '#333333',
+    background: '#fffff',
   },
 }));
 
@@ -29,14 +33,18 @@ interface MetaDiagramProps {
   componentsMap: ComponentsMap;
   wrapperClassName?: string;
   canvasClassName?: string;
+  metaTheme: {
+    customThemeVariables: {};
+    canvasClassName: string;
+  };
 }
 
 const MetaDiagram = ({
   metaNodes,
   metaLinks,
   componentsMap,
   wrapperClassName,
-  canvasClassName,
+  metaTheme,
 }: MetaDiagramProps) => {
   const classes = useStyles();
 
@@ -71,14 +79,18 @@ const MetaDiagram = ({
   const containerClassName = wrapperClassName
     ? wrapperClassName
     : classes.container;
-  const diagramClassName = canvasClassName
-    ? canvasClassName
-    : classes.canvasContainer;
+
   return (
-    <div className={containerClassName}>
-      <Sidebar />
-      <CanvasWidget className={diagramClassName} engine={engine} />
-    </div>
+    <ThemeProvider theme={createTheme(theme(metaTheme?.customThemeVariables))}>
+      <CssBaseline />
+      <Box className={containerClassName}>
+        <Sidebar />
+        <CanvasWidget
+          className={`${classes.canvasContainer} ${metaTheme?.canvasClassName}`}
+          engine={engine}
+        />
+      </Box>
+    </ThemeProvider>
   );
 };
 

src/theme.ts

@@ -0,0 +1,121 @@
+import vars from './components/assets/styles/variables';
+
+type ThemeVars = {
+  [key: string]: any;
+};
+
+const applicationTheme = (params: ThemeVars) => {
+  const {
+    primaryBg,
+    fontFamily,
+    chipTextColor,
+    chipBgColor,
+    textWhite,
+    listItemActiveBg,
+    listSelectedTextColor,
+    listBoxShadow,
+    listBorderColor,
+  } = params;
+  return {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+          html {
+            background: ${primaryBg};
+            font-family: ${fontFamily};
+          }
+          body {
+            background-color:${primaryBg};
+            font-family: ${fontFamily};
+            font-size: 1rem;
+          }
+        `,
+      },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            '&.customSwitch': {
+              padding: '0.125rem',
+              background: chipTextColor,
+              borderRadius: '0.5rem',
+              display: 'flex',
+              '& .MuiListItemButton-root': {
+                padding: '0.25rem 0.75rem',
+                borderRadius: '0.4375rem',
+                width: '10.59375rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '&:not(:last-child)': {
+                  marginBottom: '0',
+                },
+                '&.Mui-disabled': {
+                  opacity: 1,
+                },
+                '&.Mui-selected': {
+                  background: textWhite,
+                  boxShadow: listBoxShadow,
+                  border: `0.03125rem solid ${listBorderColor}`,
+                  '& .MuiTypography-root': {
+                    color: listSelectedTextColor,
+                  },
+                },
+              },
+              '& .MuiChip-root': {
+                marginLeft: '0.25rem',
+              },
+              '& .MuiTypography-root': {
+                fontWeight: 500,
+                fontSize: '0.8125rem',
+                lineHeight: '1.25rem',
+                letterSpacing: '-0.005rem',
+                color: chipBgColor,
+                margin: 0,
+              },
+            },
+          },
+        },
+      },
+      MuiListItemIcon: {
+        styleOverrides: {
+          root: {
+            minWidth: 'inherit',
+          },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+            width: '2.5rem',
+            height: '2.5rem',
+            borderRadius: '50%',
+            justifyContent: 'center',
+            backgroundColor: chipTextColor,
+            '&:hover': {
+              backgroundColor: chipTextColor,
+            },
+            '&:not(:last-child)': {
+              marginBottom: '0.75rem',
+            },
+            '&.Mui-selected': {
+              backgroundColor: listItemActiveBg,
+              '&:hover': {
+                backgroundColor: listItemActiveBg,
+              },
+            },
+            '&.Mui-disabled': {
+              opacity: 0.8,
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default (customVariables: ThemeVars) =>
+  applicationTheme({
+    ...vars,
+    ...customVariables,
+  });