bin/web/js/config.js

@@ -91,7 +91,6 @@ const config = {
     },
     record: {
         ignoreProps: ['fontVariationAxes','letterDelays','color'],
-        recordMapped: true,
     },
     midi: {
         touchTimeThreshold_s: 0.5,

bin/web/js/main.js

@@ -188,6 +188,7 @@ window.onload = () => {
         alert('Sorry, Variable Time is a tool currently designed to be used on desktop!');
     }
     window.addEventListener('panelEvent', (e) => {
+        console.log('debug panelEvent received', e);
         clearTimeout(window.panelFinderTimeout);
         let target = false;
         if (e.detail.panelID === 'artboard') {
@@ -203,6 +204,7 @@ window.onload = () => {
         }
     });
     window.addEventListener('sequenceEvent', (e) => {
+        console.log('debug sequenceEvent received', e);
         let target = false;
         if (e.detail.panelID === 'artboard') {
             target = artboard;

bin/web/js/record.js

@@ -137,7 +137,7 @@ const Record = function(tp) {
         return hot.hasOwnProperty(layerID)
             && hot[layerID].hasOwnProperty(propTitle);
     };
-    const addHot = (layerID, propTitle) => {
+    const makeHot = (layerID, propTitle) => {
         if (!isHot(layerID, propTitle)) {
             if (!hot.hasOwnProperty(layerID)) {
                 hot[layerID] = {};
@@ -146,36 +146,11 @@ const Record = function(tp) {
                 recording: [],
             };
         }
-        buffy.register(layerID);
+        const button = tp
-        // handle UI only if layer is selected
+            .getPanelPropContainer(propTitle)
-        if (getLayer(layerID).isSelected()) {
+            .querySelector('.recordButton');
-            const button = tp
+        if (button !== null) {
-                .getPanelPropContainer(propTitle)
+            button.classList.add('active');
-                .querySelector('.recordButton');
-            if (button !== null) {
-                button.classList.add('active');
-            }
-        }
-    };
-    const removeHot = (layerID, propTitle) => {
-        if (isHot(layerID, propTitle)) {
-            delete hot[layerID][propTitle];
-        }
-        // what if it is the last prop in the layer
-        if (hot.hasOwnProperty(layerID)) {
-            if (Object.keys(hot[layerID]).length === 0) {
-                delete hot[layerID];
-                buffy.deregister(layerID);
-            }
-        }
-        // handle UI only if layer is selected
-        if (getLayer(layerID).isSelected()) {
-            const button = tp
-                .getPanelPropContainer(propTitle)
-                .querySelector('.recordButton');
-            if (button !== null) {
-                button.classList.remove('active');
-            }
         }
     };
     //const makeNotHot = (layerID, propTitle) => {
@@ -206,27 +181,21 @@ const Record = function(tp) {
                     if(isRecording) {
                         stopRecording();
                     } else {
-                        if (config.record.recordMapped) {
+                        Object.keys(audio.mapping)
-                            // make all mapped props hot and
+                            .forEach((layerID) => {
-                            Object.keys(audio.mapping)
+                            if (getLayer(layerID).isSelected()) {
-                                .forEach((layerID) => {
+                                Object.keys(audio.mapping[layerID])
-                                    if (getLayer(layerID).isSelected()) {
+                                    .forEach((propTitle) => {
-                                        Object.keys(audio.mapping[layerID])
+                                        makeHot(layerID, propTitle);
-                                            .forEach((propTitle) => {
-                                                addHot(layerID, propTitle);
-                                            });
-                                    }
                                 });
-                        } else {
+                                buffy.register(layerID);
-                            // only make this propTitle hot and
+                            }
-                            // register its layer for recording
+                        });
-                            addHot(layer.id(), propTitle);
-                        }
                         startRecording();
                     }
                 });
-                //console.log("Record::addRecordButton",
+                console.log("Record::addRecordButton",
-                    //`added a record button for ${propTitle}`);
+                    `added a record button for ${propTitle}`);
             }
         } else {
             console.log("Record::addRecordButton",
@@ -304,7 +273,6 @@ const Record = function(tp) {
     };
 
     const startRecording = () => {
-        console.log('Record::startRecording');
         tp.sheet.sequence.pause();
         const layerKeys = Object.keys(hot);
         layerKeys.forEach((layerID) => {
@@ -328,12 +296,11 @@ const Record = function(tp) {
                             [propTitle]: value,
                         };
                         buffy.addValues(layerID, recording, position, lastPosition);
-                        const merged = buffy.getValues(layerID, position);
+                        liveUpdater.immediateUpdate(layer, recording);
-                        liveUpdater.immediateUpdate(layer, merged);
                         lastPosition = position;
                     });
                 } else {
-                    console.log('Record::startRecording', `whoops input_clone for ${propTitle} is null`);
+                    console.log('whoops input_clone is null');
                 }
             });
             tp.sheet.sequence.position = 0;
@@ -343,7 +310,11 @@ const Record = function(tp) {
     };
     const stopRecording = () => {
         return new Promise((resolve) => {
+            console.log('stoprecording');
             const layerKeys = Object.keys(hot);
+            console.log('stopRecording', 'layerKeys', {
+                layerKeys
+            }, 'hot', JSON.stringify(hot));
             const promises = [];
             promises.push(() => {
                 return new Promise((subResolve) => {
@@ -358,19 +329,23 @@ const Record = function(tp) {
                 });
             });
             layerKeys.forEach((layerID) => {
+                console.log('stopRecording', layerID);
                 const layer = getLayer(layerID);
                 const propTitles = Object.keys(hot[layerID]);
                 const keyframes = [];
                 propTitles.forEach((propTitle) => {
+                    console.log('stopRecording', propTitle);
                     // NOTE: layerID is not actually used atm
                     // and should be the layer anyways
                     uncloneInput(layerID, propTitle);
+                    console.log('stopRecording', 'should have uncloned input for ' + propTitle);
                     keyframes.push({
                         path: [propTitle],
                         keyframes: hot[layerID][propTitle].recording,
                     });
                 });
                 //setTimeout(() => {
+                console.log('stopRecording', 'adding the keyframes now because we wnat it to happen right now please', keyframes);
                 promises.push(() => {
                     return new Promise((subResolve) => {
                         tp.setKeyframes(layer, keyframes).then(() => {
@@ -383,12 +358,17 @@ const Record = function(tp) {
             });
             sequencialPromises(promises, () => {
                 Object.keys(hot).forEach((layerID) => {
-                    Object.keys(hot[layerID]).forEach((propTitle) => {
-                        removeHot(layerID, propTitle);
-                    });
                     buffy.deregister(layerID);
+                    Object.keys(hot[layerID]).forEach((propTitle) => {
+                        delete hot[layerID][propTitle];
+                        if (Object.keys(hot[layerID]).length === 0) {
+                            delete hot[layerID];
+                        }
+                        const button = tp.getPanel().querySelector(`.recordButton${propTitle}`);
+                        button.classList.remove('active');
+                    });
                 });
-                console.log('Record::stopRecording', 'stopped recording');
+                console.log('stopRecording', 'absolutely stopped recording');
                 isRecording = false;
                 resolve();
             });
@@ -397,8 +377,6 @@ const Record = function(tp) {
 
     // public
     this.addRecordButton = addRecordButton;
-    this.addHot = addHot;
-    this.removeHot = removeHot;
     this.getHot = () => {
         return hot;
     };

bin/web/js/theatre-play.js

@@ -135,84 +135,48 @@ const TheatrePlay = function(autoInit = false) {
         return keyframes;
     };
     const getSequenceButton = (path) => {
-        let t = getPanelPropTitle(Array.isArray(path) ? path.join('.') : path);
+        let t = getPanelPropTitle(path.join('.'));
         if (t === null) {
             return null;
         }
         return t.parentElement.querySelector('[title="Sequence this prop"]');
     };
-    const isSequenced = (path) => {
-        return getSequenceButton(path) === null;
-    };
 
-    const setSequenced = (propTitle, sequenced, metaResolve = false) => {
+    const setSequenced = (propTitle, sequenced) => {
-        const f = (resolve) => {
+        return new Promise((resolve) => {
-            const propIsSequenced = isSequenced(propTitle);
+            const contextItem = sequenced ? 'sequence' : 'make static';
-            const somethingToDo = sequenced !== propIsSequenced;
+            const antiContextItem = sequenced ? 'make static' : 'sequence';
 
-            if (somethingToDo) {
+            const finishedSequencedEvent = (e) => {
-                const contextItem = sequenced ? 'sequence' : 'make static';
+                tp.getPanel().removeEventListener('injected', finishedSequencedEvent);
-                const antiContextItem = sequenced ? 'make static' : 'sequence';
+                console.log('debug FINISHED SEQUENCED EVENT', e, propTitle);
+                resolve(true);
+            };
 
-                const finishedSequencedEvent = (e) => {
+            const clickContextMenu = () => {
-                    // only care about events from our prop
+                let done = false;
-                    if (propTitle === e.detail.prop.join('.')) {
+                tp.getPanelPropTitle(propTitle).removeEventListener('contextmenu', clickContextMenu);
-                        // if we un-sequence, we listen to stateEditors' event
+                tp.shadowRoot.querySelectorAll('ul li span').forEach((s) => {
-                        if (!sequenced && e.detail.origin === 'stateEditors.ts' && e.detail.sequenced === sequenced) {
+                    if (s.innerHTML.toLowerCase() === contextItem.toLowerCase()) {
-                            window.removeEventListener('sequenceEvent', finishedSequencedEvent);
+                        tp.getPanel().addEventListener('injected', finishedSequencedEvent);
-                            resolve(true);
+                        s.click();
-
+                        console.log('debug click');
-                            // if we sequence, then we wait until the track is there
+                        done = true;
-                        } else if (sequenced && e.detail.origin === 'BasicKeyframedTrack.tsx' && e.detail.sequenced === sequenced) {
+                    } else if (s.innerHTML.toLowerCase() === antiContextItem.toLowerCase()) {
-                            window.removeEventListener('sequenceEvent', finishedSequencedEvent);
+                        done = true;
-                            resolve(true);
+                        resolve(false);
-                        } else {
-                            console.log('TheatrePlayu::setSequenced', 'ignored event', e, e.detail);
-                        }
                     }
-                };
+                });
+                if (!done) {
+                    setTimeout(() => {
+                        clickContextMenu();
+                    }, 100);
+                }
+            };
 
-                let counter = 0;
+            getPanelPropTitle(propTitle).addEventListener('contextmenu', clickContextMenu);
-                const clickContextMenu = (e) => {
+            getPanelPropTitle(propTitle).dispatchEvent(new Event('contextmenu'));
-                    let done = false;
+        });
-                    if (e.target !== null) {
-                        e.target.removeEventListener('contextmenu', clickContextMenu);
-                    }
-                    tp.shadowRoot.querySelectorAll('ul li span').forEach((s) => {
-                        if (s.innerHTML.toLowerCase() === contextItem.toLowerCase()) {
-                            window.addEventListener('sequenceEvent', finishedSequencedEvent);
-                            s.click();
-                            done = true;
-                        } else if (s.innerHTML.toLowerCase() === antiContextItem.toLowerCase()) {
-                            done = true;
-                            resolve(false);
-                        }
-                    });
-                    if (!done) {
-                        setTimeout(() => {
-                            if (counter < 4) {
-                                clickContextMenu(e);
-                                counter++;
-                            } else {
-                                setSequenced(propTitle, sequenced, resolve);
-                            }
-                        }, 100);
-                    }
-                };
-
-                getPanelPropTitle(propTitle).addEventListener('contextmenu', clickContextMenu);
-                getPanelPropTitle(propTitle).dispatchEvent(new Event('contextmenu'));
-            } else {
-                resolve();
-            }
-        };
-        if (!metaResolve) {
-            return new Promise((resolve) => {
-                f(resolve);
-            });
-        } else {
-            f(metaResolve);
-        }
     };
 
     const addKeyframes = (layer, keyframes) => {
@@ -223,53 +187,48 @@ const TheatrePlay = function(autoInit = false) {
             }
             const existingKeyframes = getKeyframes(layer);
             const promises = [];
-            const ms = 0; //config.tp.addKeyframesTimeout_s * 1000;
+            const ms =  0;//config.tp.addKeyframesTimeout_s * 1000;
             keyframes.forEach((k) => {
                 let prop = layer.theatreObject.props;
                 for (let i = 0; i < k.path.length; i++) {
                     prop = prop[k.path[i]];
                 }
                 const position = tp.sheet.sequence.position;
-                promises.push(() => {
+                // NOTE: can we sequence values without pretend clicking?
-                    return new Promise((subResolve) => {
+                const sequenceButton = getSequenceButton(k.path);
+                if (sequenceButton !== null) {
+                    promises.push(() => { return new Promise((subResolve) => {
                         setTimeout(() => {
-                            if (layer.isSelected()) {
+                            sequenceButton.click();
-                                setSequenced(k.path.join('.'), true)
+                            const detectSE = (e) => {
-                                    .then(() => {
+                                if (e.detail.panelID === layer.id()) {
+                                    window.removeEventListener('sequenceEvent',detectSE);
+                                    console.log('received sequenceEvent',e);
+                                    const f = (e) => {
+                                        tp.getPanel().removeEventListener('injected', f);
                                         subResolve();
-                                    });
+                                    };
-                            } else {
+                                    tp.getPanel().addEventListener('injected', f);
-                                // we cannot select layers without pseudoclicking
+                                }
-                                // so let's wait for a happy 'injected' event that
+                            };
-                                // closes off the selection
+                            window.addEventListener('sequenceEvent', detectSE);
-                                //
+                        }, ms);// * promises.length);
-                                // first, the listener callback
+                    })});
-                                const f = () => {
+                } else {
-                                    tp.getPanel().removeEventListener('injected', f);
+                    //console.error(k.path, 'did not find sequence button');
-                                    setSequenced(k.path.join('.'), true)
+					// is (probably) already sequenced
-                                        .then(() => {
-                                            subResolve();
-                                        });
-                                };
-                                // then add it
-                                tp.getPanel().addEventListener('injected', f);
-                                // and fire the click
-                                layer.select();
-                            }
-                        }, ms); // * promises.length);
-                    })
-                });
-                let propHasKeyframesAt = -1;
-                if (existingKeyframes !== null &&
-                    existingKeyframes !== false &&
-                    typeof existingKeyframes !== 'undefined' &&
-                    Array.isArray(existingKeyframes)) {
-                    existingKeyframes.forEach((existingK, existingKI) => {
-                        if (arraysEqual(k.path, existingK.path)) {
-                            propHasKeyframesAt = existingKI;
-                        }
-                    });
                 }
+                let propHasKeyframesAt = -1;
+				if (existingKeyframes !== null &&
+				    existingKeyframes !== false &&
+				    typeof existingKeyframes !== 'undefined' &&
+				    Array.isArray(existingKeyframes)) {
+				    existingKeyframes.forEach((existingK, existingKI) => {
+				        if (arraysEqual(k.path, existingK.path)) {
+				            propHasKeyframesAt = existingKI;
+				        }
+				    });
+				}
                 k.keyframes.forEach((keyframe) => {
                     let alreadyThere = false;
                     if (propHasKeyframesAt >= 0) {
@@ -281,33 +240,29 @@ const TheatrePlay = function(autoInit = false) {
                         });
                     }
                     if (!alreadyThere) {
-                        promises.push(() => {
+                        promises.push(() => { return new Promise((subResolve) => {
-                            return new Promise((subResolve) => {
+                            setTimeout(() => {
-                                setTimeout(() => {
+                                tp.sheet.sequence.position = keyframe.position;
-                                    tp.sheet.sequence.position = keyframe.position;
+                                this.studio.transaction(({
-                                    this.studio.transaction(({
+                                    set
-                                        set
+                                }) => {
-                                    }) => {
+                                    set(prop, keyframe.value);
-                                        set(prop, keyframe.value);
+                                	subResolve();
-                                        subResolve();
+                                });
-                                    });
+                            }, ms);// * promises.length);
-                                }, ms); // * promises.length);
+                        })});
-                            })
-                        });
                     }
                 });
-                promises.push(() => {
+                promises.push(() => { return new Promise((subResolve) => {
-                    return new Promise((subResolve) => {
+                    setTimeout(() => {
-                        setTimeout(() => {
+                        tp.sheet.sequence.position = position;
-                            tp.sheet.sequence.position = position;
+						subResolve();
-                            subResolve();
+                    }, ms);// * promises.length);
-                        }, ms); // * promises.length);
+                })});
-                    })
-                });
             });
             sequencialPromises(promises, resolve);
             //Promise.all(promises).then(() => {
-            //resolve();
+                //resolve();
             //});
         });
     };
@@ -318,28 +273,19 @@ const TheatrePlay = function(autoInit = false) {
                 return false;
             }
             const promises = [];
-            let waitify = false;
             keyframes.forEach((k) => {
-                const propTitle = k.path.join('.');
+                promises.push(new Promise((subResolve) => {
-                if (isSequenced(propTitle)) {
+                    const propTitle = k.path.join('.');
-                    waitify = true;
+                    setSequenced(propTitle, false)
-                    promises.push(() => {
+                        .then(subResolve);
-                        return new Promise((subResolve) => {
+                }));
-                            setSequenced(propTitle, false)
-                                .then(() => {
-                                    subResolve();
-                                });
-                        });
-                    });
-                }
             });
-            sequencialPromises(promises, () => {
+            Promise
-                const timeout_ms = waitify ? 1000 : 0;
+                .all(promises)
-                setTimeout(() => {
+                .then(() => {
                     addKeyframes(layer, keyframes)
                         .then(resolve);
-                }, timeout_ms);
+                });
-            });
         });
     };
 
@@ -412,8 +358,6 @@ const TheatrePlay = function(autoInit = false) {
         // remove object from objects list
         delete theatreObjects[name];
     };
-    this.isSequenced = isSequenced;
-    this.getSequenceButton = getSequenceButton;
     this.getSequencePanelLeft = getSequencePanelLeft;
     this.getPanel = getPanel;
     this.getPanelPropTitle = getPanelPropTitle;

bin/web/js/utils.js

@@ -395,21 +395,11 @@ const isMobile = () => {
     return false;
 };
 
-// NOTE:
-// promises must be delivered inside a function like:
-//
-// const promises = [];
-//
-// promises.push(() => { return new Promise((resolve) => { console.log('lalala ONE'); resolve() }); });
-// promises.push(() => { return new Promise((resolve) => { console.log('lalala TWO'); resolve() }); });
-// promises.push(() => { return new Promise((resolve) => { console.log('lalala THREE'); resolve() }); });
-//
-// sequencialPromises(promises, () => { console.log('i am done'); });
 const sequencialPromises = async (iterable, callback = false) => {
     for (const x of iterable) {
         await x();
     }
-    if (typeof callback === 'function') {
+    if (callback !== false) {
         callback();
     }
 };