Merge pull request #1 from AykutSarac/victorbrambati/main

UI/UX improvements
AykutSarac · Aug 24, 2022 · 883d3a1 · 883d3a1
2 parents 589936a + 8b5179c
commit 883d3a1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx
@@ -1,8 +1,28 @@
 import React from "react";
+import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
 import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode";
 import useConfig from "src/hooks/store/useConfig";
+import styled from "styled-components";
 import * as Styled from "./styles";
 
+const StyledExpand = styled.button`
+  pointer-events: all;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  right: 0;
+  padding: 0;
+  color: ${({ theme }) => theme.TEXT_NORMAL};
+  background: rgba(0, 0, 0, 0.1);
+  min-height: 0;
+  height: 100%;
+  width: 40px;
+  border-radius: 0;
+  border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+`;
+
 const TextNode: React.FC<CustomNodeProps<string>> = ({
   width,
   height,
@@ -12,21 +32,43 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   y,
 }) => {
   const performanceMode = useConfig((state) => state.performanceMode);
+  const expand = useConfig((state) => state.expand);
+  const [isExpanded, setIsExpanded] = React.useState(!expand);
+
+  React.useEffect(() => {
+    setIsExpanded(expand);
+  }, [expand]);
+
+  const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
 
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <ConditionalWrapper condition={performanceMode}>
-        <Styled.StyledText width={width} height={height}>
+        <Styled.StyledText parent={isParent} width={width} height={height}>
           <Styled.StyledKey
             data-x={x}
             data-y={y}
             data-key={JSON.stringify(value)}
             parent={isParent}
           >
-            <Styled.StyledLinkItUrl>{JSON.stringify(value).replaceAll('"', "")}</Styled.StyledLinkItUrl>
+            <Styled.StyledLinkItUrl>
+              {JSON.stringify(value).replaceAll('"', "")}
+            </Styled.StyledLinkItUrl>
           </Styled.StyledKey>
         </Styled.StyledText>
       </ConditionalWrapper>
+      {isParent && (
+        <StyledExpand onClick={handleExpand}>
+          {isExpanded ? (
+            <BiChevronRight size={20} />
+          ) : (
+            <BiChevronLeft size={20} />
+          )}
+        </StyledExpand>
+      )}
     </Styled.StyledForeignObject>
   );
 };

diff --git a/src/components/CustomNode/styles.tsx b/src/components/CustomNode/styles.tsx
@@ -23,14 +23,19 @@ export const StyledTextWrapper = styled.div`
   cursor: pointer;
 `;
 
-export const StyledText = styled.pre<{ width: number; height: number }>`
+export const StyledText = styled.pre<{
+  width: number;
+  height: number;
+  parent: boolean;
+}>`
   display: flex;
   justify-content: center;
   flex-direction: column;
   width: ${({ width }) => width};
   height: ${({ height }) => height};
   min-height: 50;
   color: ${({ theme }) => theme.TEXT_NORMAL};
+  padding-right: ${({ parent }) => parent && "20px"};
 `;
 
 export const StyledForeignObject = styled.foreignObject`

diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
@@ -65,7 +65,7 @@ const MemoizedGraph = React.memo(function Layout({ isWidget }: LayoutProps) {
     setNodeTools("edges", edges);
     setNodeTools("newNodes", nodes);
     setNodeTools("newEdges", edges);
-  }, [json, expand]);
+  }, [json, expand, setNodeTools]);
 
   const onInit = (ref: ReactZoomPanPinchRef) => {
     setConfig("zoomPanPinch", ref);
@@ -100,6 +100,9 @@ const MemoizedGraph = React.memo(function Layout({ isWidget }: LayoutProps) {
         wheel={{
           step: 0.05,
         }}
+        doubleClick={{
+          disabled: true,
+        }}
       >
         <TransformComponent
           wrapperStyle={{
@@ -117,16 +120,7 @@ const MemoizedGraph = React.memo(function Layout({ isWidget }: LayoutProps) {
             key={layout}
             onLayoutChange={onLayoutChange}
             selections={selections}
-            node={(props) =>
-              newNodes.find((n) => n.id === props.id) ? (
-                <CustomNode
-                  onClick={(e) => onClick && onClick(e, props)}
-                  {...props}
-                />
-              ) : (
-                <></>
-              )
-            }
+            node={(props) => <CustomNode {...props} />}
             edge={(props) =>
               newEdges.find((e) => e.id === props.id) ? <Edge /> : <></>
             }

diff --git a/src/containers/Editor/LiveEditor/helpers.ts b/src/containers/Editor/LiveEditor/helpers.ts
@@ -32,7 +32,7 @@ export function getEdgeNodes(
         data: {
           isParent: el.parent,
         },
-        width: isExpanded ? 35 + longestLine * (el.parent ? 9 : 8) : 180,
+        width: isExpanded ? 35 + longestLine * 8 + (el.parent && 60) : 180,
         height,
       });
     } else {