reduce element count

src/components/CustomNode/ObjectNode.tsx

@@ -15,25 +15,23 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <ConditionalWrapper condition={settings.performance}>
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText width={width} height={height}>
-            {value.map(
-              (val, idx) =>
-                val[1] && (
-                  <Styled.StyledRow
-                    data-key={val[1]}
-                    data-x={x}
-                    data-y={y}
-                    key={idx}
-                    width={width}
-                  >
-                    <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
-                    {val[1]}
-                  </Styled.StyledRow>
-                )
-            )}
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          {value.map(
+            (val, idx) =>
+              val[1] && (
+                <Styled.StyledRow
+                  data-key={val[1]}
+                  data-x={x}
+                  data-y={y}
+                  key={idx}
+                  width={width}
+                >
+                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
+                  {val[1]}
+                </Styled.StyledRow>
+              )
+          )}
+        </Styled.StyledText>
       </ConditionalWrapper>
     </Styled.StyledForeignObject>
   );

src/components/CustomNode/TextNode.tsx

@@ -16,18 +16,16 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <ConditionalWrapper condition={settings.performance}>
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText width={width} height={height}>
-            <Styled.StyledKey
-              data-x={x}
-              data-y={y}
-              data-key={value}
-              parent={isParent}
-            >
-              {value}
-            </Styled.StyledKey>
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          <Styled.StyledKey
+            data-x={x}
+            data-y={y}
+            data-key={value}
+            parent={isParent}
+          >
+            {value}
+          </Styled.StyledKey>
+        </Styled.StyledText>
       </ConditionalWrapper>
     </Styled.StyledForeignObject>
   );

src/components/CustomNode/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import RenderIfVisible from "react-render-if-visible";
 import { Label, Node, NodeProps } from "reaflow";
 import ObjectNode from "./ObjectNode";
+import { StyledTextWrapper } from "./styles";
 import TextNode from "./TextNode";
 
 export interface CustomNodeProps<T> {
@@ -23,7 +24,13 @@ export const ConditionalWrapper: React.FC<{
   condition?: boolean;
   children: React.ReactNode;
 }> = ({ condition, children }) =>
-  condition ? <RenderIfVisible>{children}</RenderIfVisible> : <>{children}</>;
+  condition ? (
+    <RenderIfVisible rootElementClass="renderVisible">
+      {children}
+    </RenderIfVisible>
+  ) : (
+    <StyledTextWrapper>{children}</StyledTextWrapper>
+  );
 
 export const CustomNode = (nodeProps: NodeProps) => {
   const { properties } = nodeProps;

src/components/CustomNode/styles.tsx

@@ -37,6 +37,17 @@ export const StyledForeignObject = styled.foreignObject`
     background-color: rgba(255, 0, 255, 0.5);
     filter: hue-rotate();
   }
+
+  .renderVisible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    cursor: pointer;
+  }
 `;
 
 export const StyledKey = styled.span<{