Function redraw

src/fitty.js:41–68

(fitties)

    // redraws fitties so they nicely fit their parent container
    const redraw = (fitties) => {
        // getting info from the DOM at this point should not trigger a reflow, let's gather as much intel as possible before triggering a reflow

        // check if styles of all fitties have been computed
        fitties
            .filter((f) => !f.styleComputed)
            .forEach((f) => {
                f.styleComputed = computeStyle(f);
            });

        // restyle elements that require pre-styling, this triggers a reflow, please try to prevent by adding CSS rules (see docs)
        fitties.filter(shouldPreStyle).forEach(applyStyle);

        // we now determine which fitties should be redrawn
        const fittiesToRedraw = fitties.filter(shouldRedraw);

        // we calculate final styles for these fitties
        fittiesToRedraw.forEach(calculateStyles);

        // now we apply the calculated styles from our previous loop
        fittiesToRedraw.forEach((f) => {
            applyStyle(f);
            markAsClean(f);
        });

        // now we dispatch events for all restyled fitties
        fittiesToRedraw.forEach(dispatchFitEvent);
    };

    const markAsClean = (f) => (f.dirty = DrawState.IDLE);