variabletime/bin/web/js/artboard.js

import {
    makeEven,
    mapValue,
} from './utils.js';

const Artboard = function(tp, domElement = false, autoInit = true) {
    //private
    let animationFrameId = false;
    let width = window.innerWidth;
    let height = window.innerHeight;
    let x = 0;
    let y = 0;
    let props = {
        color: tp.core.types.rgba({
            r: 74,
            g: 94,
            b: 181,
            a: 1
        }),
        x: tp.core.types.number(x),
        y: tp.core.types.number(y),
        width: tp.core.types.number(width),
        height: tp.core.types.number(height),
        zoom: tp.core.types.number(1, {
            range: [config.artboard.minimumZoom, config.artboard.maximumZoom],
            nudgeMultiplier: config.artboard.incrementZoom
        }),
        pixelDensity: tp.core.types.number(1.0, {
            range: [config.artboard.incrementPixelDensity, config.artboard.maximumPixelDensity],
            nudgeMultiplier: config.artboard.incrementPixelDensity
        }),
    };
    const onValuesChange = (values) => {
        window.isRenderDirty = true;
        //window.cancelAnimationFrame(animationFrameId);
        //animationFrameId = window.requestAnimationFrame(() => {
            //domElement.style.backgroundColor = `${values.backgroundColor.toString()}`;
        //});
        // backward compatibility
        if (values.zoom < config.artboard.minimumZoom) {
            values.zoom = config.artboard.minimumZoom;
        }
        // makes sure that the number
        // is both integer and even
        //let makeEven = (n) => {
            //let nr = Math.round(n);
            //return nr - nr % 2;
        //}
        values.width = makeEven(values.width);
        values.height = makeEven(values.height);
        // We are absolutely aware that swearwords in code
        // can be considered unprofessional bad practice, but
        // (smiley) fuck this:
        //const nw = makeRight(values.width);
        //const nh = makeRight(values.height);
        //const np = [];
        //if (nw !== values.width) {
            //values.width = nw;
            //np.push({'key': 'width', 'value': nw});
        //}
        //if (nh !== values.height) {
            //values.height = nh;
            //np.push({'key': 'height', 'value': nh});
        //}
        //if (np.length > 0 && typeof this.theatreObject !== 'undefined') {
            //tp.studio.transaction(({
                //set
            //}) => {
                //np.forEach((e) => {
                    //set(this.theatreObject.props[e.key], e.value);
                //});
            //});
        let cppProps = props2cppProps(values);
        Module.setArtboardProps(cppProps);
    };
    const init = () => {
        props.width.default = width;
        props.height.default = height;

        if (window.devicePixelRatio > 1) {
            const pixelDensity = mapValue(window.devicePixelRatio, 1, 2, 1, 1.4);
            const zoom = pixelDensity;
            props.pixelDensity.default = pixelDensity;
            props.zoom.default = zoom;
        }

        //this.theatreObject = tp.addObject('artboard', this.props, this.onValuesChange);
        this.theatreObject = tp.addObject('artboard', this.props, this.onValuesChange);
        tp.studio.transaction(({
            set
        }) => {
            set(this.theatreObject.props, this.theatreObject.value);
        });

        //tp.studio.transaction(({ set }) => {
          //set(this.theatreObject.props.width, width);
          //set(this.theatreObject.props.height, height);
        //});

    };
    const props2cppProps = (_props) => {
        let cppProps = JSON.parse(JSON.stringify(_props));
        let bgIsArray = Array.isArray(cppProps.color);
        if (bgIsArray && cppProps.color.length === 4) {
            cppProps.backgroundColor = cppProps.color;
            delete cppProps.color;
            // nothing to do
        } else if (!bgIsArray && cppProps.color.hasOwnProperty('r')) {
            cppProps.backgroundColor = [
                cppProps.color.r,
                cppProps.color.g,
                cppProps.color.b,
                cppProps.color.a
            ];
            delete cppProps.color;
        } else if (!bgIsArray && cppProps.color.default.hasOwnProperty('r')) {
            cppProps.backgroundColor = [
                cppProps.color.default.r,
                cppProps.color.default.g,
                cppProps.color.default.b,
                cppProps.color.default.a
            ];
            delete cppProps.color;
        } else {
            console.error('js::artboard::props2cppProps', 'color could not be translated');
        }
        return cppProps;
    };
    this.values2cppProps = props2cppProps;

    // public
    this.props = props;
    this.onValuesChange = onValuesChange;
    this.init = init;
    let panelFinderTimeout = false;
    this.findInjectPanel = () => {
        let doItAgain = true;
        if (tp.studio.selection.length === 0 || (tp.studio.selection.length > 0 && tp.studio.selection[0].address.objectKey !== this.id())) {
            // do it again
        } else {
            const panel = tp.getPanel();
            if (panel !== null) {
                tp.setPanelClasses();
                // adjust label text from unfriendly to friendly
                Object.keys(config.artboard.friendlyNames).forEach((unfriendlyName) => {
                    const friendlyName = config.artboard.friendlyNames[unfriendlyName];
                    const panelPropTitle = tp.getPanelPropTitle(unfriendlyName);
                    if (panelPropTitle !== null &&
                        friendlyName !== '') {
                        panelPropTitle.innerHTML = friendlyName;
                    }
                });
                // should we have an audio object, let's inject the buttons, etc
                if (typeof audio === 'object' && audio.hasOwnProperty('injectPanel')) {
                    audio.injectPanel(this);
                } else {
                    console.log('Artboard::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`);
                }
                doItAgain = false;
            }
        }
        if (doItAgain) {
            clearTimeout(panelFinderTimeout);
            panelFinderTimeout = setTimeout(() => {
                this.findInjectPanel();
            }, 30);
            window.artboardPanelFinderTimeout = panelFinderTimeout;
        }
    };
    this.id = ()=> {
        return 'artboard';
    };
    this.hide = () => {
        // nothing to do
    };

    // action
    if (typeof domElement !== 'object') {
        console.error('whoops, please pass a domElement to Artboard');
    }
    if (autoInit) {
        this.init();
    }
};

export {
    Artboard
}