Fix shift behaviour for ComponentContainers

For advanced controller mappings, it can be desireable to check the
current shift state of a component container by reading its `isShifted`
attribute. This attribute is defined as follows:

    isShifted: false,
    shift: function () {
        this.forEachComponent(function (component) {
            if (typeof component.shift === 'function') {
                //[...]
                component.shift();
            }
            // Set isShifted for child ComponentContainers forEachComponent is iterating through recursively
            this.isShifted = true;
        });
    },
    unshift: function () {
        this.forEachComponent(function (component) {
            if (typeof component.unshift === 'function') {
                // [...]
                component.unshift();
            }
            // Set isShifted for child ComponentContainers forEachComponent is iterating through recursively
            this.isShifted = false;
        });
    },

Unfortunately, the comment in the source code is wrong, because `isShifted` will
*not* be set recursively. In fact, it will only ever be set if the
`shift` method of a component container is called directly. When
interating thought components recursively, `forEachComponent` will only
call `shift` for the components inside a component container, but not
for the container itself:

    var applyOperationTo = function (obj) {
        if (obj instanceof Component) {
            operation.call(that, obj);
        } else if (recursive && obj instanceof ComponentContainer) {
            obj.forEachComponent(operation);
        } else if (Array.isArray(obj)) {
            obj.forEach(function (element) {
                applyOperationTo(element);
            });
        }
    };

Hence, `isShifted` will not be set recursively.
To fix that, this PR introduces an additional function
`forEachComponentContainer` that will be used by the
`shift()`/`unshift()` methods to propagate the shift state to child
containers recursively.

1 files changed, 48 insertions, 6 deletions

diff --git a/res/controllers/midi-components-0.0.js b/res/controllers/midi-components-0.0.js
index 4dc43be1e9..7bb5c00957 100644
--- a/res/controllers/midi-components-0.0.js
+++ b/res/controllers/midi-components-0.0.js
@@ -533,6 +533,34 @@
                 }
             }
         },
+        forEachComponentContainer: function (operation, recursive) {
+            if (typeof operation !== 'function') {
+                print('ERROR: ComponentContainer.forEachComponentContainer requires a function argument');
+                return;
+            }
+            if (recursive === undefined) { recursive = true; }
+
+            var that = this;
+            var applyOperationTo = function (obj) {
+                if (obj instanceof ComponentContainer) {
+                    operation.call(that, obj);
+
+                    if (recursive) {
+                        obj.forEachComponentContainer(operation);
+                    }
+                } else if (Array.isArray(obj)) {
+                    obj.forEach(function (element) {
+                        applyOperationTo(element);
+                    });
+                }
+            };
+
+            for (var memberName in this) {
+                if (this.hasOwnProperty(memberName)) {
+                    applyOperationTo(this[memberName]);
+                }
+            }
+        },
         reconnectComponents: function (operation, recursive) {
             this.forEachComponent(function (component) {
                 component.disconnect();
@@ -545,6 +573,7 @@
         },
         isShifted: false,
         shift: function () {
+            // Shift direct child Components
             this.forEachComponent(function (component) {
                 // Controls for push type Buttons depend on getting reset to 0 when the
                 // Button is released for correct behavior. If there is a skin button
@@ -568,11 +597,18 @@
                     }
                     component.shift();
                 }
-                // Set isShifted for child ComponentContainers forEachComponent is iterating through recursively
-                this.isShifted = true;
-            });
+            }, false);
+
+            // Shift child ComponentContainers
+            this.forEachComponentContainer(function (container) {
+                container.shift();
+            }, false);
+
+            // Set isShifted for each ComponentContainer recursively
+            this.isShifted = true;
         },
         unshift: function () {
+            // Unshift direct child Components
             this.forEachComponent(function (component) {
                 // Refer to comment in ComponentContainer.shift() above for explanation
                 if (typeof component.unshift === 'function') {
@@ -588,9 +624,15 @@
                     }
                     component.unshift();
                 }
-                // Set isShifted for child ComponentContainers forEachComponent is iterating through recursively
-                this.isShifted = false;
-            });
+            }, false);
+
+            // Unshift child ComponentContainers
+            this.forEachComponentContainer(function (container) {
+                container.unshift();
+            }, false);
+
+            // Unset isShifted for each ComponentContainer recursively
+            this.isShifted = false;
         },
         applyLayer: function (newLayer, reconnectComponents) {
             if (reconnectComponents !== false) {