Performance improvements on DOM rendering

Author: igorski

config/grunt/browsersync.js

@@ -6,6 +6,11 @@ module.exports = {
     },
     options: {
         watchTask: true,
+        ghostMode: {
+            clicks: false,
+            forms: false,
+            scroll: false
+        },
         server: {
             baseDir: '<%= config.target.dev %>',
             index: 'index.html'

src/assets/css/patternEditor.less

@@ -28,6 +28,11 @@
 
     float: left;
 
+    &.fixed {
+      position: fixed;
+      top: @menu-height;
+    }
+
     li {
 
       width: 40px;

src/js/controller/PatternEditorController.js

@@ -29,7 +29,7 @@ const DOM      = require( "zjslib" ).DOM;
 /* private properties */
 
 let container, efflux, indiceContainer, controlContainer;
-let stepAmount = 0, patternIndices, rafPending = false;
+let stepAmount = 0, patternIndices, rafPending = false, controlOffsetY = 0;
 
 module.exports =
 {
@@ -56,6 +56,7 @@ module.exports =
         // setup messaging system
         [
             Messages.WINDOW_SCROLLED,
+            Messages.WINDOW_RESIZED,
             Messages.PATTERN_STEPS_UPDATED,
             Messages.STEP_POSITION_REACHED,
             Messages.SONG_LOADED
@@ -76,9 +77,16 @@ function handleBroadcast( type, payload )
             // ensure the controlContainer is always visible regardless of scroll offset
             // threshold defines when to offset the containers top, the last number defines the fixed header height
             const scrollY   = window.scrollY;
-            const threshold = DOM.getElementCoordinates( container, true ).y - 45;
+            const threshold = ( controlOffsetY = controlOffsetY || DOM.getElementCoordinates( container, true ).y - 46 );
 
-            controlContainer.style.marginTop = (( scrollY > threshold ) ? scrollY - threshold : 0 ) + "px";
+            if ( scrollY > threshold )
+                controlContainer.classList.add( "fixed" );
+            else
+                controlContainer.classList.remove( "fixed" );
+            break;
+
+        case Messages.WINDOW_RESIZED:
+            controlOffsetY = 0; // flush cache
             break;
 
         case Messages.PATTERN_STEPS_UPDATED:

src/js/controller/PatternTrackListController.js

@@ -36,7 +36,7 @@ const PatternUtil    = require( "../utils/PatternUtil" );
 
 let wrapper, container, efflux, editorModel, keyboardController, stepHighlight;
 let interactionData = {},
-    selectionModel, patternCopy, stepSelect;
+    selectionModel, patternCopy, stepSelect, pContainers, pContainerSteps;
 
 const PatternTrackListController = module.exports =
 {
@@ -110,12 +110,21 @@ const PatternTrackListController = module.exports =
         const coordinates = { x: container.scrollLeft, y: container.scrollTop };
 
         const pattern = efflux.activeSong.patterns[ activePattern ];
+
+        // render the currently active pattern on screen
+
         efflux.TemplateService.render( "patternTrackList", wrapper, {
 
-            steps   : pattern.steps,
-            pattern : pattern
+            steps         : pattern.steps,
+            pattern       : pattern,
+            activeChannel : editorModel.activeInstrument,
+            activeStep    : editorModel.activeStep
 
-        }).then( highlightActiveStep );
+        }).then(() => {
+            // clear cached containers after render
+            pContainers = null;
+            pContainerSteps = [];
+        });
 
         Form.setSelectedOption( stepSelect, pattern.steps );
         container.scrollLeft = coordinates.x;
@@ -188,8 +197,8 @@ function handleBroadcast( type, payload )
 
 function highlightActiveStep()
 {
-    const pContainers = wrapper.querySelectorAll( ".pattern" ),
-          activeStyle = "active", selectedStyle = "selected",
+    grabPatternContainersFromTemplate();
+    const activeStyle = "active", selectedStyle = "selected",
           activeStep = editorModel.activeStep;
 
     let selection, pContainer, items, item;
@@ -198,7 +207,8 @@ function highlightActiveStep()
     {
         pContainer = pContainers[ i ];
         selection  = selectionModel.selectedChannels[ i ];
-        items      = pContainer.querySelectorAll( "li" );
+        items      = grabPatternContainerStepFromTemplate( i );
+        pContainer.querySelectorAll( "li" );
 
         let j = items.length;
         while ( j-- )
@@ -243,7 +253,7 @@ function handleInteraction( aEvent )
 
     if ( aEvent.target.nodeName === "LI" )
     {
-        const pContainers = wrapper.querySelectorAll( ".pattern" );
+        grabPatternContainersFromTemplate();
         let selectionChannelStart = editorModel.activeInstrument, selectionStepStart = editorModel.activeStep;
         let found = false, pContainer, items;
 
@@ -257,7 +267,7 @@ function handleInteraction( aEvent )
             if ( found ) break;
 
             pContainer = pContainers[ i ];
-            items = pContainer.querySelectorAll( "li" );
+            items = grabPatternContainerStepFromTemplate( i );
 
             let j = items.length;
             while ( j-- )
@@ -461,3 +471,17 @@ function addEventAtPosition( event, optData )
     PatternTrackListController.update();
     Pubsub.publish( Messages.SAVE_STATE );
 }
+
+/**
+ * function to retrieve and cache the currently available DOM containers
+ * inside the pattern template
+ *
+ * @private
+ */
+function grabPatternContainersFromTemplate() {
+    pContainers = pContainers || wrapper.querySelectorAll( ".pattern" );
+}
+
+function grabPatternContainerStepFromTemplate( i ) {
+    return ( pContainerSteps[ i ] = pContainerSteps[ i ] || pContainers[ i ].querySelectorAll( "li" ));
+}

src/js/workers/TemplateWorker.js

@@ -67,6 +67,45 @@ function registerHelpers() {
         return out;
     });
 
+    /**
+     * comparison functions for templates, use like:
+     * {{#if (eq variable "value")}} ... {{/if}}
+     *
+     * multiple conditionals:
+     *
+     * {{#if (and
+     *           (eq variable "value")
+     *           (eq variable2 "value"))}}
+     */
+    Handlebars.registerHelper({
+
+        eq: function (v1, v2) {
+            return v1 === v2;
+        },/*
+        ne: function (v1, v2) {
+            return v1 !== v2;
+        },
+        lt: function (v1, v2) {
+            return v1 < v2;
+        },
+        gt: function (v1, v2) {
+            return v1 > v2;
+        },
+        lte: function (v1, v2) {
+            return v1 <= v2;
+        },
+        gte: function (v1, v2) {
+            return v1 >= v2;
+        },
+        */
+        and: function (v1, v2) {
+            return v1 && v2;
+        },
+        or: function (v1, v2) {
+            return v1 || v2;
+        }
+    });
+
     /**
      * formats module parameter automations (patternTrackList)
      *
@@ -91,4 +130,4 @@ function registerHelpers() {
         }
         return out;
     });
-}
+}

src/templates/patternTrackList.hbs

@@ -1,7 +1,13 @@
 {{#each pattern.channels}}
 <ul class="pattern">
     {{#each this}}
-    <li class="{{toLowerCase this.instrument}}">
+        {{#if (and
+            (eq @index ../../activeStep)
+            (eq @../index ../../activeChannel))}}
+        <li class="active">
+    {{else}}
+        <li>
+    {{/if}}
         {{#if this.action}}
             {{# if this.note}}
             <span class="note">