Feature/16 - Sidebar, Nodes, Node selection move to meta-diagram theme, add variables

dist/components/assets/styles/variables.d.ts

@@ -1,4 +1,8 @@
 declare const vars: {
+    nodeGreenBackgroundColor: string;
+    nodeGreenTextColor: string;
+    nodeGreenBorderColor: string;
+    nodeGreenBoxShadow: string;
     fontFamily: string;
     primaryBg: string;
     textWhite: string;
@@ -23,5 +27,14 @@ declare const vars: {
     progressBar: string;
     progressShadow: string;
     switchShadow: string;
+    sidebarBg: string;
+    sidebarShadow: string;
+    canvasBg: string;
+    showPropertiesButtonBg: string;
+    nodeBorderColor: string;
+    nodePointerBg: string;
+    nodeButtonTextColor: string;
+    nodeButtonLineColor: string;
+    nodeTextColor: string;
 };
 export default vars;

dist/models/MetaLink.d.ts

@@ -6,7 +6,7 @@ export declare class MetaLink implements ILink {
     targetId: string;
     targetPortId: string;
     options: MetaOptions;
-    constructor(id: string, name: string, shape: string, sourceId: string, sourcePortId: string, targetId: string, targetPortId: string, options: Map<string, any>);
+    constructor(id: string, name: string, shape: string, sourceId: string, sourcePortId: string, targetId: string, targetPortId: string, variant: string, options: Map<string, any>);
     getSourceId(): string;
     getSourcePortId(): string;
     getTargetId(): string;

dist/models/MetaNode.d.ts

@@ -3,5 +3,5 @@ import { Position } from './Position';
 export declare class MetaNode {
     children: MetaNode[];
     options: MetaOptions;
-    constructor(id: string, name: string, shape: string, position: Position, options: Map<string, any>);
+    constructor(id: string, name: string, shape: string, position: Position, variant: string, options: Map<string, any>);
 }

dist/models/MetaOptions.d.ts

@@ -2,7 +2,7 @@ import { IShape } from './IShape';
 import { IId } from './IId';
 export declare class MetaOptions implements IShape, IId {
     options: Map<string, any>;
-    constructor(id: string, name: string, shape: string, options: Map<string, any>);
+    constructor(id: string, name: string, shape: string, variant: string, options: Map<string, any>);
     getId(): string;
     getShape(): string;
 }

dist/theme.d.ts

@@ -1,90 +1,90 @@
-declare type ThemeVars = {
-    [key: string]: any;
-};
-declare const _default: (customVariables: ThemeVars) => {
-    components: {
-        MuiCssBaseline: {
-            styleOverrides: string;
-        };
-        MuiList: {
-            styleOverrides: {
-                root: {
-                    '&.customSwitch': {
-                        padding: string;
-                        background: any;
-                        borderRadius: string;
-                        display: string;
-                        '& .MuiListItemButton-root': {
-                            padding: string;
-                            borderRadius: string;
-                            width: string;
-                            display: string;
-                            alignItems: string;
-                            justifyContent: string;
-                            '&:not(:last-child)': {
-                                marginBottom: string;
-                            };
-                            '&.Mui-disabled': {
-                                opacity: number;
-                            };
-                            '&.Mui-selected': {
-                                background: any;
-                                boxShadow: any;
-                                border: string;
-                                '& .MuiTypography-root': {
-                                    color: any;
-                                };
-                            };
-                        };
-                        '& .MuiChip-root': {
-                            marginLeft: string;
-                        };
-                        '& .MuiTypography-root': {
-                            fontWeight: number;
-                            fontSize: string;
-                            lineHeight: string;
-                            letterSpacing: string;
-                            color: any;
-                            margin: number;
-                        };
-                    };
-                };
-            };
-        };
-        MuiListItemIcon: {
-            styleOverrides: {
-                root: {
-                    minWidth: string;
-                };
-            };
-        };
-        MuiListItemButton: {
-            styleOverrides: {
-                root: {
-                    padding: number;
-                    width: string;
-                    height: string;
-                    borderRadius: string;
-                    justifyContent: string;
-                    backgroundColor: any;
-                    '&:hover': {
-                        backgroundColor: any;
-                    };
-                    '&:not(:last-child)': {
-                        marginBottom: string;
-                    };
-                    '&.Mui-selected': {
-                        backgroundColor: any;
-                        '&:hover': {
-                            backgroundColor: any;
-                        };
-                    };
-                    '&.Mui-disabled': {
-                        opacity: number;
-                    };
-                };
-            };
-        };
-    };
-};
-export default _default;
+declare type ThemeVars = {
+    [key: string]: any;
+};
+declare const _default: (customVariables: ThemeVars) => {
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: string;
+        };
+        MuiList: {
+            styleOverrides: {
+                root: {
+                    '&.customSwitch': {
+                        padding: string;
+                        background: any;
+                        borderRadius: string;
+                        display: string;
+                        '& .MuiListItemButton-root': {
+                            padding: string;
+                            borderRadius: string;
+                            width: string;
+                            display: string;
+                            alignItems: string;
+                            justifyContent: string;
+                            '&:not(:last-child)': {
+                                marginBottom: string;
+                            };
+                            '&.Mui-disabled': {
+                                opacity: number;
+                            };
+                            '&.Mui-selected': {
+                                background: any;
+                                boxShadow: any;
+                                border: string;
+                                '& .MuiTypography-root': {
+                                    color: any;
+                                };
+                            };
+                        };
+                        '& .MuiChip-root': {
+                            marginLeft: string;
+                        };
+                        '& .MuiTypography-root': {
+                            fontWeight: number;
+                            fontSize: string;
+                            lineHeight: string;
+                            letterSpacing: string;
+                            color: any;
+                            margin: number;
+                        };
+                    };
+                };
+            };
+        };
+        MuiListItemIcon: {
+            styleOverrides: {
+                root: {
+                    minWidth: string;
+                };
+            };
+        };
+        MuiListItemButton: {
+            styleOverrides: {
+                root: {
+                    padding: number;
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                    justifyContent: string;
+                    backgroundColor: any;
+                    '&:hover': {
+                        backgroundColor: any;
+                    };
+                    '&:not(:last-child)': {
+                        marginBottom: string;
+                    };
+                    '&.Mui-selected': {
+                        backgroundColor: any;
+                        '&:hover': {
+                            backgroundColor: any;
+                        };
+                    };
+                    '&.Mui-disabled': {
+                        opacity: number;
+                    };
+                };
+            };
+        };
+    };
+};
+export default _default;

