From 7e126488180f9b9879e86fc4dd965394facb1e49 Mon Sep 17 00:00:00 2001
From: AndyLnd <andy@wire.com>
Date: Mon, 7 Oct 2019 21:22:03 +0200
Subject: [PATCH] feat: GridRenderer

---
 src/container/GraphView/index.js    |  2 ++
 src/container/GridRenderer/index.js | 33 +++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/container/GridRenderer/index.js

diff --git a/src/container/GraphView/index.js b/src/container/GraphView/index.js
index aaabfc7b..21c68a4e 100644
--- a/src/container/GraphView/index.js
+++ b/src/container/GraphView/index.js
@@ -3,6 +3,7 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
+import GridRenderer from '../GridRenderer';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 import useKeyPress from '../../hooks/useKeyPress';
@@ -67,6 +68,7 @@ const GraphView = memo(({
 
   return (
     <div className="react-flow__renderer" ref={rendererNode}>
+      <GridRenderer />
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}
diff --git a/src/container/GridRenderer/index.js b/src/container/GridRenderer/index.js
new file mode 100644
index 00000000..d80c0626
--- /dev/null
+++ b/src/container/GridRenderer/index.js
@@ -0,0 +1,33 @@
+import React, {memo} from 'react';
+import {useStoreState} from 'easy-peasy';
+
+const GridRenderer = memo(({gap = 32}) => {
+  const {
+    width,
+    height,
+    transform: [x, y, scale],
+  } = useStoreState(s => s);
+
+  const scaledGap = gap * scale;
+
+  const xStart = x % scaledGap;
+  const yStart = y % scaledGap;
+
+  const lineCountX = Math.ceil(width / scaledGap) + 1;
+  const lineCountY = Math.ceil(height / scaledGap) + 1;
+
+  const xValues = Array.from({length: lineCountX}, (_, index) => `M${index * scaledGap + xStart} 0 V${height}`);
+  const yValues = Array.from({length: lineCountY}, (_, index) => `M0 ${index * scaledGap + yStart} H${width}`);
+
+  const path = [...xValues, ...yValues].join(' ');
+
+  return (
+    <svg width={width} height={height} style={{position: 'absolute', top: 0, left: 0}}>
+      <path fill="none" stroke="black" strokeWidth={.1} d={path} />
+    </svg>
+  );
+});
+
+GridRenderer.displayName = 'GridRenderer';
+
+export default GridRenderer;