предотвратить наложение при динамическом распределении абсолютно позиционированных элементов div - PullRequest
0 голосов
/ 12 апреля 2020

Итак, у меня интересная ситуация. У меня есть столбец динамически расположенных элементов div, которые выглядят так:

enter image description here

Каждый из этих элементов представляет собой следующий компонент:

const Comment = ({
  id,
  onClick,
  onClose,
  body,
  posX,
  posY,
  offsetY,
  activeRange,
}) => {
  return (
    <CommentWrapper
      isActive={isActive}
      style={{
        position: 'absolute',
        top: `${posY - offsetY}px`,
      }}
    >
      <CommentBody onClick={onClick}>
        <CommentText>{body}</CommentText>
      </CommentBody>
      <Icon
        type='close'
        onClick={onClose}
        style={{ position: 'absolute', right: '10px' }}
      />
    </CommentWrapper>
  )
}

Таким образом, по сути, каждый из этих компонентов расположен абсолютно внутри контейнера вертикального столбца, исходя из их posY - offsetY, где posY - это вертикальная позиция комментария к документу, а offset - это расстояние от верхней части Контейнер комментария в верхней части документа (это учитывает прокрутку).

Причина, по которой эти компоненты абсолютно расположены, состоит в том, что мне нужно, чтобы они соответствовали указанным c расположениям на странице. Однако проблема, когда два компонента генерируются с одинаковым вертикальным положением на странице, эти компоненты перекрываются. Однако в идеале я хотел бы, чтобы они распространялись так, чтобы ни один из них не перекрывался, но они также остаются близкими к их posY (поскольку причина абсолютной позиции заключается в том, что эти комментарии по существу служат метками для текста слева от них и таким образом, они должны быть рядом с их соответствующими источниками).

Сначала я хотел динамически проверить, не перекрываются ли какие-либо комментарии с использованием их ограничивающих строк, но это кажется очень дорогим подходом, учитывая, что мне нужно будет выполнить итерацию и затем сравнивайте каждую позицию с каждой другой позицией, поэтому мне было интересно, есть ли лучший способ добиться этого.

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...