example/components/assets/styles/variables.ts

@@ -0,0 +1,28 @@
+const nodeRed = {
+  nodeRedBackgroundColor: '#F4D4D4',
+  nodeRedTextColor: '#9D6666',
+  nodeRedBorderColor: 'rgba(157, 139, 102, 0.2)',
+  nodeRedBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(157, 139, 102, 0.3)',
+};
+
+const nodeBlue = {
+  nodeBlueBackgroundColor: '#D4E6F4',
+  nodeBlueTextColor: '#66829D',
+  nodeBlueBorderColor: 'rgba(102, 130, 157, 0.2)',
+  nodeBlueBoxShadow: '0 0.125rem 0.375rem -0.25rem rgba(102, 130, 157, 0.2)',
+};
+
+const nodeGray = {
+  nodeGrayBackgroundColor: '#E4E4E4',
+  nodeGrayTextColor: '#818181',
+  nodeGrayBorderColor: 'rgba(130, 130, 130, 0.2)',
+  nodeGrayBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(129, 129, 129, 0.3)',
+};
+
+const vars = {
+  ...nodeRed,
+  ...nodeBlue,
+  ...nodeGray,
+};
+
+export default vars;

example/components/widgets/CustomNodeWidget.tsx

@@ -1,61 +1,30 @@
 import * as React from "react";
-import {DiagramEngine, PortWidget} from "@projectstorm/react-diagrams";
+import {DiagramEngine} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "../../../.";
-import {Typography} from "@material-ui/core";
+import {Box, Typography} from "@mui/material";
+import NodeSelection from "./NodeSelection";
 
 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
-        }
+        return (
+          <Box className={`primary-node ${this.props.model.getOptions()['variant']}`}>
+            {this.props.model.getOptions()['selected'] && (
+              <NodeSelection engine={this.props.engine} port={this.props.model} />
+            )}
 
-        const circlePortStyle = {
-            width: "12px",
-            height: "12px",
-            margin: "2px",
-            borderRadius: "4px",
-            background: "darkgray",
-            cursor: "pointer",
-        }
+            <Box className="primary-node_header">
+              <Box className="icon" />
 
-        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>
-            </>
+              <Typography component="p">
+                {this.props.model.getOptions()['name']}
+              </Typography>
+            </Box>
+          </Box>
         );
     }
 }

example/components/widgets/NodeSelection.tsx

@@ -0,0 +1,37 @@
+import { Box, Button } from "@mui/material";
+import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams";
+import * as React from "react";
+import PortWigetComp from "./PortWidgetComp";
+
+export interface NodeSelectionProps {
+  engine: DiagramEngine;
+  port: any;
+}
+
+class NodeSelection extends React.Component<NodeSelectionProps> {
+  render() {
+    const { engine, port } = this.props;
+    const selectionPoint = '-0.375rem';
+    const IN = 'in';
+    const OUT = 'out';
+    return (
+      <>
+        <Button className="node-button">
+          <Box
+            className="icon"
+          />
+          Show properties
+        </Button>
+
+        <Box className="nodes">
+          <PortWigetComp engine={engine} port={port} direction={IN} startPoints={{ left: selectionPoint, top: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={OUT} startPoints={{ right: selectionPoint, top: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={IN} startPoints={{ left: selectionPoint, bottom: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={OUT} startPoints={{ right: selectionPoint, bottom: selectionPoint }} />
+        </Box>
+      </>
+    )
+  }
+}
+
+export default NodeSelection;

example/components/widgets/PortWidgetComp.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Box } from "@mui/material";
+import { PortWidget } from "@projectstorm/react-diagrams";
+
+const PortWigetComp = (props) => {
+  const { engine, port, direction, startPoints } = props;
+  return (
+    <PortWidget
+      engine={engine}
+      port={port.getPort(direction)}
+    >
+      <Box style={startPoints} className="pointer" />
+    </PortWidget>
+  )
+}
+export default PortWigetComp;