class C {
a = 1;
f = () => this.a;
}
const x = new C();
mapCallbacks[id] = (data) => {...}
return new Promise((resp, rej) => {
mapCallbacks[id] = (error, data) => {
if (error) {
rej(error);
} else {
resp(data);
}
};
});
Коробка не должна вмещаться при следующих случаях:
1) Если хотя бы одна сторона больше чем max(radius, height)
2) Если три стороны больше, чем min(radius, height)
import React, { useMemo } from "react";
import * as S from "./dots.style";
function makeData(dots, shift, width) {
const normShift = shift >= 0 ? shift : shift - dots.length * shift;
return dots.map((dot, index) => ({
key: dot,
isFirst: index === 0,
isLast: index === dots.length - 1,
left: ((normShift + index) % dots.length) * width
}));
}
export const Dots = ({ dots, shift }) => {
const data = useMemo(() => makeData(dots, shift, 25), [dots, shift]);
return (
<S.Container>
{data.map(({ key, left, children }) => (
<S.Dot key={key} left={left}>
{key}
</S.Dot>
))}
</S.Container>
);
};
<img src={getImage(el.id)} />
поместить в отдельный реактовский компонент, например, StorageImage. Далее возможны различные варианты в зависимости от того, что используется на проекте. Наиболее простой - useQuery - это обеспечит кэширование и обновление стейта из коробки, и все остальные детали, прям вот всё что нужно для данного кейса. const result = '{red}hello world{endRed}'.replace(/\{(?:end[A-Z][a-zA-Z]*|([a-z]+))\}/g,
(m, c) => c ? `<span style="color:${c}">` : `</span>`);
ctx.drawImage(img, ...); // рисование картинки на канве
const data = ctx.getImageData(0, 0, canvas.width, canvas.height); // пиксели картинки