labo-components/app/components/resourceviewer/mediaColumn/timeline/Layers.jsx

B&G UI components

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import debounce from "debounce";

import IDUtil from "../../../../util/IDUtil";

import Layer from "./Layer";
import { LayerPropTypes } from "./Layer";

// Render the given layers with a slight delay, so the UI has time to process the mouse interaction
export default class Layers extends React.Component {
    constructor(props) {
        super(props);

        this.lastUpdate = performance.now();
        this.maxUpdateTime = 250;

        // debounce the performUpdate function
        this.delayedUpdate = debounce(this.performUpdate, this.updateTime);
    }

    performUpdate() {
        this.lastUpdate = performance.now();
        this.forceUpdate();
    }

    shouldComponentUpdate(nextProps) {
        // get variable update time.
        const variableUpdateTime = Math.min(
            this.maxUpdateTime,
            Math.sqrt(nextProps.end - nextProps.start)
        );
        // always render after > variableUpdateTime
        if (performance.now() - this.lastUpdate > variableUpdateTime) {
            this.lastUpdate = performance.now();
            this.delayedUpdate.clear();
            return true;
        } else {
            // delayed update
            this.delayedUpdate();
        }
        return false;
    }

    render() {
        const {
            layers,
            start,
            end,
            pixelsPerSecond,
            activeLayerId,
            activeSectionId,
        } = this.props;

        // Get layers with sections in view
        return (
            <div
                className={IDUtil.cssClassName("tl-layers")}
                style={{
                    width: end * pixelsPerSecond,
                    transform: "translateX(" + -start * pixelsPerSecond + "px)",
                }}
            >
                {layers.map((layer) => (
                    <Layer
                        key={layer.id}
                        start={start}
                        end={end}
                        layer={layer}
                        pixelsPerSecond={pixelsPerSecond}
                        activeLayerId={activeLayerId}
                        activeSectionId={activeSectionId}
                        onSectionClick={this.props.onSectionClick}
                    />
                ))}
            </div>
        );
    }
}

export const LayersPropTypes = PropTypes.arrayOf(LayerPropTypes).isRequired;

Layers.propTypes = {
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
    pixelsPerSecond: PropTypes.number.isRequired,
    layers: LayersPropTypes,
    activeLayerId: PropTypes.number,
    activeSectionId: PropTypes.string,
    onSectionClick: PropTypes.func,
};