From a5d4f4a007f19ab04b986479e4767862d7df469d Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 9 Apr 2022 14:22:00 +0300
Subject: [PATCH] add node positions to element

---
 .../LiveEditor/CustomNode/ObjectNode.tsx           | 11 ++++++++++-
 src/containers/LiveEditor/CustomNode/TextNode.tsx  |  4 +++-
 src/containers/LiveEditor/CustomNode/index.tsx     | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/containers/LiveEditor/CustomNode/ObjectNode.tsx b/src/containers/LiveEditor/CustomNode/ObjectNode.tsx
index 3845b5c..1c71d9d 100644
--- a/src/containers/LiveEditor/CustomNode/ObjectNode.tsx
+++ b/src/containers/LiveEditor/CustomNode/ObjectNode.tsx
@@ -6,6 +6,8 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
   width,
   height,
   value,
+  x,
+  y
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
@@ -15,7 +17,14 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
             (val, idx) =>
               val[1] && (
                 <Styled.StyledRow key={idx} width={width}>
-                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
+                  <Styled.StyledKey
+                    data-x={x}
+                    data-y={y}
+                    data-key={val[1]}
+                    objectKey
+                  >
+                    {val[0]}:{" "}
+                  </Styled.StyledKey>
                   {val[1]}
                 </Styled.StyledRow>
               )
diff --git a/src/containers/LiveEditor/CustomNode/TextNode.tsx b/src/containers/LiveEditor/CustomNode/TextNode.tsx
index d30ae5b..86938e1 100644
--- a/src/containers/LiveEditor/CustomNode/TextNode.tsx
+++ b/src/containers/LiveEditor/CustomNode/TextNode.tsx
@@ -7,12 +7,14 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   height,
   value,
   isParent = false,
+  x,
+  y
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <Styled.StyledTextWrapper>
         <Styled.StyledText width={width} height={height}>
-          <Styled.StyledKey parent={isParent}>{value}</Styled.StyledKey>
+          <Styled.StyledKey data-x={x} data-y={y} data-key={value} parent={isParent}>{value}</Styled.StyledKey>
         </Styled.StyledText>
       </Styled.StyledTextWrapper>
     </Styled.StyledForeignObject>
diff --git a/src/containers/LiveEditor/CustomNode/index.tsx b/src/containers/LiveEditor/CustomNode/index.tsx
index 4698466..240a0b4 100644
--- a/src/containers/LiveEditor/CustomNode/index.tsx
+++ b/src/containers/LiveEditor/CustomNode/index.tsx
@@ -8,6 +8,8 @@ export interface CustomNodeProps<T> {
   height: number;
   value: T;
   isParent?: boolean;
+  x: number;
+  y: number;
 }
 
 const baseLabelStyle = {
@@ -34,7 +36,15 @@ export const CustomNode = (nodeProps: NodeProps) => {
 
         if (data.text instanceof Object) {
           const entries = Object.entries(data.text);
-          return <ObjectNode width={width} height={height} value={entries} />;
+          return (
+            <ObjectNode
+              x={nodeProps.x}
+              y={nodeProps.y}
+              width={width}
+              height={height}
+              value={entries}
+            />
+          );
         }
 
         return (
@@ -43,6 +53,8 @@ export const CustomNode = (nodeProps: NodeProps) => {
             width={width}
             height={height}
             value={data.text}
+            x={nodeProps.x}
+            y={nodeProps.y}
           />
         );
       }}