variabletime/bin/web/js/main.js

import {
    TheatrePlay
} from './theatre-play.js';

import {
    Layer
} from './layer.js';

import {
    Artboard
} from './artboard.js';

import {
    LayerOrder
} from './layerOrder.js';

import {
    Exporter
} from './exporter.js';

import {
    Interactor
} from './interactor.js';

import {
    ModuleFS
} from './moduleFS.js';

//import {
    //MidiController
//} from './midiController.js';

import {
    makeDraggable,
    getBaseName,
    uploadFile,
    downloadFile,
    hashFromString,
	clone,
    isMobile,
} from './utils.js';

import {
    Config
} from './config.js';

window.uploadFile = uploadFile;
window.downloadFile = downloadFile;
window.isInitialized = false;
window.hashFromString = hashFromString;

const config = new Config();
window.config = config;
const tp = new TheatrePlay();
window.tp = tp;
const layers = [];
const layersById = {};
const layerOrder = new LayerOrder();
window.layerOrder = layerOrder;
const fontsAndAxes = [];
let artboard;
const exporter = new Exporter();
const interactor = new Interactor();
const moduleFS = new ModuleFS();
window.moduleFS = moduleFS;

window.panelFinderTimeout = false;
const sequenceEventBuffer = {};

//const midiController = new MidiController();
//window.midiController = midiController;

let about = null;

const getAbout = () => {
    if (about === null) {
        about = document.querySelector('#overlay-text-cont');

        // should we succeed in getting about,
        // attach events. this happens then exactly once
        if (about !== null) {

            const textParents = getAbout().querySelectorAll(".textParent");

            textParents.forEach((textParent) => {
                const buttonExp = textParent.querySelector(".expandText");

                if (buttonExp === null) {
                    console.error("Could not find .expandText within .textParent");
                    return;
                }

                buttonExp.addEventListener("click", () => {
                    textParent.classList.toggle("openText");

                    if (textParent.classList.contains("openText")) {
                        buttonExp.textContent = "-";
                    } else {
                        buttonExp.textContent = "+";
                    }
                });
            });
        }
    }
    return about;
};

window.showAbout = () => {
    if (getAbout() === null) {
        return;
    }
    
    getAbout().classList.remove("hidden");
   
   
}
window.hideAbout = () => {
    if (getAbout() !== null) {
        getAbout().classList.add("hidden");
    }
}



let theatrePanel = null;
const getPanel = () => {
    if (theatrePanel === null) {
        theatrePanel = tp.shadowRoot.querySelector('[data-testid="DetailPanel-Object"]');
    }
    return theatrePanel;
};

const findInjectPanel = () => {
    const panel = getPanel();
    if (panel !== null) {
        let bottomButtonsContainer = panel.querySelector('.bottomButtonsContainer');
        if (bottomButtonsContainer === null) {
            bottomButtonsContainer = document.createElement('div');
            bottomButtonsContainer.classList.add("bottomButtonsContainer");
            panel.append(bottomButtonsContainer);
        }
        const exportButton = document.querySelector('#exporter_open');
        if (exportButton !== null) {
            bottomButtonsContainer.append(exportButton);
            exportButton.classList.add("main_panel_button");
        }
        const saveButton = document.querySelector('#save_project');
        if (saveButton !== null) {
            bottomButtonsContainer.append(saveButton);
            saveButton.classList.add("main_panel_button");
        }
        const openButton = document.querySelector('#open_project');
        if (openButton !== null) {
            bottomButtonsContainer.append(openButton);
            openButton.classList.add("main_panel_button");
        }
        const profilingButton = document.querySelector('#debug_profiling');
        if (profilingButton !== null) {
            bottomButtonsContainer.append(profilingButton);
            profilingButton.classList.add("main_panel_button");
        }
        const startNewButton = document.querySelector('#start_new_project');
        if (startNewButton !== null) {
            bottomButtonsContainer.append(startNewButton);
            startNewButton.classList.add("main_panel_button");
        }
    } else {
        setTimeout(() => {
            findInjectPanel();
        }, 100);
    }
};

