From 90f6c0ed860eaff307e2c6fafefb9663ec39c864 Mon Sep 17 00:00:00 2001
From: Mark Mankarious <mz.mankarious@gmail.com>
Date: Thu, 12 Oct 2023 16:19:32 +0100
Subject: [PATCH] feat: allows expandable node labels

---
 .../Node/LabelContainer/ExpandButton.tsx      | 36 ++++++++
 .../{ => LabelContainer}/LabelContainer.tsx   | 86 ++++++++++---------
 .../SceneLayers/Nodes/Node/Node.tsx           |  2 +-
 3 files changed, 84 insertions(+), 40 deletions(-)
 create mode 100644 src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx
 rename src/components/SceneLayers/Nodes/Node/{ => LabelContainer}/LabelContainer.tsx (68%)

diff --git a/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx b/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx
new file mode 100644
index 0000000..77e3683
--- /dev/null
+++ b/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
+import {
+  ExpandMore as ReadMoreIcon,
+  ExpandLess as ReadLessIcon
+} from '@mui/icons-material';
+
+interface Props {
+  isExpanded: boolean;
+  onClick: () => void;
+}
+
+export const ExpandButton = ({ isExpanded, onClick }: Props) => {
+  return (
+    <MuiButton
+      sx={{
+        position: 'absolute',
+        px: 0.5,
+        py: 0,
+        height: 'auto',
+        minWidth: 0,
+        fontSize: '0.7em',
+        bottom: 5,
+        right: 5,
+        color: 'common.white'
+      }}
+      onClick={onClick}
+    >
+      {isExpanded ? (
+        <ReadLessIcon sx={{ color: 'common.white' }} />
+      ) : (
+        <ReadMoreIcon sx={{ color: 'common.white' }} />
+      )}
+    </MuiButton>
+  );
+};
diff --git a/src/components/SceneLayers/Nodes/Node/LabelContainer.tsx b/src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx
similarity index 68%
rename from src/components/SceneLayers/Nodes/Node/LabelContainer.tsx
rename to src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx
index 447d0d6..77dceab 100644
--- a/src/components/SceneLayers/Nodes/Node/LabelContainer.tsx
+++ b/src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
-import { Box, Button } from '@mui/material';
-import { MoreHoriz as ReadMoreIcon } from '@mui/icons-material';
+import { Box } from '@mui/material';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
 import { PROJECTED_TILE_SIZE } from 'src/config';
 import { Gradient } from 'src/components/Gradient/Gradient';
+import { ExpandButton } from './ExpandButton';
 
 const STANDARD_LABEL_HEIGHT = 80;
 const EXPANDED_LABEL_HEIGHT = 200;
@@ -40,6 +40,10 @@ export const LabelContainer = ({
     return !isExpanded && contentSize.height >= STANDARD_LABEL_HEIGHT - 10;
   }, [isExpanded, contentSize.height]);
 
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0 });
+  }, [isExpanded]);
+
   return (
     <Box
       sx={{
@@ -68,8 +72,8 @@ export const LabelContainer = ({
           strokeLinecap="round"
         />
       </Box>
+
       <Box
-        ref={contentRef}
         sx={{
           position: 'absolute',
           bgcolor: 'common.white',
@@ -78,49 +82,53 @@ export const LabelContainer = ({
           borderRadius: 2,
           left: -contentSize.width * 0.5,
           top: -(contentSize.height + labelHeight + yOffset),
-          py: 1,
-          px: 1.5,
           overflow: 'hidden'
         }}
-        style={{
-          overflowY: isExpanded ? 'scroll' : 'hidden',
-          maxHeight: containerMaxHeight
-        }}
       >
-        {children}
-        {isContentTruncated && (
-          <Box
-            sx={{
-              position: 'absolute',
-              height: 50,
-              width: '100%',
-              bottom: 0,
-              left: 0
-            }}
-          >
-            <Gradient
-              sx={{ position: 'absolute', width: '100%', height: '100%' }}
-            />
-
-            <Button
+        <Box
+          ref={contentRef}
+          sx={{
+            py: 1,
+            px: 1.5
+          }}
+          style={{
+            overflowY: isExpanded ? 'scroll' : 'hidden',
+            maxHeight: containerMaxHeight
+          }}
+        >
+          {children}
+          {isContentTruncated && (
+            <Box
               sx={{
                 position: 'absolute',
-                px: 0.5,
-                py: 0,
-                height: 'auto',
-                minWidth: 0,
-                fontSize: '0.7em',
-                bottom: 5,
-                right: 5,
-                color: 'common.white'
-              }}
-              onClick={() => {
-                setIsExpanded(!isExpanded);
+                height: 50,
+                width: '100%',
+                bottom: 0,
+                left: 0
               }}
             >
-              <ReadMoreIcon sx={{ color: 'common.white' }} />
-            </Button>
-          </Box>
+              <Gradient
+                sx={{ position: 'absolute', width: '100%', height: '100%' }}
+              />
+            </Box>
+          )}
+        </Box>
+
+        {isContentTruncated && (
+          <ExpandButton
+            isExpanded={isExpanded}
+            onClick={() => {
+              setIsExpanded(true);
+            }}
+          />
+        )}
+        {isExpanded && (
+          <ExpandButton
+            isExpanded={isExpanded}
+            onClick={() => {
+              setIsExpanded(false);
+            }}
+          />
         )}
       </Box>
     </Box>
diff --git a/src/components/SceneLayers/Nodes/Node/Node.tsx b/src/components/SceneLayers/Nodes/Node/Node.tsx
index 80b5cc2..d6490b5 100644
--- a/src/components/SceneLayers/Nodes/Node/Node.tsx
+++ b/src/components/SceneLayers/Nodes/Node/Node.tsx
@@ -5,7 +5,7 @@ import { PROJECTED_TILE_SIZE } from 'src/config';
 import { getTilePosition } from 'src/utils';
 import { useIcon } from 'src/hooks/useIcon';
 import { MarkdownEditor } from 'src/components/MarkdownEditor/MarkdownEditor';
-import { LabelContainer } from './LabelContainer';
+import { LabelContainer } from './LabelContainer/LabelContainer';
 
 interface Props {
   node: NodeI;