thehighhomie
@thehighhomie

Неадекватное отображение входящих данных в компоненте?

Пишу color picker. Есть корневой компонент и несколько дочерних, Корневой компонент принимает входные данные по которым инициализирует данные с цветами и передает их в дочерние. При обновлении дочернего компонента, некоторые данные идут обратно родителю и обновляются в нем, соответственно обновляются и остальные дочерние компоненты.

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

Так вот, когда я выбираю цвета в разных компонентах, к примеру я выберу цвет в большом пикере (saturation/value) и потом в пикере прозрачности (alpha) то курсор в большом пикере может немного сместиться. Этот баг происходит не только в конкретном случае, а подпрыгивают курсоры и в других местах, к примеру могут сразу 2 курсора подпрыгнуть - к примеру я сначала выберу цвет в большом пикере и в пикере HUE а потом изменю непрозрачность, то сразу 2 курсора, которые я перед этим переместил могут сместиться,

Прилагаю видео, чтобы было более понятно и наглядно https://yadi.sk/i/YkTJ1M5ROqR0IQ

Песочница с пикером https://codesandbox.io/s/3rky6xl7rq

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

С вычислениями позиции курсоров возможно все ок, потому что курсоры не всегда прыгают.
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
Splinter_1g
@Splinter_1g
.NET Core, VueJS
JS грешит неумением работать с большими/малыми числами, ChromaJS оттого и чудит. Ваш HSV (значения типа double) прыгает в значениях (миллионные доли) при любых изменениях rgba,alpha,hex. Побороть это можете либо поменяв расчеты для cursorX и cursorY на основе RGB, а не HSV, либо запоминайте прошлый hsv, если у вас в onUpdate пэйлоад содержит модель отличную от HSV.
Ваш пикер с поправленным index.vue: https://codesandbox.io/s/1rx753p2pl
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы