#16 Node selection

MetaCell · Jul 22, 2022 · 5959de3 · 5959de3
1 parent 843b552
commit 5959de3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 39 deletions.
diff --git 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
@@ -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;