#16 Add Nodes UI and color variants

MetaCell · Jul 22, 2022 · 113653d · 113653d
1 parent 06cd2bb
commit 113653d
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 64 deletions.
diff --git a/example/components/assets/styles/constants.ts b/example/components/assets/styles/constants.ts
@@ -0,0 +1,38 @@
+import iconGreen from "../svg/icon-green.svg";
+import iconOrange from "../svg/icon-orange.svg";
+
+export const colorGreen = {
+  backgroundColor: '#D4F4D4',
+  textColor: '#669D66',
+  borderColor: 'rgba(102, 157, 102, 0.2)',
+  boxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',
+  bulletColor: '#669D66',
+  icon: iconGreen,
+};
+
+export const colorOrange = {
+  backgroundColor: '#F4E9D4',
+  textColor: '#9D8B66',
+  borderColor: 'rgba(157, 139, 102, 0.2)',
+  boxShadow: '0 0.25rem 0.625rem -0.25rem rgba(157, 139, 102, 0.3)',
+  bulletColor: '#9D8B66',
+  icon: iconOrange,
+};
+
+export const colorBlue = {
+  backgroundColor: '#D4E6F4',
+  textColor: '#66829D',
+  borderColor: 'rgba(102, 130, 157, 0.2)',
+  boxShadow: '0 0.125rem 0.375rem -0.25rem rgba(102, 130, 157, 0.2)',
+  bulletColor: '#66829D',
+  icon: iconGreen,
+};
+
+export const colorGray = {
+  backgroundColor: '#E4E4E4',
+  textColor: '#818181',
+  borderColor: 'rgba(130, 130, 130, 0.2)',
+  boxShadow: '0 0.25rem 0.625rem -0.25rem rgba(129, 129, 129, 0.3)',
+  bulletColor: '#818181',
+  icon: iconGreen,
+};
diff --git a/example/components/assets/svg/icon-green.svg b/example/components/assets/svg/icon-green.svg
diff --git a/example/components/assets/svg/icon-orange.svg b/example/components/assets/svg/icon-orange.svg
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -1,61 +1,72 @@
 import * as React from "react";
 import {DiagramEngine, PortWidget} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "../../../.";
-import {Typography} from "@material-ui/core";
+import {Box, Button, Typography} from "@material-ui/core";
 
 export interface CustomNodeWidgetProps {
     model: MetaNodeModel;
     engine: DiagramEngine;
 }
 
 export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
-
     render() {
-        // @ts-ignore
-        const customNodeStyle = {
-            zIndex: 999999999,
-            border: "solid 2px gray",
-            borderRadius: "5px",
-            width: "250px",
-            height: "200px",
-            display: "flex",
-            alignItems: "flex-start",
-            justifyContent: "space-between",
-            position: "relative",
-            background: this.props.model.getOptions()['color'] || "darkgray",
-            top: this.props.model.getOptions()['position']?.y || 0,
-            left: this.props.model.getOptions()['position']?.x || 0
-        }
+        const customNodeStyles = {
+          background: this.props.model.getOptions()['backgroundColor'],
+          borderColor: this.props.model.getOptions()['borderColor'],
+          boxShadow: this.props.model.getOptions()['backgrounboxShadowdColor'],
+        };
+        return (
+          <Box position='relative'>
+            {this.props.model.getOptions()['selected'] && (
+              <>
+                <Button className="node-button">
+                  <Box
+                    className="icon"
+                    style={customNodeStyles}
+                  />
+                  Show properties
+                </Button>
 
-        const circlePortStyle = {
-            width: "12px",
-            height: "12px",
-            margin: "2px",
-            borderRadius: "4px",
-            background: "darkgray",
-            cursor: "pointer",
-        }
+                <Box className="nodes">
+                  <PortWidget
+                    engine={this.props.engine}
+                    port={this.props.model.getPort("in")}
+                  >
+                    <Box style={{ left: '-0.375rem', top: '-0.375rem' }} className="pointer" />
+                  </PortWidget>
+                  <PortWidget
+                    engine={this.props.engine}
+                    port={this.props.model.getPort("out")}
+                  >
+                    <Box style={{ right: '-0.375rem', top: '-0.375rem' }} className="pointer" />
+                  </PortWidget>
 
-        return (
-            <>
-                <div style={customNodeStyle}>
-                    <PortWidget
-                        style={{position: 'absolute', top: '0px', left: '0px'}}
-                        engine={this.props.engine}
-                        port={this.props.model.getPort("in")}
-                    >
-                        <div style={circlePortStyle}/>
-                    </PortWidget>
-                    <PortWidget
-                        style={{position: 'absolute', top: '0px', right: '0px'}}
-                        engine={this.props.engine}
-                        port={this.props.model.getPort("out")}
-                    >
-                        <div style={circlePortStyle}/>
-                    </PortWidget>
-                    <Typography>{this.props.model.getOptions()['name']}</Typography>
-                </div>
-            </>
+                  <PortWidget
+                    engine={this.props.engine}
+                    port={this.props.model.getPort("in")}
+                  >
+                    <Box style={{ left: '-0.375rem', bottom: '-0.375rem' }} className="pointer" />
+                  </PortWidget>
+                  <PortWidget
+                    engine={this.props.engine}
+                    port={this.props.model.getPort("out")}
+                  >
+                    <Box style={{ bottom: '-0.375rem', right: '-0.375rem' }} className="pointer" />
+                  </PortWidget>
+                </Box>
+              </>
+            )}
+
+            <Box
+              className="node"
+              style={customNodeStyles}
+            >
+              <img src={this.props.model.getOptions()['icon']} alt={this.props.model.getOptions()['name']} />
+              <Typography component="p" style={{ color: this.props.model.getOptions()['textColor'] }}>
+                {this.props.model.getOptions()['name']}
+              </Typography>
+            </Box>
+          </Box>
         );
     }
 }

diff --git a/example/index.tsx b/example/index.tsx
@@ -6,26 +6,27 @@ 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";
+import { colorGreen, colorOrange } from "./components/assets/styles/constants";
 
 const useStyles = makeStyles(_ => ({
-    main: {
-        position: 'absolute',
-        height: '100%',
-        width: '100%',
-    },
-    canvasBG: {
-        backgroundImage: `url(${BG})`
-    }
-}))
+  main: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
+  canvasBG: {
+    backgroundImage: `url(${BG})`
+  }
+}));
 
 const App = () => {
     const classes = useStyles();
 
-    const node1 = new MetaNode('1', 'node1', 'default', new Position(250, 100),
-        new Map(Object.entries({color: 'rgb(0,192,255)'})))
+    const node1 = new MetaNode('1', 'Node 1', 'default', new Position(250, 100),
+        new Map(Object.entries(colorGreen)))
 
-    const node2 = new MetaNode('2', 'node2', 'default', new Position(500, 100),
-        new Map(Object.entries({color: 'rgb(255,192,0)'})))
+    const node2 = new MetaNode('2', 'Node 2', 'default', new Position(500, 100),
+        new Map(Object.entries(colorOrange)))
 
     const link3 = new MetaLink('3', 'link3', 'default', '1', 'out', '2', 'in',
         new Map(Object.entries({color: 'rgb(255,192,0)'})))
@@ -37,12 +38,12 @@ const App = () => {
 
     return (
         <div className={classes.main}>
-            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap}
-                metaTheme={{
-                    customThemeVariables: {},
-                    canvasClassName: classes.canvasBG,
-                }}
-            />
+          <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap}
+            metaTheme={{
+                customThemeVariables: {},
+                canvasClassName: classes.canvasBG,
+            }}
+          />
         </div>
     );
 };