From 442107eb853a97501dc4645318c220cf7d208cc1 Mon Sep 17 00:00:00 2001 From: Nickolai Date: Sat, 10 Aug 2024 16:56:33 +0400 Subject: [PATCH] feat/ color cell --- src/components/App/App.tsx | 2 +- src/pages/Main/Main.module.scss | 6 +++ src/pages/Main/Main.tsx | 90 +++++++++++++++++---------------- src/services/mock.ts | 13 ++++- src/ui/Arrow/Arrow.tsx | 12 ++--- 5 files changed, 70 insertions(+), 53 deletions(-) diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 90e46e2..09008ce 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -81,7 +81,7 @@ export default function App() { const dropTarget = e.currentTarget; const dropTargetRect = dropTarget.getBoundingClientRect(); - const cellWidth = 300; + const cellWidth = 355; const cellHeight = 157; const columnIndex = Math.floor( diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss index 8920c6c..eaa5ef5 100644 --- a/src/pages/Main/Main.module.scss +++ b/src/pages/Main/Main.module.scss @@ -9,4 +9,10 @@ grid-template-columns: repeat(3, 300px); gap: 24px; position: relative; +} + +.cell { + // background-color: lightgray; + width: 100%; + border-radius: $border-radius-s; } \ No newline at end of file diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx index ec0755f..c1aa3aa 100644 --- a/src/pages/Main/Main.tsx +++ b/src/pages/Main/Main.tsx @@ -3,7 +3,7 @@ import styles from 'src/pages/Main/Main.module.scss'; import { useOutletContext } from 'react-router-dom'; import { initialCardsProps } from 'src/services/types'; import Arrow from 'src/ui/Arrow/Arrow'; -import { useEffect, useState } from 'react'; +import { useEffect, useLayoutEffect, useState } from 'react'; export default function Main() { const { allowDrop, handleDrop, cards } = useOutletContext<{ @@ -12,38 +12,24 @@ export default function Main() { cards: initialCardsProps[]; }>(); - // const [allCards, setAllCards] = useState([]); - - // useEffect(() => { - // const collectCards = (card: initialCardsProps, collected: initialCardsProps[]) => { - // collected.push(card); - // card.subordinates.forEach((subordinate) => collectCards(subordinate, collected)); - // }; - - // const newAllCards: initialCardsProps[] = []; - // cards.forEach((card) => collectCards(card, newAllCards)); - - // setAllCards(newAllCards); - // }, [cards]); - - const allCards: initialCardsProps[] = []; - - const collectCards = (card: initialCardsProps) => { - allCards.push(card); - if (card.subordinates) { - card.subordinates.forEach(collectCards); - } - }; - - cards.forEach(collectCards); + const [allCards, setAllCards] = useState([]); + const [arrows, setArrows] = useState([]); + const occupiedCells = allCards.map(card => card.cellId); + const freeCells = ['0-1', '1-1', '2-1']; const renderCards = (card: initialCardsProps) => { + console.log('allCards: ', allCards); const [col, row] = card.cellId.split('-').map(Number); + const isOccupied = occupiedCells.includes(card.cellId); // Проверяем, занята ли ячейка + const isFreeCell = freeCells.includes(card.cellId); // Проверяем, свободная ли ячейка return (
{ - return allCards.map((card) => { - const parentCard = cards.find((item) => item.id === card.parentId); - console.log('parentCard: ', parentCard); + const newArrows = allCards.map((card) => { + const parentCard = allCards.find((item) => item.id === card.parentId); if (parentCard) { - const parentElement = document.querySelector(`[data-cell-id="${parentCard.id}"]`); - const childElement = document.querySelector(`[data-cell-id="${card.id}"]`); - - if (parentElement && childElement) { - console.log('parentElement: ', parentElement); + const parentElement = document.querySelector( + `[data-cell-id="${parentCard.id}"]` + ) as HTMLElement; + const childElement = document.querySelector( + `[data-cell-id="${card.id}"]` + ) as HTMLElement; + + if (parentElement && childElement) { const from = { x: parentElement.offsetLeft + parentElement.offsetWidth / 2, y: parentElement.offsetTop + parentElement.offsetHeight, @@ -90,22 +78,38 @@ export default function Main() { } return null; }); + setArrows( + newArrows.filter((arrow): arrow is JSX.Element => arrow !== null) + ); }; + useEffect(() => { + const collectCards = ( + card: initialCardsProps, + collected: initialCardsProps[] + ) => { + collected.push(card); + card.subordinates.forEach((subordinate) => + collectCards(subordinate, collected) + ); + }; + const newAllCards: initialCardsProps[] = []; + cards.forEach((card) => collectCards(card, newAllCards)); + setAllCards(newAllCards); + }, [cards]); + + useLayoutEffect(() => { + if (allCards.length > 0) { + renderArrows(); + } + }, [allCards]); + return (
{allCards.map((card) => renderCards(card))} - {renderArrows()} + {arrows}
); } - - -// const parentElement = document.getElementById(parentCard.id); -// const childElement = document.getElementById(card.id); - - -// const parentElement = document.querySelector(`[data-cell-id="${parentCard.id}"]`); -// const childElement = document.querySelector(`[data-cell-id="${card.id}"]`); \ No newline at end of file diff --git a/src/services/mock.ts b/src/services/mock.ts index 4f306dc..4cbd762 100644 --- a/src/services/mock.ts +++ b/src/services/mock.ts @@ -16,7 +16,18 @@ export const initialCards = [ // photo: 'https://example.com/photo1.jpg', // parentId: '', // cellId: '1-1', - // subordinates: [], + // subordinates: [ + // { + // id: '1211', + // name: 'Иван', + // position: 'Разработчик', + // title: 'Frontend Developer', + // photo: 'https://example.com/photo1.jpg', + // parentId: '', + // cellId: '1-1', + // subordinates: [], + // }, + // ], // }, ], }, diff --git a/src/ui/Arrow/Arrow.tsx b/src/ui/Arrow/Arrow.tsx index 1849b73..cf56249 100644 --- a/src/ui/Arrow/Arrow.tsx +++ b/src/ui/Arrow/Arrow.tsx @@ -6,10 +6,6 @@ interface ArrowProps { } const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => { - // console.log('startY: ', startY); - // console.log('startX: ', startX); - // console.log('endX: ', endX); - // console.log('endY: ', endY); const arrowHeadSize = 11; const angle = Math.atan2(endY - startY, endX - startX); @@ -25,14 +21,14 @@ const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => { { y1={endY} x2={arrowX1} y2={arrowY1} - stroke='gray' + stroke='#8c8c8c' strokeWidth='2' /> { y1={endY} x2={arrowX2} y2={arrowY2} - stroke='gray' + stroke='#8c8c8c' strokeWidth='2' />