From 5959de3ab5807314f8efb023ec78df479b8617d3 Mon Sep 17 00:00:00 2001
From: vidhya-metacell <vidhya@metacell.us>
Date: Fri, 22 Jul 2022 19:16:24 +0200
Subject: [PATCH] #16 Node selection

---
 .../components/widgets/CustomNodeWidget.tsx   | 43 ++-----------
 example/components/widgets/NodeSelection.tsx  | 62 +++++++++++++++++++
 2 files changed, 66 insertions(+), 39 deletions(-)
 create mode 100644 example/components/widgets/NodeSelection.tsx

diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
index 6301867..506a376 100644
--- a/example/components/widgets/CustomNodeWidget.tsx
+++ b/example/components/widgets/CustomNodeWidget.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
-import {DiagramEngine, PortWidget} from "@projectstorm/react-diagrams";
+import {DiagramEngine} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "../../../.";
-import {Box, Button, Typography} from "@material-ui/core";
+import {Box, Typography} from "@material-ui/core";
+import NodeSelection from "./NodeSelection";
 
 export interface CustomNodeWidgetProps {
     model: MetaNodeModel;
@@ -18,43 +19,7 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
         return (
           <Box position='relative'>
             {this.props.model.getOptions()['selected'] && (
-              <>
-                <Button className="node-button">
-                  <Box
-                    className="icon"
-                    style={customNodeStyles}
-                  />
-                  Show properties
-                </Button>
-
-                <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>
-
-                  <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>
-              </>
+              <NodeSelection style={customNodeStyles} engine={this.props.engine} port={this.props.model} />
             )}
 
             <Box
diff --git a/example/components/widgets/NodeSelection.tsx b/example/components/widgets/NodeSelection.tsx
new file mode 100644
index 0000000..6627770
--- /dev/null
+++ b/example/components/widgets/NodeSelection.tsx
@@ -0,0 +1,62 @@
+import { Box, Button } from "@material-ui/core";
+import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams";
+import * as React from "react";
+
+type styleObject = {
+  background: string;
+  borderColor: string;
+  boxShadow: string;
+}
+
+export interface NodeSelectionProps {
+  style: styleObject;
+  engine: DiagramEngine;
+  port: any;
+}
+
+class NodeSelection extends React.Component<NodeSelectionProps> {
+  render() {
+    const { style, engine, port } = this.props;
+    return (
+      <>
+        <Button className="node-button">
+          <Box
+            className="icon"
+            style={style}
+          />
+          Show properties
+        </Button>
+
+        <Box className="nodes">
+          <PortWidget
+            engine={engine}
+            port={port.getPort("in")}
+          >
+            <Box style={{ left: '-0.375rem', top: '-0.375rem' }} className="pointer" />
+          </PortWidget>
+          <PortWidget
+            engine={engine}
+            port={port.getPort("out")}
+          >
+            <Box style={{ right: '-0.375rem', top: '-0.375rem' }} className="pointer" />
+          </PortWidget>
+
+          <PortWidget
+            engine={engine}
+            port={port.getPort("in")}
+          >
+            <Box style={{ left: '-0.375rem', bottom: '-0.375rem' }} className="pointer" />
+          </PortWidget>
+          <PortWidget
+            engine={engine}
+            port={port.getPort("out")}
+          >
+            <Box style={{ bottom: '-0.375rem', right: '-0.375rem' }} className="pointer" />
+          </PortWidget>
+        </Box>
+      </>
+    )
+  }
+}
+
+export default NodeSelection;
\ No newline at end of file