window.onload = () => {
    if (isMobile()) {
        alert('Variable Time is a tool currently designed to be used on desktop.');
    }
    window.addEventListener('panelEvent', (e) => {
        clearTimeout(window.panelFinderTimeout);
        let target = false;
        if (e.detail.panelID === 'artboard') {
            target = artboard;
        } else if (layersById.hasOwnProperty(e.detail.panelID)) {
            target = layersById[e.detail.panelID];
        }

        if (target !== false &&
            typeof target !== 'undefined' &&
            target.hasOwnProperty('receivePanelEvent')) {
            target.receivePanelEvent(e);
        }
    });
    window.addEventListener('sequenceEvent', (e) => {
        let target = false;
        if (e.detail.panelID === 'artboard') {
            target = artboard;
        } else {
            target = layersById[e.detail.panelID];
        }
        if (target !== false &&
            typeof target !== 'undefined' &&
            target.hasOwnProperty('receiveSequenceEvent')) {
            target.receiveSequenceEvent(e.detail);
        } else {
            // whoops, no layers there yet
            // let's put this stuff in a buffer and forward it later
            if (!sequenceEventBuffer.hasOwnProperty(e.detail.panelID)) {
                sequenceEventBuffer[e.detail.panelID] = [];
            }
            sequenceEventBuffer[e.detail.panelID].push(e.detail);
        }
        tp.friendlySequenceNames();
    });

    window.setLoadingTask('setting up animation', 0);
    tp.init()
        .then(() => {
            const content = document.querySelector('#content');
            if (window.moduleInitialized) {
                postModuleInitialized();
            } else {
                window.addEventListener('initializedModule', postModuleInitialized);
            }
            tp.studio.onSelectionChange((newSelection) => {
                if (newSelection.length > 0) {
                    [getArtboard(), getLayers()].flat().forEach((e) => {
                        if (e.id() === newSelection[0].address.objectKey) {
                            if (e.id().indexOf('layer-') === 0) {
                                e.findInjectPanel();
                                e.showBoundingBoxDiv();
                                setTimeout(() => {
                                    e.hideBoundingBoxDiv();
                                }, 60);
                            } else if (e.id() === 'artboard') {
                                e.findInjectPanel();
                            }
                        }
                    });
                }
                findInjectPanel();
                tp.friendlySequenceNames();
            });
        });
    // ABOUT BEGIN
    var lettersAndLinks = document.querySelectorAll(".vt-title");
    lettersAndLinks.forEach(function(element) {
        element.innerHTML = element.innerHTML.replace(/\w+/g, '<span class="word">$&</span>');
        element.innerHTML = element.innerHTML.replace(/\*/g, '<span class="word">$&</span>');
    });

    var words = document.querySelectorAll(".word");
    words.forEach(function(element) {
        element.innerHTML = element.innerHTML.replace(/\S/g, '<span class="letter">$&</span>');
    });

    var letterElements = document.querySelectorAll(".letter");
    letterElements.forEach(function(element, index) {
        element.style.animationDelay = (index * -0.3) + "s";
    });
    // ABOUT END
}

const adjustPanel = () => {
    const VTTitle = tp.shadowRoot.querySelector(`.layerMovervariable-time`);
    if (VTTitle !== null) {
        var titleText = VTTitle.querySelectorAll("span");
        titleText.forEach((element, index) => {
            if (element.innerHTML == "variable-time") {
                element.innerHTML = "vt*";
                element.classList.add("vtTitle");
                element.innerHTML = element.innerHTML.replace(/\w+/g, '<span class="word">$&</span>');
                const wordElements = tp.shadowRoot.querySelectorAll(".word");
                wordElements.forEach(word => {
                    word.innerHTML = word.innerHTML.replace(/\S/g, '<span class="letter">$&</span>');
                    element.innerHTML = element.innerHTML.replace('*', '<span class="letter">$&</span>');
                });
                const letterElements = tp.shadowRoot.querySelectorAll(".letter");
                letterElements.forEach(letter => {
                    letter.style.fontVariationSettings = "'wght' " + Math.floor(Math.random() * (100 - 0 + 1) + 0) + ", 'wdth'" + Math.floor(Math.random() * (100 - 0 + 1) + 0) + ", 'opsz'" + Math.floor(Math.random() * (10 - 0 + 1) + 0);
                });
                element.addEventListener("mouseover", function() {
                    letterElements.forEach(letter => {
                        letter.style.fontVariationSettings = "'wght' " + Math.floor(Math.random() * (100 - 0 + 1) + 0) + ", 'wdth'" + Math.floor(Math.random() * (100 - 0 + 1) + 0) + ", 'opsz'" + Math.floor(Math.random() * (10 - 0 + 1) + 0);
                    });
                });
            }
        })
    }
}

