#26 Example application expanded node example integration

MetaCell · Aug 9, 2022 · 464a04a · 464a04a
1 parent 59c9068
commit 464a04a
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 2 deletions.
diff --git a/example/components/widgets/CustomNodeExpandedWidget.tsx b/example/components/widgets/CustomNodeExpandedWidget.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { withStyles } from '@mui/styles';
+import {DiagramEngine} from "@projectstorm/react-diagrams";
+import {MetaNodeModel} from "../../../dist";
+import {Box, Typography} from "@mui/material";
+import NodeSelection from "./NodeSelection";
+import InputOutputNode from "./InputOutputNode";
+
+export interface CustomNodeWidgetProps {
+    model: MetaNodeModel;
+    engine: DiagramEngine;
+    classes: any;
+}
+
+const styles = () => ({
+  textColor: {
+    color: '#4579EE',
+  },
+  codeColor: {
+    color: '#ED745D'
+  }
+});
+
+export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
+    render() {
+        const { classes } = this.props;
+        const functionValues = (label: string, value: string) => (
+          <Box className="block">
+            <Typography component="label">{label}</Typography>
+            <Typography>{value}</Typography>
+          </Box>
+        )
+        return (
+          <Box className={`primary-node rounded ${this.props.model.getOptions()['variant']}`}>
+            {this.props.model.getOptions()['selected'] && (
+              <NodeSelection engine={this.props.engine} port={this.props.model} />
+            )}
+
+            <Box className="primary-node_header">
+              <Box className="icon" />
+
+              <Typography component="p">
+                {this.props.model.getOptions()['name']}
+              </Typography>
+            </Box>
+
+            <Box>
+              <InputOutputNode text={"Input from Frame 1"} />
+              <InputOutputNode text={"Input from Frame 2"} />
+            </Box>
+
+            <Box className="seprator" />
+
+            <Box className="block-wrapper">
+              {
+                functionValues('Context', '12')
+              }
+              {
+                functionValues('Size', '8.90')
+              }
+              {
+                functionValues('Prefs', '44')
+              }
+              <Box className="block">
+                <Typography component="label">Function</Typography>
+                <Typography className="function">
+                  <Typography component="strong" className={classes.textColor} >
+                    function
+                  </Typography>=pnl.<Typography className={classes.codeColor} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography>
+              </Box>
+            </Box>
+
+            <Box className="seprator" />
+
+            <Box>
+              <InputOutputNode direction="right" text={"Input from Frame 1"} />
+              <InputOutputNode direction="right" text={"Input from Frame 2"} />
+            </Box>
+          </Box>
+        );
+    }
+}
+
+// @ts-ignore
+export default withStyles(styles)(CustomNodeWidget);
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {DiagramEngine} from "@projectstorm/react-diagrams";
-import {MetaNodeModel} from "../../../.";
+import {MetaNodeModel} from "../../../dist";
 import {Box, Typography} from "@mui/material";
 import NodeSelection from "./NodeSelection";
 

diff --git a/example/components/widgets/InputOutputNode.tsx b/example/components/widgets/InputOutputNode.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Box, Typography } from "@mui/material";
+export interface InputOutputNodeProps {
+  text: string;
+  direction?: string
+}
+
+class InputOutputNode extends React.Component<InputOutputNodeProps> {
+  render() {
+    const { text, direction } = this.props;
+    const nodeClass = direction === 'right' ? 'block reverse' : 'block';
+    return (
+      <Box className={nodeClass}>
+        <Box className="disc" />
+        <Typography>{text}</Typography>
+      </Box>
+    )
+  }
+}
+
+export default InputOutputNode;
diff --git a/example/theme.ts b/example/theme.ts
@@ -89,7 +89,46 @@ const theme = {
 
         .primary-node.node-gray .node-button .icon {
           background: ${nodeGrayBackgroundColor};
-          border-color: rgba(130, 130, 130, 0.2);
+          border-color: ${nodeGrayBorderColor};
+        }
+
+        .primary-node.node-red .block .disc {
+          background: ${nodeRedBackgroundColor};
+          border-color: ${nodeRedTextColor};
+        }
+
+        .primary-node.node-red .block .disc:after {
+          background: ${nodeRedTextColor};
+        }
+
+        .primary-node.node-red .seprator {
+          background: ${nodeRedBorderColor};
+        }
+
+        .primary-node.node-blue .block .disc {
+          background: ${nodeBlueBackgroundColor};
+          border-color: ${nodeBlueTextColor};
+        }
+
+        .primary-node.node-blue .block .disc:after {
+          background: ${nodeBlueTextColor};
+        }
+
+        .primary-node.node-blue .seprator {
+          background: ${nodeBlueBorderColor};
+        }
+
+        .primary-node.node-gray .block .disc {
+          background: ${nodeGrayBackgroundColor};
+          border-color: ${nodeGrayTextColor};
+        }
+
+        .primary-node.node-gray .block .disc:after {
+          background: ${nodeGrayTextColor};
+        }
+
+        .primary-node.node-gray .seprator {
+          background: ${nodeGrayBorderColor};
         }
       `,
     },