#33 Remove styles and theme properties which are now cming from meta-…

…diagram
MetaCell · Jul 22, 2022 · 914ff93 · 914ff93
1 parent 46a7ba4
commit 914ff93
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 185 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "electron-is-dev": "^1.2.0",
     "html2json": "^1.0.2",
     "lodash": "^4.17.21",
-    "meta-diagram": "github:MetaCell/meta-diagram#feature/5",
+    "meta-diagram": "github:MetaCell/meta-diagram#feature/16",
     "pathfinding": "^0.4.18",
     "paths-js": "^0.4.11",
     "process": "^0.11.10",

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -17,15 +17,10 @@ const styles = () => ({
     left: 0,
     height: 'calc(100% - 3.5rem)',
     width: '100%',
-    backgroundRepeat: 'repeat',
-    backgroundColor: '#fff',
-    backgroundImage: `url(${BG})`
-  },
-
-  diagramContainer: {
-    width: '100%',
-    height: '100%',
   },
+  canvasBG: {
+    backgroundImage: `url(${BG})`
+  }
 });
 
 class Main extends React.Component {
@@ -47,7 +42,12 @@ class Main extends React.Component {
 
     return (
       <div className={classes.root}>
-        <MetaDiagram metaNodes={metaModel.mechanisms} metaLinks={metaModel.projections} componentsMap={componentsMap} />
+        <MetaDiagram metaNodes={metaModel.mechanisms} metaLinks={metaModel.projections} componentsMap={componentsMap}
+          metaTheme={{
+            customThemeVariables: {},
+            canvasClassName: classes.canvasBG,
+          }}
+        />
       </div>
     );
   }

diff --git a/src/components/common/Header.js b/src/components/common/Header.js
@@ -10,7 +10,7 @@ import vars from "../../assets/styles/variables";
 
 const { textWhite, listSelectedTextColor, dropdownBg, dropdownTextColor } = vars;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
     background: textWhite,
     height: '3.5rem',

diff --git a/src/components/common/Layout.js b/src/components/common/Layout.js
@@ -1,18 +1,11 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
 import Header from './Header';
-import Sidebar from '../Sidebar';
 import Main from '../Main';
 
-const useStyles = makeStyles((theme) => ({
-  root: {},
-}));
-
 const Layout = ({ children }) => {
-  const classes = useStyles();
   return (
-    <Box className={classes.root}>
+    <Box>
       <Header />
       <Main />
     </Box>

diff --git a/src/components/views/mechanisms/CustomNodeWidget.js b/src/components/views/mechanisms/CustomNodeWidget.js
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {DiagramEngine, PortWidget} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "meta-diagram";
-import {Typography} from "@material-ui/core";
+import {Typography} from "@mui/material";
 
 export class CustomNodeWidget extends React.Component {
     render() {

diff --git a/src/components/views/mechanisms/MechMetadata.js b/src/components/views/mechanisms/MechMetadata.js
@@ -4,7 +4,7 @@ import { withStyles } from "@mui/styles";
 import Box from "@mui/material/Box";
 import NodeSelection from "./NodeSelection";
 import InputOutputNode from "./InputOutputNode";
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 
 
 const styles = () => ({

diff --git a/src/components/views/mechanisms/MechSimple.js b/src/components/views/mechanisms/MechSimple.js
@@ -32,7 +32,7 @@ const styles = () => ({
 
 class MechSimple extends React.Component {
   render() {
-    const { classes, node, node: { options }, engine, changeVisibility } = this.props;
+    const { classes, model, model: { options }, engine, changeVisibility } = this.props;
 
     const circlePortStyle = {
       width: "12px",
@@ -46,20 +46,20 @@ class MechSimple extends React.Component {
     return (
       <Box position='relative'>
         {options.selected && (
-          <NodeSelection node={node} engine={engine} text={"Show properties"} changeVisibility={changeVisibility} />
+          <NodeSelection node={model} engine={engine} text={"Show properties"} changeVisibility={changeVisibility} />
         )}
 
         <PortWidget
             style={{position: 'absolute', top: '46%', left: '0px'}}
             engine={this.props.engine}
-            port={this.props.node.getPort("in")}
+            port={this.props.model.getPort("in")}
         >
             <div style={circlePortStyle}/>
         </PortWidget>
         <PortWidget
             style={{position: 'absolute', top: '46%', right: '0px'}}
             engine={this.props.engine}
-            port={this.props.node.getPort("out")}
+            port={this.props.model.getPort("out")}
         >
             <div style={circlePortStyle}/>
         </PortWidget>

diff --git a/src/components/views/mechanisms/NodeSelection.js b/src/components/views/mechanisms/NodeSelection.js
@@ -3,88 +3,88 @@ import { withStyles } from "@mui/styles";
 import { Box, Button } from "@mui/material";
 import { PortWidget } from "@projectstorm/react-diagrams";
 
-const styles = () => ({
-  nodes: {
-    width: '10rem',
-    height: '10rem',
-    border: '0.09375rem solid #18A0FB',
-    zIndex: 10,
-    position: 'absolute',
-  },
+// const styles = () => ({
+//   nodes: {
+//     width: '10rem',
+//     height: '10rem',
+//     border: '0.09375rem solid #18A0FB',
+//     zIndex: 10,
+//     position: 'absolute',
+//   },
 
-  nodesDefault: {
-    width: '100%',
-    height: '100%',
-  },
+//   nodesDefault: {
+//     width: '100%',
+//     height: '100%',
+//   },
 
-  node: {
-    width: '0.625rem',
-    height: '0.625rem',
-    background: '#FFFFFF',
-    border: '0.09375rem solid #18A0FB',
-    borderRadius: '0.125rem',
-    position: 'absolute',
-  },
+//   node: {
+//     width: '0.625rem',
+//     height: '0.625rem',
+//     background: '#FFFFFF',
+//     border: '0.09375rem solid #18A0FB',
+//     borderRadius: '0.125rem',
+//     position: 'absolute',
+//   },
 
-  button: {
-    '&.MuiButton-root': {
-      backgroundColor: '#161A1E',
-      borderRadius: '1.125rem',
-      fontWeight: 600,
-      fontSize: '0.8125rem',
-      display: 'flex',
-      lineHeight: '1rem',
-      letterSpacing: '-0.025625rem',
-      color: 'rgba(255, 255, 255, 0.8)',
-      margin: '0 !important',
-      width: '9.625rem',
-      padding: '0',
-      height: '2.25rem',
-      position: 'absolute',
-      top: '-2.625rem',
-      fontFamily: 'Inter,sans-serif',
-      left: '50%',
-      transform: 'translateX(-50%)',
+//   button: {
+//     '&.MuiButton-root': {
+//       backgroundColor: '#161A1E',
+//       borderRadius: '1.125rem',
+//       fontWeight: 600,
+//       fontSize: '0.8125rem',
+//       display: 'flex',
+//       lineHeight: '1rem',
+//       letterSpacing: '-0.025625rem',
+//       color: 'rgba(255, 255, 255, 0.8)',
+//       margin: '0 !important',
+//       width: '9.625rem',
+//       padding: '0',
+//       height: '2.25rem',
+//       position: 'absolute',
+//       top: '-2.625rem',
+//       fontFamily: 'Inter,sans-serif',
+//       left: '50%',
+//       transform: 'translateX(-50%)',
 
-      '&:hover': {
-        backgroundColor: '#161A1E',
-      },
-    },
-  },
+//       '&:hover': {
+//         backgroundColor: '#161A1E',
+//       },
+//     },
+//   },
 
-  circle: {
-    width: '1rem',
-    border: 'solid 0.0625rem',
-    height: '1rem',
-    borderRadius: '50%',
-    marginRight: '1.25rem',
-    position: 'relative',
+//   circle: {
+//     width: '1rem',
+//     border: 'solid 0.0625rem',
+//     height: '1rem',
+//     borderRadius: '50%',
+//     marginRight: '1.25rem',
+//     position: 'relative',
 
-    '&:after': {
-      content: '""',
-      height: '1.75rem',
-      width: '0.0625rem',
-      display: 'block',
-      position: 'absolute',
-      right: '-0.625rem',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    },
-  },
-});
+//     '&:after': {
+//       content: '""',
+//       height: '1.75rem',
+//       width: '0.0625rem',
+//       display: 'block',
+//       position: 'absolute',
+//       right: '-0.625rem',
+//       top: '50%',
+//       transform: 'translateY(-50%)',
+//       backgroundColor: 'rgba(255, 255, 255, 0.2)',
+//     },
+//   },
+// });
 
 class NodeSelection extends React.Component {
   render() {
     const { classes, node, node: { options }, engine, text, changeVisibility } = this.props;
 
-    const nodeClass = options.shape === 'default' ? classes.nodesDefault : '';
+    // const nodeClass = options.shape === 'default' ? classes.nodesDefault : '';
 
     return (
       <>
-        <Button className={classes.button} onClick={changeVisibility}>
+        <Button onClick={changeVisibility}>
           <Box
-            className={classes.circle}
+            // className={classes.circle}
             style={{
               background: options.variant.backgroundColor,
               borderColor: options.variant.borderColor,
@@ -93,11 +93,11 @@ class NodeSelection extends React.Component {
           />
           {text}
         </Button>
-        <Box className={`${classes.nodes} ${nodeClass}`}>
+        <Box>
         </Box>
       </>
     );
   }
 }
 
-export default withStyles(styles)(NodeSelection);
+export default NodeSelection;