const resize = () => {
    let width = document.body.clientWidth;
    let height = document.body.clientHeight;
    let ratio = window.devicePixelRatio ? window.devicePixelRatio : 1;
    Module.canvas.setAttribute('width', width * ratio);
    Module.canvas.setAttribute('height', height * ratio);
    Module.canvas.style.width = `${width}px}`;
    Module.canvas.style.height = `${height}px}`;
    Module.windowResized(Math.round(width * ratio), Math.round(height * ratio));
};

const postModuleInitialized = () => {
    window.setLoadingTask('setting up animation', 80);
    moduleFS.init()
        .then(() => {
            artboard = new Artboard(tp, content);
            initPanels();
            // NOTE: we know that our TheatrePlay is initialized
            tp.connectModuleCallbacks();
            exporter.init();
            getFontsAndAxes();
            tp.loadProject().then(() => {
                interactor.init();
                resize();
                adjustPanel();
                window.setLoadingTask('setting up animation', 100);
                window.isInitialized = true;
                window.setLoadingDone();
                window.autoSaveInterval = setInterval(() => {
                    if (config.autoSave && window.isInitialized) {
                        tp.saveProject();
                    }
                }, 1000);
            });
			//midiController.init();
        });
    window.removeEventListener('initializedModule', postModuleInitialized);
    window.addEventListener('resize', function(event) {
        resize();
    }, true);
};

const getFontsAndAxes = () => {
    return new Promise((resolve) => {
        const availableFontsAndAxes = listAvailableFontsAndAxes();
        const newFontsAndAxes = [];
        for (let i in availableFontsAndAxes) {
            if (!fontsAndAxes.includes(availableFontsAndAxes[i])) {
                // nevermind includes and test ourselves
                let reallyNew = true;
                fontsAndAxes.forEach((faa) => {
                    // path is enough
                    if (faa.fontPath === availableFontsAndAxes[i].fontPath) {
                        reallyNew = false;
                    }
                });
                if (reallyNew) {
                    fontsAndAxes.push(availableFontsAndAxes[i]);
                    newFontsAndAxes.push(availableFontsAndAxes[i]);
                }
            }
        }
        if (newFontsAndAxes.length > 0) {
            const promises = [];
            for (let l = 0; l < layers.length; l++) {
                layers[l].updateFonts()
                    .then(() => {
                        resolve(newFontsAndAxes);
                    });
            }
        } else {
            resolve(false);
        }
    });
};

const listAvailableFontsAndAxes = () => {
    let availableFontsAndAxes = [];
    let fontPaths = Module.listAvailableFonts();
    for (let f = 0; f < fontPaths.size(); f++) {
        const fontPath = fontPaths.get(f);
        const fontName = getBaseName(fontPath);
        const cppAxes = Module.listVariationAxes(fontPath);
        // turn cppAxes in normal js array of objects
        const axes = [];
        for (let a = 0; a < cppAxes.size(); a++) {
            let axis = {
                name: cppAxes.get(a).name,
                minValue: cppAxes.get(a).minValue,
                maxValue: cppAxes.get(a).maxValue,
                defaultValue: cppAxes.get(a).defaultValue
            };
            axes.push(axis);
        }
        availableFontsAndAxes.push({
            fontName,
            fontPath,
            axes
        });
    }
    return availableFontsAndAxes;
};

