From 8dcb8758a88eb6e7bdec8bc652a5e18d0ec07f92 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 29 Jan 2022 22:14:45 +0100
Subject: [PATCH] feat(nodes): add group type

---
 example/src/Subflow/index.tsx       |  4 +-
 src/components/Nodes/GroupNode.tsx  |  5 +++
 src/container/NodeRenderer/utils.ts |  4 +-
 src/theme-default.css               | 63 +++++++++--------------------
 4 files changed, 30 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Nodes/GroupNode.tsx

diff --git a/example/src/Subflow/index.tsx b/example/src/Subflow/index.tsx
index 44621ae4..e750365a 100644
--- a/example/src/Subflow/index.tsx
+++ b/example/src/Subflow/index.tsx
@@ -61,10 +61,11 @@ const initialNodes: Node[] = [
   },
   {
     id: '5',
+    type: 'group',
     data: { label: 'Node 5' },
     position: { x: 650, y: 250 },
     className: 'light',
-    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
+    style: { width: 400, height: 150 },
     zIndex: 1000,
   },
   {
@@ -98,7 +99,6 @@ const initialEdges: Edge[] = [
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
   { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  { id: '3-5', source: '3', target: '5' },
 ];
 
 const nodeTypes = {
diff --git a/src/components/Nodes/GroupNode.tsx b/src/components/Nodes/GroupNode.tsx
new file mode 100644
index 00000000..cea42e43
--- /dev/null
+++ b/src/components/Nodes/GroupNode.tsx
@@ -0,0 +1,5 @@
+const GroupNode = () => null;
+
+GroupNode.displayName = 'GroupNode';
+
+export default GroupNode;
diff --git a/src/container/NodeRenderer/utils.ts b/src/container/NodeRenderer/utils.ts
index ede9dc72..74464f5c 100644
--- a/src/container/NodeRenderer/utils.ts
+++ b/src/container/NodeRenderer/utils.ts
@@ -3,6 +3,7 @@ import { ComponentType } from 'react';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
+import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
 import { NodeTypesType, NodeProps } from '../../types';
 
@@ -11,11 +12,12 @@ export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
     input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
     default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
     output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
+    group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
   };
 
   const wrappedTypes = {} as NodeTypesType;
   const specialTypes: NodeTypesType = Object.keys(nodeTypes)
-    .filter((k) => !['input', 'default', 'output'].includes(k))
+    .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
     .reduce((res, key) => {
       res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
 
diff --git a/src/theme-default.css b/src/theme-default.css
index 73384c77..b5bc257a 100644
--- a/src/theme-default.css
+++ b/src/theme-default.css
@@ -1,8 +1,3 @@
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-}
-
 .react-flow__edge {
   &.selected {
     .react-flow__edge-path {
@@ -46,7 +41,8 @@
 
 .react-flow__node-default,
 .react-flow__node-input,
-.react-flow__node-output {
+.react-flow__node-output,
+.react-flow__node-group {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -55,31 +51,6 @@
   text-align: center;
   border-width: 1px;
   border-style: solid;
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-}
-
-.react-flow__node-input {
-  background: #fff;
-  border-color: #0041d0;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #0041d0;
-  }
-
-  .react-flow__handle {
-    background: #0041d0;
-  }
-}
-
-.react-flow__node-default {
   background: #fff;
   border-color: #1a192b;
 
@@ -93,21 +64,27 @@
   }
 }
 
-.react-flow__node-output {
-  background: #fff;
-  border-color: #ff0072;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #ff0072;
-  }
-
-  .react-flow__handle {
-    background: #ff0072;
+.react-flow__node-default.selectable,
+.react-flow__node-input.selectable,
+.react-flow__node-output.selectable,
+.react-flow__node-group.selectable {
+  &:hover {
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
 }
 
-.react-flow__nodesselection-rect {
+.react-flow__node-group {
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }