Как должны быть нарисованы линии для комментариев в древовидной структуре в соответствии с логикой?

Изображение к вопросу
  • 12 августа 2023 г. 10:56
Ответы на вопрос 4
Для комментариев в древовидной структуре, линии следует рисовать следующим образом:

1. Каждый комментарий представлен отдельным блоком или узлом, который содержит текст комментария и информацию о пользователе.
2. Для связывания комментариев между собой и указания их иерархической структуры, линию или стрелку следует проводить от родительского комментария к дочернему комментарию. 
3. Если комментарий имеет несколько дочерних комментариев, линию можно провести от родительского комментария к каждому из дочерних комментариев, чтобы показать, что они все являются дочерними комментариями этого родительского комментария.
4. В случае, когда один из комментариев имеет несколько родительских комментариев, линии можно провести от каждого родительского комментария к этому комментарию с использованием отдельных стрелок или линий.

При использовании контроллера представления (VC):

1. Модель должна содержать информацию о комментариях и их связях друг с другом.
2. Представление должно отображать комментарии в соответствии с иерархической структурой, а также отображать соответствующие линии или стрелки для связанных комментариев.
3. Контроллер должен управлять отображением и обновлением представления в соответствии с изменениями в модели данных.

Пример кода не требуется, так как логика отображения линий и связей в древовидной структуре может различаться в зависимости от используемой технологии и фреймворка.
В базе хранятся id комментария и id его родителя, где родитель 0 означает верхний уровень. Необходимо извлечь все комментарии из базы, сгруппировать их по родителю и отсортировать по id. 
 
Для стилизации и создания такой структуры не требуется использование JavaScript. Это дерево можно нарисовать с помощью псевдоэлемента ::before. Если у комментария имеется ответ на предыдущий комментарий, то для этого ответа отображается линия с помощью ::before. Как это сделать? Создайте блок ::before размером, например, 30x30 пикселей, примените к нему border-left и border-bottom, а также скругление border-bottom-left-radius, например, 20 пикселей (согласно макету). Затем настройте абсолютное позиционирование для этого блока ::before и отрегулируйте его сдвиг вне границ родительского элемента в соответствии с вашими требованиями. 
Я предложил бы использовать линии для отображения дочерних комментариев. Тогда вы можете проверять, есть ли вложенность, чтобы определить наличие линии, и использовать псевдоселектор :last-child, чтобы определить, должна ли линия заканчиваться на этом уровне или делать ответвление.
Похожие вопросы