window.listAvailableFontsAndAxes = listAvailableFontsAndAxes;
window.getFontsAndAxes = getFontsAndAxes;

window.getLayers = () => {
    return layers;
};

window.moveLayerUp = (layerID) => {
    layerOrder.moveUp(layerID);
};

window.moveLayerDown = (layerID) => {
    layerOrder.moveDown(layerID);
};

window.getArtboard = () => {
    return artboard;
};

const addLayer = (autoInit = true) => {
    const layerID = Module.addNewLayer();
    const layer = new Layer(tp, layerID, fontsAndAxes, autoInit);
    layers.push(layer);
    layersById[layerID] = layer;
    return layer;
};

const addExistingLayer = (layerID, values) => {
    return new Promise((resolve) => {
        const layer = new Layer(tp, layerID, fontsAndAxes, false);
        // check if fonts exist?
        layer.valuesCorrector(values);
        const cppProps = layer.values2cppProps(values);
        const checkID = Module.addExistingLayer(cppProps, layerID);
        layer.init().then(() => {
            layers.push(layer);
            layersById[layerID] = layer;
            resolve(layer);
        });
    });
};

const duplicateLayer = (originalLayer) => {
    return new Promise((resolve) => {
    const originalValues = clone(originalLayer.theatreObject.value);
    const newLayer = addLayer(false);
    newLayer.init(originalValues).then(() => {
        const originalKeyframes = tp.getKeyframes(originalLayer);
        const addKeyframes = (e) => {
            const originalKeys = Object.keys(originalValues);
            const givenKeys = e.detail.titles;
            let allKeysFound = true;
            for (let i = 0; i < originalKeys.length; i++) {
                //const originalValue = originalValues[originalKeys[i]];
                if (givenKeys.indexOf(originalKeys[i]) < 0) {
                    //delete originalValues[originalKeys[i]];
                    allKeysFound = false;
                }
            };
            if (allKeysFound) {
                tp.getPanel().removeEventListener("injected", addKeyframes);
            }
            tp.addKeyframes(newLayer, originalKeyframes).then(() => {
                if (allKeysFound) {
                    resolve();
                };
            });
        };
        tp.getPanel().addEventListener("injected", addKeyframes);
        newLayer.select();
        //tp.shadowRoot.querySelector(`.layerMover${newLayer.id()} div`).click();
    });
    });
};

const deleteLayer = (id, saveProject = true) => {
    let index = -1;
    Module.removeLayer(id);
    tp.removeObject(id);
    layerOrder.remove(id);
    // delete from array
    for (let i = 0; i < layers.length; i++) {
        if (layers[i].id() === id) {
            index = i;
        }
    }
    layers[index].prepareForDepartureFromThisBeautifulExperience();
    layers.splice(index, 1);
    delete layersById[id];
    if (saveProject) {
        setTimeout(() => {
            tp.saveProject();
        }, 1000);
    }
};

// TODO: better function names
// because, come on. it may be funny for a second
// but tolerance for fun is low when you're grumpy
// because stuff doesn't work
const renderForReal = (position, frameTime) => {
    position = position + frameTime;
    tp.sheet.sequence.position = position;
    Module.renderNextFrame();
}

window.isRenderDirty = true;

window.duplicateLayer = (layer) => {
	const noticeDom = document.querySelector('#notice');
	noticeDom.classList.add('visible');
	noticeDom.querySelector('.what > p').innerHTML = `Duplicating Layer`;
	noticeDom.querySelector('.details > p').innerHTML = `Please wait, thank you.`;
	duplicateLayer(layer).then(() => {
		document.querySelector('#notice').classList.remove('visible');
	});
};
window.addLayer = addLayer;
window.addExistingLayer = addExistingLayer;
window.deleteLayer = deleteLayer;
window.renderFrames = exporter.renderFrames;

const layer_panel = document.querySelector('#layer_panel');

const initPanels = () => {
    //makeDraggable(layer_panel);
};