diff --git a/client/src/container/diagram/Diagram.tsx b/client/src/container/diagram/Diagram.tsx index c38bd76..668c09c 100644 --- a/client/src/container/diagram/Diagram.tsx +++ b/client/src/container/diagram/Diagram.tsx @@ -14,7 +14,7 @@ import { PRIMARY_COLORS } from '@util/Constants'; import TodoBlock from '@components/diagram/TodoBlock'; import TodoVertex from '@components/diagram/TodoVertex'; -const { offWhite } = PRIMARY_COLORS; +const { offWhite, green } = PRIMARY_COLORS; const Wrapper = styled.div` position: relative; @@ -30,6 +30,16 @@ const Detector = styled.div` background-color: transparent; `; +const Line = styled.div` + position: absolute; + height: 0; + width: 100%; + top: 40px; + transform: translateY(var(--offsetY)); + border-top: 4px solid ${green}; + opacity: 0.5; +`; + const Diagram = (): ReactElement => { const [todoListAtom] = useAtom(todoList); const [diagramData, setDiagramData] = useState | undefined>(); @@ -48,11 +58,15 @@ const Diagram = (): ReactElement => { }); }, [todoListAtom]); - const style = { + const diagramStyle = { '--offsetX': `${offset.x}px`, '--offsetY': `${offset.y}px`, }; + const lineStyle = { + '--offsetY': `${offset.y}px`, + }; + const onWheelDown = (event: React.MouseEvent): void => { if (event.button === 1) { isWheelDown.current = true; @@ -76,7 +90,8 @@ const Diagram = (): ReactElement => { return (
- + + {diagramData !== undefined && diagramVertice?.map((el) => { const { x1, y1, x2, y2 } = getVertexDimension(diagramData, el);