so much faster keyframe adding

assets/template.html

@@ -568,7 +568,13 @@
  <!-- EXPORT BEGIN -->
   <script id="ffmpeg.min.js" type="application/javascript" src="/web/ffmpeg_modules/ffmpeg.min.js"></script>
   <!-- EXPORT END -->
-
+    <script> const process = {
+            env: {
+                NODE_ENV: 'production'
+            }
+        };
+    </script>
+  <!--<script id="core-and-studio.min.js" type="application/javascript" src="/web/theatre_modules/core-and-studio.js"></script>-->
     <script type="module" src="/web/js/main.js"> </script>
   </body>
 </html>

bin/em/variabletime/web/js/artboard.js

@@ -102,7 +102,7 @@ const Artboard = function(tp, domElement = false, autoInit = true) {
         let cppProps = JSON.parse(JSON.stringify(_props));
         let bgIsArray = Array.isArray(cppProps.color);
         if (bgIsArray && cppProps.color.length === 4) {
-            cppProps.backgroundColor = color;
+            cppProps.backgroundColor = cppProps.color;
             delete cppProps.color;
             // nothing to do
         } else if (!bgIsArray && cppProps.color.hasOwnProperty('r')) {

bin/em/variabletime/web/js/audio.js

@@ -659,7 +659,6 @@ const Audio = function(tp, record) {
     };
 
     const injectPanel = (layer) => {
-        console.log('injecting panel');
         const flatValues = clone(layer.theatreObject.value);
         flattenObject(flatValues, ['color']);
         const layerType = layer.id().split('-')[0];
@@ -838,7 +837,6 @@ const Audio = function(tp, record) {
 
             // Main block for doing the audio recording
             if (navigator.mediaDevices.getUserMedia) {
-                console.log("getUserMedia supported.");
                 const constraints = {
                     audio: true
                 };

bin/em/variabletime/web/js/config.js

@@ -115,7 +115,7 @@ const config = {
         rolloverResetLoop: true,
     },
     record: {
-        active: false,
+        active: true,
         ignoreProps: {
             artboard: ['x', 'y', 'zoom', 'pixelDensity', 'width', 'height'],
             layer: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],

bin/em/variabletime/web/js/exporter.js

@@ -200,7 +200,12 @@ const Exporter = function() {
     };
 
     const updateArtboardOptions = () => {
-        options.artboard = {...options.artboard, ...Module.getArtboardProps()};
+        const artboardValues = clone(Module.getArtboardProps());
+        if (typeof artboardValues.backgroundColor === 'object') {
+            artboardValues.color = artboardValues.backgroundColor;
+            delete artboardValues.backgroundColor;
+        }
+        options.artboard = {...options.artboard, ...artboardValues};
         //options.artboard.width = getArtboard().theatreObject.value.width;
         //options.artboard.height = getArtboard().theatreObject.value.height;
         options.artboard.pixelDensity = getArtboard().theatreObject.value.pixelDensity;
@@ -218,6 +223,10 @@ const Exporter = function() {
 
     const setArtboardPropsToRenderDimensions = () => {
         const artboardValues = clone(options.artboard);//{...options.artboard, ...renderDimensions};
+        if (typeof artboardValues.backgroundColor === 'object') {
+            artboardValues.color = artboardValues.backgroundColor;
+            delete artboardValues.backgroundColor;
+        }
         const densityRatio = renderDimensions.width / options.artboard.width;
         //artboardValues.pixelDensity *= densityRatio; 
         artboardValues.pixelDensity = densityRatio;
@@ -227,6 +236,10 @@ const Exporter = function() {
             || currentArtboardValues.height !== artboardCppProps.height
             || currentArtboardValues.pixelDensity !== artboardCppProps.pixelDensity) {
             window.isRenderDirty = true;
+            if (typeof artboardCppProps.color === 'object') {
+                artboardCppProps.backgroundColor = artboardCppProps.color;
+                delete artboardCppProps.color;
+            }
             Module.setArtboardProps(artboardCppProps);
         }
         Module.setTimeScale(renderDimensions.timeScale);

bin/em/variabletime/web/js/layer.js

@@ -376,11 +376,13 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
     };
     this.init = (initialValues = false) => {
         return new Promise((resolve) => {
+            console.log('this is happening','layer init');
             const promises = [];
             promises.push(this.findInjectHierarchyPanelPromise());
             const doUpdateTheatre = false;
             this.updateFonts(doUpdateTheatre)
                 .then(() => {
+                console.log('this is happening','layer init update fonts');
                     this.theatreObject = tp.addObject(this.id(), this.props, this.onValuesChange);
                     if (typeof initialValues === 'object') {
                         this.theatreObject.initialValue = initialValues;
@@ -388,14 +390,19 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                     window.layerOrder.add(this.id());
                     setTimeout(() => {
                         const values = JSON.parse(JSON.stringify(this.theatreObject.value));
+                console.log('this is happening','doing the transaction');
                         tp.studio.transaction(({
                             set
                         }) => {
                             set(this.theatreObject.props, values);
                         });
+                console.log('this is happening','has have been doing the transaction');
                         setTimeout(() => {
-                            promises.push(this.findInjectPanelPromise);
+                            console.log('this is happening');
+                            promises.push(this.findInjectPanelPromise());
+                            console.log(promises);
                             Promise.allSettled(promises).then(() => {
+                                console.log('this is happening');
                                 resolve();
                                 if (config.autoSave && window.isInitialized) {
                                     tp.saveProject();
@@ -461,6 +468,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
         }
         if (doItAgain) {
             hierarchyPanelFinderTimeout = setTimeout(() => {
+                console.log('hierachrypanelfinder');
                 this.findInjectHierarchyPanel(resolve);
             }, 30);
             window.hierarchyPanelFinderTimeout = hierarchyPanelFinderTimeout;
@@ -512,11 +520,19 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
     let panelFinderTimeout = false;
     this.findInjectPanelPromise = () => {
         return new Promise((resolve) => {
+            console.log('this is happening', 'finInjectPanelPRomisE');
             this.findInjectPanel(resolve);
         });
     };
     this.findInjectPanel = (resolve = false) => {
         if (tp.studio.selection.length === 0 || (tp.studio.selection.length > 0 && tp.studio.selection[0].address.objectKey !== this.id())) {
+            console.log('this is happening', 'finInjectPanel DOES NOT RESOLVE HAHAHAHA');
+            if (typeof resolve === 'function') {
+                console.log('this is happening', 'resolver');
+                resolve();
+            }
+            console.log('this is happening', 'was resolved?');
+
             return;
         } else {
             const panel = tp.getPanel();
@@ -788,7 +804,6 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             bottomButtonsContainer.append(addFontButton);
                         }
 
-
                         doItAgain = false;
                         clearTimeout(panelFinderTimeout);
                         panelFinderTimeout = false;

bin/em/variabletime/web/js/main.js

@@ -323,16 +323,20 @@ const resize = () => {
 };
 
 const postModuleInitialized = () => {
+            console.log('this is happening');
     window.setLoadingTask('setting up animation', 80);
     moduleFS.init()
         .then(() => {
+            console.log('this is happening');
             artboard = new Artboard(tp, content);
             initPanels();
             // NOTE: we know that our TheatrePlay is initialized
             tp.connectModuleCallbacks();
             exporter.init();
             getFontsAndAxes();
+            console.log('this is happening');
             tp.loadProject().then(() => {
+            console.log('this is happening');
                 interactor.init();
                 resize();
                 adjustPanel();
@@ -344,6 +348,7 @@ const postModuleInitialized = () => {
                         tp.saveProject();
                     }
                 }, 1000);
+            console.log('this is happening');
             });
 			//midiController.init();
         });
@@ -425,7 +430,7 @@ window.getLayers = () => {
     return layers;
 };
 
-window.getLayer = (layerID) => {
+window.getLayer = (layerID = tp.studio.selection[0].address.objectKey) => {
     if (layerID === 'artboard') {
         return artboard;
     } else {
@@ -456,7 +461,9 @@ const addExistingLayer = (layerID, values) => {
         layer.valuesCorrector(values);
         const cppProps = layer.values2cppProps(values);
         const checkID = Module.addExistingLayer(cppProps, layerID);
+            console.log('this is happening');
         layer.init().then(() => {
+            console.log('this is happening');
             layers.push(layer);
             layersById[layerID] = layer;
             resolve(layer);
@@ -603,5 +610,4 @@ const initPanels = () => {
             });
         });
     }
-    
 };

bin/em/variabletime/web/js/record.js

@@ -431,7 +431,7 @@ const Record = function(tp) {
                     console.log('Record::startRecording', `whoops input_clone for ${propTitle} is null`);
                 }
             });
-            tp.sheet.sequence.position = 0;
+            //tp.sheet.sequence.position = 0;
             tp.sheet.sequence.play();
         });
         isRecording = RECORDING;
@@ -502,7 +502,7 @@ const Record = function(tp) {
                 const kf  = clone(keyframes);
                 promises.push(() => {
                     return new Promise((subResolve) => {
-                        tp.setKeyframes(layer, keyframes).then(() => {
+                        tp.addKeyframes(layer, keyframes).then(() => {
                             layer.updateValuesViaTheatre(true);
                             subResolve();
                         });

bin/em/variabletime/web/js/theatre-play.js

@@ -8,6 +8,7 @@ import {
     getParents,
     arraysEqual,
     sequencialPromises,
+    getNestedProperty,
 } from './utils.js';
 
 //import {
@@ -141,177 +142,90 @@ const TheatrePlay = function(autoInit = false) {
         }
         return t.parentElement.querySelector('[title="Sequence this prop"]');
     };
-    const isSequenced = (path) => {
-        return getSequenceButton(path) === null;
-    };
-
-    const setSequenced = (propTitle, sequenced, metaResolve = false) => {
-        const f = (resolve) => {
-            const propIsSequenced = isSequenced(propTitle);
-            const somethingToDo = sequenced !== propIsSequenced;
-
-            if (somethingToDo) {
-                const contextItem = sequenced ? 'sequence' : 'make static';
-                const antiContextItem = sequenced ? 'make static' : 'sequence';
-
-                const finishedSequencedEvent = (e) => {
-                    // only care about events from our prop
-                    if (propTitle === e.detail.prop.join('.')) {
-                        // if we un-sequence, we listen to stateEditors' event
-                        if (!sequenced && e.detail.origin === 'stateEditors.ts' && e.detail.sequenced === sequenced) {
-                            window.removeEventListener('sequenceEvent', finishedSequencedEvent);
-                            resolve(true);
-
-                            // if we sequence, then we wait until the track is there
-                        } else if (sequenced && e.detail.origin === 'BasicKeyframedTrack.tsx' && e.detail.sequenced === sequenced) {
-                            window.removeEventListener('sequenceEvent', finishedSequencedEvent);
-                            resolve(true);
-                        } else {
-                            // pretty verbose
-                            //console.log('TheatrePlayu::setSequenced', 'ignored event', e, e.detail);
-                        }
-                    }
-                };
-
-                let counter = 0;
-                const clickContextMenu = (e) => {
-                    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 isSequenced = (path, layer = getLayer()) => {
+        if (!Array.isArray(path)) {
+            path = path.split('.');
         }
+        const prop = getNestedProperty(layer.theatreObject.props, path);
+        return studio.__experimental.__experimental_isPropSequenced(prop);
+        // is this better than this?
+        //return getSequenceButton(path) === null;
     };
 
+    const setSequenced = (path, sequenced = true, layer = getLayer()) => {
+        if (!Array.isArray(path)) {
+            path = path.split('.');
+        }
+        return new Promise((resolve) => {
+            if(isSequenced(path, layer) === sequenced) {
+                resolve(true);
+            } else {
+                const prop = getNestedProperty(layer.theatreObject.props, path);
+                if (sequenced) {
+                    tp.studio.__experimental.__experimental_setPropAsSequenced(prop);
+                } else {
+                    tp.studio.__experimental.__experimental_setPropAsStatic(prop);
+                }
+                let count = 0;
+                const interval = setInterval(() => {
+                    if (isSequenced(path, layer) === sequenced) {
+                        clearInterval(interval);
+                        resolve(true);
+                    } else if (count >= 10) {
+                        clearInterval(interval);
+                        resolve(false);
+                    }
+                    count++;
+                }, 10);
+            }
+        });
+    };
+
+    /*
+     * layer = getLayer()
+     * keyframes = [
+     *  {
+     *   path: ['fontVariationAxes','Weight'],
+     *   keyframes: [
+     *                {
+     *                  "id": "yHFP-HCINm", // not sure if used when sent back
+     *                  "position": 0,
+     *                  "connectedRight": true, // optional
+     *                  "handles": [ 0.5, 1, 0.5, 0 ], // optional
+     *                  "type": "bezier", // optional
+     *                  "value": 200
+     *                }, ...
+     *              ]
+     *  }, ...
+     * ]
+     */
     const addKeyframes = (layer, keyframes) => {
         return new Promise((resolve) => {
-            if (!Array.isArray(keyframes)) {
-                resolve(false);
-                return false;
-            }
-            const existingKeyframes = getKeyframes(layer);
             const promises = [];
-            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(() => {
                     return new Promise((subResolve) => {
-                        setTimeout(() => {
-                            if (layer.isSelected()) {
-                                setSequenced(k.path.join('.'), true)
-                                    .then(() => {
-                                        subResolve();
-                                    });
-                            } else {
-                                // we cannot select layers without pseudoclicking
-                                // so let's wait for a happy 'injected' event that
-                                // closes off the selection
-                                //
-                                // first, the listener callback
-                                const f = () => {
-                                    tp.getPanel().removeEventListener('injected', f);
-                                    setSequenced(k.path.join('.'), true)
-                                        .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 prop = layer.theatreObject.props;
+                        for (let i = 0; i < k.path.length; i++) {
+                            prop = prop[k.path[i]];
                         }
-                    });
-                }
-                k.keyframes.forEach((keyframe) => {
-                    let alreadyThere = false;
-                    if (propHasKeyframesAt >= 0) {
-                        existingKeyframes[propHasKeyframesAt].keyframes.forEach((kf) => {
-                            if (keyframe.position === kf.position &&
-                                keyframe.value === kf.value) {
-                                alreadyThere = true;
-                            }
-                        });
-                    }
-                    if (!alreadyThere) {
-                        promises.push(() => {
-                            return new Promise((subResolve) => {
-                                setTimeout(() => {
-                                    tp.sheet.sequence.position = keyframe.position;
-                                    this.studio.transaction(({
-                                        set
-                                    }) => {
-                                        set(prop, keyframe.value);
-                                        subResolve();
-                                    });
-                                }, ms); // * promises.length);
-                            })
-                        });
-                    }
-                });
-                promises.push(() => {
-                    return new Promise((subResolve) => {
-                        setTimeout(() => {
-                            tp.sheet.sequence.position = position;
+                        setSequenced(k.path, true, layer).then(() => {
+                            tp.studio.transaction(({
+                                __experimental_addKeyframes
+                            }) => {
+                                __experimental_addKeyframes(prop, k.keyframes);
+                            });
                             subResolve();
-                        }, ms); // * promises.length);
-                    })
+                        });
+                    });
                 });
             });
             sequencialPromises(promises, resolve);
-            //Promise.all(promises).then(() => {
-            //resolve();
-            //});
         });
     };
+
+    // NOTE: instead of setting proptitle static and then sequenced again,
+    // we could simply delete all keyframes. but hey, pfff...
     const setKeyframes = (layer, keyframes) => {
         return new Promise((resolve) => {
             if (!Array.isArray(keyframes)) {
@@ -1280,7 +1194,6 @@ const TheatrePlay = function(autoInit = false) {
                         window.project_fontsHashMap = project.fontsHashMap;
                         layerPromises.push(window.addExistingLayer(layerId, objects[layerId]));
                     });
-
                 Promise.all(layerPromises).then(() => {
                     window.layerOrder.set(project.layerOrder);
                     this.duration = this.core.val(this.sheet.sequence.pointer.length);

bin/em/variabletime/web/js/utils.js

@@ -472,6 +472,18 @@ const deFlattenObject = (o, ignoreKeys = [], pathSymbol = '.') => {
     });
 };
 
+const getNestedProperty = (o, a, verify = false) => {
+  if (verify && (!Array.isArray(a) || typeof o !== "object" || !o.hasOwnProperty(a[0]))) {
+    return false;
+  }
+  let b = clone(a);
+  if (b.length > 1) {
+    o = o[b.shift()];
+    return getNestedProperty(o, b, verify);
+  }
+  return o[b[0]];
+};
+
 /////////////////////////////////////
 // you can test these functions in
 // the browser like so:
@@ -507,4 +519,5 @@ export {
     renameProperty,
     flattenObject,
     deFlattenObject,
+    getNestedProperty,
 }

bin/em/variabletime/web/theatre_modules/core-and-studio.js

@@ -38466,6 +38466,7 @@ Instead found: ${devStringify(butFoundInstead)}` : "";
           callback: () => {
             getStudio().transaction(({ stateEditors: stateEditors2 }) => {
               const propAddress = __spreadProps(__spreadValues({}, obj.address), { pathToProp });
+              console.log({ propConfig, propAddress });
               stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
             });
           }
@@ -38828,7 +38829,7 @@ Instead found: ${devStringify(butFoundInstead)}` : "";
   padding: 0 0px 0 0px;
   box-sizing: border-box;
   height: 100%;
-  width: 42%;
+  width: 50%;
   flex-shrink: 0;
   flex-grow: 0;
   padding-bottom: 4px;
@@ -44630,7 +44631,7 @@ ${content}</tr>
   right: 0px;
   top: 0px;
   // Temporary, see comment about CSS grid in SingleRowPropEditor.
-  width: 305px;
+  width: 280px;
   height: 100vh;
   z-index: ${panelZIndexes.propsPanel};
   backdrop-filter: blur(2px);
@@ -61770,6 +61771,7 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
                 detail: toVT
               });
               window.dispatchEvent(event);
+              console.log({ toVT, p: p3 });
             }
             sequence2.setPrimitivePropAsSequenced = setPrimitivePropAsSequenced;
             function setPrimitivePropAsStatic(p3) {
@@ -61808,8 +61810,52 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
                 }
               }
               stateEditors2.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfCompoundProp(p3);
+              const toVT = {
+                sequenced: false,
+                panelID: p3.objectKey,
+                prop: p3.pathToProp,
+                origin: "stateEditors.ts"
+              };
+              const event = new CustomEvent("sequenceEvent", {
+                bubbles: false,
+                detail: toVT
+              });
+              window.dispatchEvent(event);
             }
             sequence2.setCompoundPropAsStatic = setCompoundPropAsStatic;
+            function setCompoundPropAsSequenced(p3) {
+              const tracks = _ensureTracksOfObject(p3);
+              for (const encodedPropPath of Object.keys(tracks.trackIdByPropPath)) {
+                const propPath = JSON.parse(encodedPropPath);
+                const isSubOfTargetPath = p3.pathToProp.every((key, i3) => propPath[i3] === key);
+                if (isSubOfTargetPath) {
+                  const possibleTrackId = tracks.trackIdByPropPath[encodedPropPath];
+                  if (typeof possibleTrackId === "string")
+                    return;
+                  const trackId = generateSequenceTrackId();
+                  const track = {
+                    type: "BasicKeyframedTrack",
+                    __debugName: `${p3.objectKey}:${encodedPropPath}`,
+                    keyframes: []
+                  };
+                  tracks.trackData[trackId] = track;
+                  tracks.trackIdByPropPath[encodedPropPath] = trackId;
+                  console.log({ trackId, encodedPropPath });
+                }
+              }
+              const toVT = {
+                sequenced: false,
+                panelID: p3.objectKey,
+                prop: p3.pathToProp,
+                origin: "stateEditors.ts"
+              };
+              const event = new CustomEvent("sequenceEvent", {
+                bubbles: false,
+                detail: toVT
+              });
+              window.dispatchEvent(event);
+            }
+            sequence2.setCompoundPropAsSequenced = setCompoundPropAsSequenced;
             function _getTrack(p3) {
               return _ensureTracksOfObject(p3).trackData[p3.trackId];
             }
@@ -61933,6 +61979,51 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
               }
             }
             sequence2.setHandlesForKeyframe = setHandlesForKeyframe;
+            function addKeyframes(p3, override = true) {
+              const track = _getTrack(p3);
+              if (!track)
+                return;
+              if (p3.keyframes.length < 1)
+                throw new Error("holy shit, you are trying to add non-existing keyframes");
+              if (!override)
+                throw new Error("whoopsie, not overriding is not implemented");
+              const oldKeyframes = track.keyframes;
+              track.keyframes = [];
+              oldKeyframes.forEach((kf) => {
+                if (p3.keyframes[0].position > kf.position) {
+                  track.keyframes.push(kf);
+                }
+              });
+              p3.keyframes.forEach((pkf) => {
+                track.keyframes.push({
+                  id: generateKeyframeId(),
+                  position: pkf.position,
+                  connectedRight: true,
+                  handles: pkf.handles || [0.5, 1, 0.5, 0],
+                  type: pkf.type || "bezier",
+                  value: pkf.value
+                });
+              });
+              oldKeyframes.forEach((kf) => {
+                if (p3.keyframes[p3.keyframes.length - 1].position < kf.position) {
+                  track.keyframes.push(kf);
+                }
+              });
+            }
+            sequence2.addKeyframes = addKeyframes;
+            function keepKeyframes(p3) {
+              const track = _getTrack(p3);
+              if (!track)
+                return;
+              const keyframes = track.keyframes;
+              track.keyframes = [];
+              keyframes.forEach((kf) => {
+                if (p3.keyframeIds.indexOf(kf.id) >= 0) {
+                  track.keyframes.push(kf);
+                }
+              });
+            }
+            sequence2.keepKeyframes = keepKeyframes;
             function deleteKeyframes(p3) {
               const track = _getTrack(p3);
               if (!track)
@@ -62525,7 +62616,12 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
   };
 
   // ../../theatre/studio/src/TheatreStudio.ts
+  init_get();
   init_src();
+  init_utils2();
+  init_pointerDeep();
+  init_forEachDeep();
+  init_getDeep();
   init_instanceTypes();
   init_selectors();
   init_getStudio();
@@ -62560,6 +62656,61 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
         },
         __experimental_createContentOfSaveFileTyped(projectId) {
           return getStudio().createContentOfSaveFile(projectId);
+        },
+        __experimental_setPropAsSequenced(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (typeof propConfig !== "undefined")
+            getStudio().transaction(({ stateEditors: stateEditors2 }) => {
+              stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
+              console.log("inner setPropAsSequenced", performance.now());
+            });
+        },
+        __experimental_setPropAsStatic(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (typeof propConfig !== "undefined") {
+            for (const { path: subPath, conf } of iteratePropType(propConfig, [])) {
+              if (isPropConfigComposite(conf))
+                continue;
+              getStudio().transaction(({ stateEditors: stateEditors2 }) => {
+                const pointerToSub = pointerDeep(prop, subPath);
+                stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic(__spreadProps(__spreadValues({}, propAddress), {
+                  value: root3.getValueByPointer(pointerToSub)
+                }));
+              });
+            }
+          }
+        },
+        __experimental_isPropSequenced(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          const validTracks = root3.template.getArrayOfValidSequenceTracks().getValue();
+          tf:
+            for (let t4 = 0; t4 < validTracks.length; t4++) {
+              const otherPath = validTracks[t4].pathToProp;
+              if (otherPath.length === path.length) {
+                for (let p3 = 0; p3 < path.length; p3++) {
+                  if (path[p3] !== otherPath[p3]) {
+                    continue tf;
+                  }
+                }
+                return true;
+              }
+            }
+          return false;
         }
       });
     }
@@ -62584,11 +62735,132 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
           }
           stateEditors2.coreByProject.historic.sheetsById.forgetSheet(sheet.address);
         };
+        const __experimental_sequenceProp = (prop) => {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (propConfig === void 0) {
+            throw new Error("propConfig is undefined. so, yeah.");
+          }
+          console.log({ propConfig, propAddress });
+          stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
+        };
+        const __experimental_staticProp = (prop) => {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (propConfig === void 0) {
+            throw new Error("propConfig is undefined. so, yeah.");
+          }
+          for (const { path: subPath, conf } of iteratePropType(propConfig, [])) {
+            if (isPropConfigComposite(conf))
+              continue;
+            const pointerToSub = pointerDeep(prop, subPath);
+            stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic(__spreadProps(__spreadValues({}, propAddress), {
+              value: root3.getValueByPointer(pointerToSub)
+            }));
+          }
+        };
+        const __experimental_deleteKeyframes = (prop, from = 0, to = 0) => {
+          const { root: root3, path } = getPointerParts(prop);
+          if (isSheetObject(root3)) {
+            const sequenceTracksTree = root3.template.getMapOfValidSequenceTracks_forStudio().getValue();
+            const defaultValue = getDeep(root3.template.getDefaultValues().getValue(), path);
+            const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+            const unsetStaticOrKeyframeProp = (value, path2) => {
+              const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path2 });
+              const trackId = get_default(sequenceTracksTree, path2);
+              const sequence = root3.sheet.getSequence();
+              const trackP = val(sequence._project.pointers.historic.sheetsById[sequence._sheet.address.sheetId].sequence.tracksByObject[root3.address.objectKey]);
+              if (!trackP) {
+                throw new Error("whatever, man");
+              }
+              const { trackData, trackIdByPropPath } = trackP;
+              if (typeof trackId === "string" && typeof trackData !== "undefined") {
+                const track = trackData[trackId];
+                if (!track) {
+                  throw new Error("whatever, man");
+                }
+                const keyframeIds = [];
+                if (to > from) {
+                  track.keyframes.forEach((kf) => {
+                    if (kf.position >= from && kf.position <= to) {
+                    } else {
+                      keyframeIds.push(kf.id);
+                    }
+                  });
+                }
+                const objectKey = propAddress.objectKey;
+                stateEditors2.coreByProject.historic.sheetsById.sequence.keepKeyframes(__spreadProps(__spreadValues({}, root3.address), {
+                  objectKey,
+                  trackId,
+                  keyframeIds
+                }));
+              } else if (propConfig !== void 0) {
+                stateEditors2.coreByProject.historic.sheetsById.staticOverrides.byObject.unsetValueOfPrimitiveProp(propAddress);
+              }
+            };
+            if (propConfig.type === "compound") {
+              forEachPropDeep(defaultValue, (v6, pathToProp) => {
+                unsetStaticOrKeyframeProp(v6, pathToProp);
+              }, getPointerParts(prop).path);
+            } else {
+              unsetStaticOrKeyframeProp(defaultValue, path);
+            }
+          } else {
+            throw new Error("Only setting props of SheetObject-s is supported in a transaction so far");
+          }
+        };
+        const __experimental_addKeyframes = (prop, keyframes) => {
+          const { root: root3, path } = getPointerParts(prop);
+          if (isSheetObject(root3)) {
+            let sequenceTracksTree = root3.template.getMapOfValidSequenceTracks_forStudio().getValue();
+            const defaultValue = getDeep(root3.template.getDefaultValues().getValue(), path);
+            const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+            console.log(path, propConfig);
+            const addStaticOrKeyframeProp = (value, path2) => {
+              const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path2 });
+              let trackId = get_default(sequenceTracksTree, path2);
+              if (typeof trackId !== "string" && propConfig !== void 0) {
+                throw Error("can only add keyframes to sequenced prop");
+              }
+              if (typeof trackId === "string") {
+                const objectKey = propAddress.objectKey;
+                stateEditors2.coreByProject.historic.sheetsById.sequence.addKeyframes(__spreadProps(__spreadValues({}, root3.address), {
+                  objectKey,
+                  trackId,
+                  keyframes
+                }));
+              } else if (propConfig !== void 0) {
+                throw Error("hmmm");
+              }
+            };
+            if (propConfig.type === "compound") {
+              forEachPropDeep(defaultValue, (v6, pathToProp) => {
+                addStaticOrKeyframeProp(v6, pathToProp);
+              }, getPointerParts(prop).path);
+            } else {
+              addStaticOrKeyframeProp(defaultValue, path);
+            }
+          } else {
+            throw new Error("Only setting props of SheetObject-s is supported in a transaction so far");
+          }
+        };
         return fn2({
           set: set3,
           unset: unset2,
           __experimental_forgetObject,
-          __experimental_forgetSheet
+          __experimental_forgetSheet,
+          __experimental_sequenceProp,
+          __experimental_staticProp,
+          __experimental_deleteKeyframes,
+          __experimental_addKeyframes
         });
       });
     }

browser.sh

@@ -8,5 +8,5 @@ fly ()
 
 #echo $(fly /usr/bin/chromium --incognito --screen=1 $@)
 #/usr/bin/chromium --incognito --screen=1 $@ &
-/usr/bin/chromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1 $@ &
+fly flatpak run com.github.Eloston.UngoogledChromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1 $@ &
 echo $!

clean.sh

@@ -5,7 +5,7 @@ PREVIOUS_DIR=$(pwd)
 
 cd $DIR
 
-make clean && rm -rf obj && rm -rf ../../../addons/obj
+emmake make clean && make clean && rm -rf obj && rm -rf ../../../addons/obj
 rm -rf ../../../libs/openFrameworksCompiled/lib/linux64/obj
 rm -rf ../../../libs/openFrameworksCompiled/lib/linux64/libopenFrameworks.a
 rm -rf ../../../libs/openFrameworksCompiled/lib/emscripten/obj

serve.py

@@ -10,6 +10,8 @@ import ssl
 
 # openssl req -new -x509 -keyout ssl/key.pem -out ssl/server.pem -days 365 -nodes
 
+browser_cmd = "/usr/bin/chromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1"
+
 class CORSRequestHandler(SimpleHTTPRequestHandler):
     def end_headers(self):
         self.send_header("Cross-Origin-Opener-Policy", "same-origin")
@@ -47,17 +49,18 @@ def serve(root, port, run_browser):
         keyfile = "ssl/key.pem"
     
     if os.path.exists(certfile) and os.path.exists(keyfile):
-        httpd.socket = ssl.wrap_socket(httpd.socket,
-                                       server_side=True,
-                                       certfile=certfile,
-                                       keyfile=keyfile,
-                                       ssl_version=ssl.PROTOCOL_TLS)
+        context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
+        context.load_cert_chain(certfile, keyfile)
+        httpd.socket = context.wrap_socket(httpd.socket,
+                                       server_side=True)
+
         protocol = 'https'
 
     if run_browser:
         # Open the served page in the user's default browser.
         print("Opening the served URL in the default browser (use `--no-browser` or `-n` to disable this).")
-        subprocess.call([f"../browser.sh", f"{protocol}://{open_host}:{port}/variabletime.html"])
+        subprocess.call(["pwd"])
+        subprocess.call([f"../../../browser.sh", f"{protocol}://{open_host}:{port}/index.html"])
 
     print(f"serving on port {port}")
     httpd.serve_forever()
@@ -67,7 +70,7 @@ if __name__ == "__main__":
     parser = argparse.ArgumentParser()
     parser.add_argument("-p", "--port", help="port to listen on", default=8060, type=int)
     parser.add_argument(
-        "-r", "--root", help="path to serve as root (relative to `platform/web/`)", default="./bin", type=Path
+        "-r", "--root", help="path to serve as root (relative to `platform/web/`)", default="./bin/em/variabletime", type=Path
     )
     browser_parser = parser.add_mutually_exclusive_group(required=False)
     browser_parser.add_argument(

src/ofApp.h

@@ -34,8 +34,8 @@ struct AppSettings {
                                              212 / 255.0,
                                              212 / 255.0,
                                              1}; // check data/appSettings.json
-    string tmpExportDir = "data/export";
-    string tmpImportDir = "data/import";
+    std::string tmpExportDir = "data/export";
+    std::string tmpImportDir = "data/import";
 
     NLOHMANN_DEFINE_TYPE_NON_INTRUSIVE(AppSettings,
                                        backgroundColor,
@@ -43,7 +43,8 @@ struct AppSettings {
 
 };
 
-class ZipProjectSaver : public ofThread {
+class ZipProjectSaver :
+    public ofThread {
     public:
         void setup(string projectName,
                    string projectJsonString){
@@ -127,12 +128,12 @@ class ZipProjectSaver : public ofThread {
         void exit(){
             free(buffer);
         }
-        string projectName;
-        string projectJsonString;
-        string userFontsPath;
-        string userAudioPath;
-        string timestamp;
-        string filename;
+        std::string projectName;
+        std::string projectJsonString;
+        std::string userFontsPath;
+        std::string userAudioPath;
+        std::string timestamp;
+        std::string filename;
         char * buffer;
         size_t buffer_size;
         std::atomic <bool> freshDownload{false};