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 (
+
+ {isExpanded ? (
+
+ ) : (
+
+ )}
+
+ );
+};
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 (
+
- {children}
- {isContentTruncated && (
-
-
-
-
-
+
+
+ )}
+
+
+ {isContentTruncated && (
+ {
+ setIsExpanded(true);
+ }}
+ />
+ )}
+ {isExpanded && (
+ {
+ setIsExpanded(false);
+ }}
+ />
)}
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;