#26 Show expanded node by default for testing

MetaCell · Aug 9, 2022 · 78d3309 · 78d3309
1 parent 464a04a
commit 78d3309
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 25 deletions.
diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js
diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map
diff --git a/dist/meta-diagram.cjs.production.min.js b/dist/meta-diagram.cjs.production.min.js
diff --git a/dist/meta-diagram.cjs.production.min.js.map b/dist/meta-diagram.cjs.production.min.js.map
diff --git a/dist/meta-diagram.esm.js b/dist/meta-diagram.esm.js
diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map
diff --git a/...ents/widgets/CustomNodeExpandedWidget.tsx → ...ents/widgets/ExpandedCustomNodeWidget.tsx b/...ents/widgets/CustomNodeExpandedWidget.tsx → ...ents/widgets/ExpandedCustomNodeWidget.tsx
@@ -6,22 +6,24 @@ import {Box, Typography} from "@mui/material";
 import NodeSelection from "./NodeSelection";
 import InputOutputNode from "./InputOutputNode";
 
-export interface CustomNodeWidgetProps {
+const styles = {
+  root: {
+    textColor: {
+      color: '#4579EE',
+    },
+    codeColor: {
+      color: '#ED745D'
+    }
+  }
+};
+
+export interface ExpandedCustomNodeWidgetProps {
     model: MetaNodeModel;
     engine: DiagramEngine;
     classes: any;
 }
 
-const styles = () => ({
-  textColor: {
-    color: '#4579EE',
-  },
-  codeColor: {
-    color: '#ED745D'
-  }
-});
-
-export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
+export class ExpandedCustomNodeWidget extends React.Component<ExpandedCustomNodeWidgetProps> {
     render() {
         const { classes } = this.props;
         const functionValues = (label: string, value: string) => (
@@ -64,9 +66,9 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
               <Box className="block">
                 <Typography component="label">Function</Typography>
                 <Typography className="function">
-                  <Typography component="strong" className={classes.textColor} >
+                  <Typography component="strong" className={classes?.textColor} >
                     function
-                  </Typography>=pnl.<Typography className={classes.codeColor} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography>
+                  </Typography>=pnl.<Typography className={classes?.codeColor} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography>
               </Box>
             </Box>
 
@@ -82,4 +84,4 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
 }
 
 // @ts-ignore
-export default withStyles(styles)(CustomNodeWidget);
+export default withStyles(styles)(ExpandedCustomNodeWidget);
diff --git a/example/index.tsx b/example/index.tsx
@@ -2,7 +2,7 @@ import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import MetaDiagram, {MetaNode, Position, ComponentsMap, MetaLink} from "./..";
-import {CustomNodeWidget} from "./components/widgets/CustomNodeWidget";
+import {ExpandedCustomNodeWidget} from "./components/widgets/ExpandedCustomNodeWidget";
 import { makeStyles } from "@mui/styles";
 import CustomLinkWidget from "./components/widgets/CustomLinkWidget";
 import BG from "./components/assets/svg/bg-dotted.svg";
@@ -26,21 +26,21 @@ const App = () => {
 
     const node1 = new MetaNode('1', 'Node 1', 'default', new Position(250, 100), 'node-red', undefined)
 
-    const node2 = new MetaNode('2', 'Node 2', 'default', new Position(500, 100), 'node-blue', undefined)
+    // const node2 = new MetaNode('2', 'Node 2', 'default', new Position(500, 100), 'node-blue', undefined)
 
     const link3 = new MetaLink('3', 'link3', 'default', '1', 'out', '2', 'in', undefined,
         new Map(Object.entries({color: 'rgb(255,192,0)'})))
 
     const componentsMap = new ComponentsMap(
-        new Map(Object.entries({'default': CustomNodeWidget})),
+        new Map(Object.entries({'default': ExpandedCustomNodeWidget})),
         new Map(Object.entries({'default': CustomLinkWidget}))
     )
 
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <div className={classes.main}>
-          <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap}
+          <MetaDiagram metaNodes={[node1]} metaLinks={[link3]} componentsMap={componentsMap}
             metaTheme={{
                 customThemeVariables: {},
                 canvasClassName: classes.canvasBG,

diff --git a/src/theme.ts b/src/theme.ts
@@ -225,7 +225,7 @@ const applicationTheme = (params: ThemeVars) => {
             width: 1rem;
             height: 1rem;
             border: solid 0.0625rem ${nodeGreenTextColor};
-            background: ${nodeGreenBackgroundColor}
+            background: ${nodeGreenBackgroundColor};
             border-radius: 50%;
             display: flex;
             align-items: center;