From de65b05989c700c7ea80dd7a31d1d479fc81b5de Mon Sep 17 00:00:00 2001
From: Igor Zinken <igor.zinken@igorski.nl>
Date: Sat, 9 Sep 2023 19:33:29 +0200
Subject: [PATCH] Introduced activeOrderIndex to allow sequenced playback
 through order lists with repeated patterns

---
 package.json                                  |  4 +-
 .../advanced-pattern-editor.vue               | 34 ++++---
 .../module-param-editor.vue                   |  8 +-
 .../note-entry-editor/note-entry-editor.vue   |  2 +-
 .../pattern-editor/pattern-editor.vue         |  4 +-
 .../components/pattern-order-entry.vue        |  4 +-
 .../pattern-order-editor.vue                  | 16 ++--
 .../pattern-track-list/pattern-track-list.vue | 69 +++++++-------
 .../timeline-editor/timeline-editor.vue       |  8 +-
 src/components/track-editor/track-editor.vue  |  4 +-
 src/components/transport/transport.vue        | 63 ++++++-------
 src/efflux-application.vue                    |  4 +-
 src/model/factories/action-factory.ts         | 38 ++++----
 src/services/keyboard-service.ts              | 24 ++---
 .../keyboard/instrument-selection-handler.ts  |  2 +-
 src/services/keyboard/module-param-handler.ts |  4 +-
 src/services/keyboard/module-value-handler.ts |  6 +-
 src/store/modules/selection-module.ts         |  2 +-
 src/store/modules/sequencer-module.ts         | 93 ++++++++++---------
 src/store/modules/song-module.ts              |  2 +-
 src/utils/event-util.ts                       |  4 +-
 src/utils/instrument-util.ts                  |  8 +-
 .../store/modules/sequencer-module.spec.ts    | 52 +++++++++++
 23 files changed, 269 insertions(+), 186 deletions(-)
 create mode 100644 tests/unit/store/modules/sequencer-module.spec.ts

diff --git a/package.json b/package.json
index 1b323cd3..add975b7 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "efflux-tracker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
-  "description": "web based tracker interface enabling music creation within the web browser",
+  "description": "Application providing tracker based music creation within the web browser",
   "author": "Igor Zinken",
   "scripts": {
     "dev": "vite --force",
diff --git a/src/components/advanced-pattern-editor/advanced-pattern-editor.vue b/src/components/advanced-pattern-editor/advanced-pattern-editor.vue
index c33647de..d4ab8688 100644
--- a/src/components/advanced-pattern-editor/advanced-pattern-editor.vue
+++ b/src/components/advanced-pattern-editor/advanced-pattern-editor.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2016-2022 - https://www.igorski.nl
+* Igor Zinken 2016-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -70,14 +70,22 @@
     </div>
 </template>
 
-<script>
-import { mapState, mapMutations, mapActions } from "vuex";
-
+<script lang="ts">
+import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
 import { PATTERN_FILE_EXTENSION } from "@/definitions/file-types";
+import type { EffluxPattern } from "@/model/types/pattern";
 import { saveAsFile } from "@/utils/file-util";
 import { serializePatternFile } from "@/utils/pattern-util";
 import messages from "./messages.json";
 
+type ClonedPatternDef = {
+    firstPatternValue: number;
+    lastPatternValue: number;
+    firstChannelValue: number;
+    lastChannelValue: number;
+    patternsToClone: EffluxPattern[];
+};
+
 export default {
     i18n: { messages },
     data: () => ({
@@ -90,13 +98,15 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
         }),
-        maxPattern() {
+        ...mapGetters([
+            "activePattern",
+        ]),
+        maxPattern(): number {
             return this.activeSong.patterns.length;
         },
     },
-    created() {
+    created(): void {
         // note we add 1 as we'd like our interface to show more friendly 1 as array start ;)
         this.firstPattern = this.activePattern + 1;
         this.lastPattern  = this.activeSong.patterns.length;
@@ -110,7 +120,7 @@ export default {
             this.$refs.firstPatternInput.focus();
         });
     },
-    beforeDestroy() {
+    beforeDestroy(): void {
         this.suspendKeyboardService( false );
     },
     methods: {
@@ -124,7 +134,7 @@ export default {
         ...mapActions([
             "pastePatternsIntoSong",
         ]),
-        async handleExportClick() {
+        async handleExportClick(): Promise<void> {
             this.setLoading( "pexp" );
             try {
                 const {
@@ -147,10 +157,10 @@ export default {
             }
             this.unsetLoading( "pexp" );
         },
-        handleClose() {
+        handleClose(): void {
             this.$emit( "close" );
         },
-        async handleDuplicateClick() {
+        async handleDuplicateClick(): Promise<void> {
             const patterns = this.activeSong.patterns;
             const pastePatternValue = Math.min( patterns.length, this.pastePattern );
 
@@ -167,7 +177,7 @@ export default {
             });
             this.handleClose();
         },
-        clonePatternRange() {
+        clonePatternRange(): ClonedPatternDef {
             const patterns        = this.activeSong.patterns;
             const maxChannelValue = this.activeSong.instruments.length - 1;
 
diff --git a/src/components/module-param-editor/module-param-editor.vue b/src/components/module-param-editor/module-param-editor.vue
index f1bb527f..1a5740fd 100644
--- a/src/components/module-param-editor/module-param-editor.vue
+++ b/src/components/module-param-editor/module-param-editor.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2016-2022 - https://www.igorski.nl
+* Igor Zinken 2016-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -152,7 +152,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapGetters, mapMutations } from "vuex";
 import { ToggleButton } from "vue-js-toggle-button";
 import EventFactory from "@/model/factories/event-factory";
 import KeyboardService from "@/services/keyboard-service";
@@ -192,10 +192,12 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
             selectedInstrument: state => state.editor.selectedInstrument,
             selectedStep: state => state.editor.selectedStep,
         }),
+        ...mapGetters([
+            "activePattern",
+        ]),
         valueText() {
             const value = this.value.toFixed(2);
             return ( this.value < 10 ) ? `0${value}` : value;
diff --git a/src/components/note-entry-editor/note-entry-editor.vue b/src/components/note-entry-editor/note-entry-editor.vue
index 93de91c9..06b319cf 100644
--- a/src/components/note-entry-editor/note-entry-editor.vue
+++ b/src/components/note-entry-editor/note-entry-editor.vue
@@ -107,7 +107,6 @@ export default {
     computed: {
         ...mapState({
             activeSong           : state => state.song.activeSong,
-            activePattern        : state => state.sequencer.activePattern,
             currentStep          : state => state.sequencer.currentStep,
             higherKeyboardOctave : state => state.editor.higherKeyboardOctave,
             playing              : state => state.sequencer.playing,
@@ -115,6 +114,7 @@ export default {
             selectedStep         : state => state.editor.selectedStep,
         }),
         ...mapGetters([
+            "activePattern",
             "isRecording",
         ]),
         octave: {
diff --git a/src/components/pattern-editor/pattern-editor.vue b/src/components/pattern-editor/pattern-editor.vue
index 0e316a3c..0a894ed2 100644
--- a/src/components/pattern-editor/pattern-editor.vue
+++ b/src/components/pattern-editor/pattern-editor.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2016-2022 - https://www.igorski.nl
+* Igor Zinken 2016-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -102,10 +102,10 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
             mobileMode: state => state.mobileMode
         }),
         ...mapGetters([
+            "activePattern",
             "amountOfSteps",
         ]),
         patternStep: {
diff --git a/src/components/pattern-order-editor/components/pattern-order-entry.vue b/src/components/pattern-order-editor/components/pattern-order-entry.vue
index 70793400..24fd3511 100644
--- a/src/components/pattern-order-editor/components/pattern-order-entry.vue
+++ b/src/components/pattern-order-editor/components/pattern-order-entry.vue
@@ -67,10 +67,10 @@ export default {
     },
     methods: {
         ...mapMutations([
-            "setActivePattern",
+            "setActiveOrderIndex",
         ]),
         selectPattern(): void {
-            this.setActivePattern( this.pattern );
+            this.setActiveOrderIndex( this.index );
             this.setEditing( false );
         },
         setEditing( isEditing: boolean ): void {
diff --git a/src/components/pattern-order-editor/pattern-order-editor.vue b/src/components/pattern-order-editor/pattern-order-editor.vue
index 7928605a..757a2edd 100644
--- a/src/components/pattern-order-editor/pattern-order-editor.vue
+++ b/src/components/pattern-order-editor/pattern-order-editor.vue
@@ -82,25 +82,25 @@ export default {
     }),
     computed: {
         ...mapState({
-            activeSong    : state => state.song.activeSong,
-            activePattern : state => state.sequencer.activePattern,
+            activeSong : state => state.song.activeSong,
+            activeOrderIndex: state => state.sequencer.activeOrderIndex,
         }),
         entries(): WrappedPatternOrderEntry[] {
-            return this.activeSong.order.map(( num: number, index: number ) => ({
-                pattern: num,
-                active: this.activePattern === num,
-                editing: this.editableEntry === index,
+            return this.activeSong.order.map(( pattern: number, index: number ) => ({
+                pattern,
                 index,
+                active: this.activeOrderIndex === index,
+                editing: this.editableEntry === index,
             }));
         },
     },
     methods: {
         ...mapMutations([
-            "setActivePattern",
+            "setActiveOrderIndex",
             "replacePatternOrder",
         ]),
         selectPattern( entry: WrappedPatternOrderEntry ): void {
-            this.setActivePattern( entry.pattern );
+            this.setActiveOrderIndex( entry.index );
             this.stopEditing();
         },
         repeatPattern( entry: WrappedPatternOrderEntry ): void {
diff --git a/src/components/pattern-track-list/pattern-track-list.vue b/src/components/pattern-track-list/pattern-track-list.vue
index 78ffcfca..823662b1 100644
--- a/src/components/pattern-track-list/pattern-track-list.vue
+++ b/src/components/pattern-track-list/pattern-track-list.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2016-2022 - https://www.igorski.nl
+* Igor Zinken 2016-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -105,8 +105,10 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
 import { mapState, mapGetters, mapMutations } from "vuex";
+import type { EffluxAudioEventModuleParams } from "@/model/types/audio-event";
+import type { EffluxPattern } from "@/model/types/pattern";
 import PatternEvent from "./pattern-event.vue";
 import KeyboardService from "@/services/keyboard-service";
 
@@ -133,7 +135,6 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
             currentStep: state => state.sequencer.currentStep,
             selectedInstrument: state => state.editor.selectedInstrument,
             selectedStep: state => state.editor.selectedStep,
@@ -145,33 +146,38 @@ export default {
             windowSize: state => state.windowSize,
         }),
         ...mapGetters([
+            "activePattern",
             "amountOfSteps",
             "hasSelection",
             "followPlayback",
             "paramFormat",
             "isPlaying"
         ]),
-        activeSongPattern() {
+        activeSongPattern(): EffluxPattern {
             return this.activeSong.patterns[ this.activePattern ];
         },
-        previousPatternChannels() {
+        prevPatternIndex(): number {
+            return this.activeSong.order[ this.activePattern - 1 ] ?? - 1;
+        },
+        nextPatternIndex(): number {
+            return this.activeSong.order[ this.activePattern + 1 ] ?? -0;
+        },
+        previousPatternChannels(): EffluxChannel[] | null {
             if ( !this.mustFollow ) {
                 return null;
             }
-            const prevPattern = this.activePattern - 1;
-            const prevIndex = prevPattern < 0 ? this.activeSong.patterns.length - 1 : prevPattern;
+            const prevIndex = this.prevPattern < 0 ? this.activeSong.patterns.length - 1 : this.prevPattern;
             return this.activeSong.patterns[ prevIndex ].channels.map( channel => {
                 return channel.slice(( channel.length - 1 ) - this.prevEvents );
             });
         },
-        nextPatternChannels() {
+        nextPatternChannels(): EffluxChannel[] | null {
             if ( !this.mustFollow ) {
                 return null;
             }
-            const amountOfPatterns = this.activeSong.patterns.length;
-            const nextPattern = this.activePattern + 1;
+            const amountOfPatterns = this.activeSong.order.length;
             // also provide lookahead for the pattern(s) coming after the next one for a seamless scrolling list
-            const nextIndex = nextPattern >= amountOfPatterns ? 0 : nextPattern;
+            const nextIndex = this.nextPattern >= amountOfPatterns ? 0 : this.nextPattern;
             let nextNextIndex = nextIndex;
 
             // the amount of events we require to visualize the next pattern(s) for the current resolution
@@ -191,32 +197,33 @@ export default {
                 return out.slice( 0, sliceAmount );
             });
         },
-        lastIndices() {
+        lastIndices(): number[] {
             const out = [];
+            // TODO get from order
             const lastPatternAmount = this.activeSong.patterns[ this.activePattern - 1 ]?.steps || this.activeSongPattern.steps;
             for ( let i = lastPatternAmount - this.prevEvents; i <= lastPatternAmount; ++i ) {
                 out.push( i );
             }
             return out;
         },
-        nextIndices() {
+        nextIndices(): number[] {
             const out = new Array( this.nextEvents );
             for ( let i = 0; i < this.nextEvents; ++i ) {
                 out[ i ] = i;
             }
             return out;
         },
-        mustFollow() {
+        mustFollow(): boolean {
             return this.followPlayback && this.isPlaying;
         },
     },
     watch: {
-        activePattern() {
+        activePattern(): void {
             this.clearSelection();
             this.setSelectedSlot( -1 );
             this.pContainerSteps = [];
         },
-        currentStep( step ) {
+        currentStep( step: number ): void {
             const stepsInPattern = this.activeSongPattern.steps;
             const diff = this.stepPrecision / stepsInPattern;
 
@@ -236,10 +243,10 @@ export default {
             // following activated, ensure the list auto scrolls
             this.$refs.container.scrollTop = ( this.playingStep * STEP_HEIGHT ) + DOUBLE_STEP_HEIGHT;
         },
-        windowSize() {
+        windowSize(): void {
             this.cacheDimensions();
         },
-        isPlaying( value ) {
+        isPlaying( value: boolean ): void {
             if ( !this.followPlayback ) {
                 return;
             }
@@ -248,10 +255,10 @@ export default {
             }
             this.$refs.container.scrollTop = 0;
         },
-        selectedStep() { this.focusActiveStep() },
-        selectedSlot() { this.focusActiveStep() },
+        selectedStep(): void { this.focusActiveStep() },
+        selectedSlot(): void { this.focusActiveStep() },
     },
-    mounted() {
+    mounted(): void {
         this.$nextTick(() => {
             this.container = this.$refs.container;
             this.wrapper = this.$refs.wrapper;
@@ -270,7 +277,7 @@ export default {
             "addEventAtPosition",
             "setShowNoteEntry",
         ]),
-        cacheDimensions() {
+        cacheDimensions(): void {
             this.containerWidth = this.container.offsetWidth;
             this.containerHeight = this.container.offsetHeight;
 
@@ -285,14 +292,14 @@ export default {
                 NEXT_EVENTS = new Array( this.nextEvents ).fill( 0 );
             }
         },
-        isStepSelected( channelIndex, stepIndex ) {
+        isStepSelected( channelIndex: number, stepIndex: number ): boolean {
             return this.selectedChannels[ channelIndex ]?.includes( stepIndex );
         },
         /**
          * ensure the currently active step (after a keyboard navigation)
          * is visible on screen
          */
-        focusActiveStep() {
+        focusActiveStep(): void {
             const top        = this.container.scrollTop;
             const left       = this.container.scrollLeft;
             const bottom     = top + this.containerHeight;
@@ -315,7 +322,7 @@ export default {
                 this.container.scrollLeft = slotLeft;
             }
         },
-        formatModuleParam( eventMpData ) {
+        formatModuleParam( eventMpData?: EffluxAudioEventModuleParams ): { param: string, value: number } | null {
             if ( !eventMpData ) {
                 return null;
             }
@@ -336,7 +343,7 @@ export default {
             value = value.length === 1 ? ` 0${value}` : ` ${value}`;
             return { param, value };
         },
-        handleInteraction( event ) {
+        handleInteraction( event: PointerEvent ): void {
             // for touch interactions, we record some data as soon as touch starts so we can evaluate it on end
             if ( event.type === "touchstart" ) {
                 this.interactionData.offset = window.scrollY;
@@ -344,7 +351,7 @@ export default {
                 return;
             }
             // check if we interacted with a <pattern-event />
-            if ( event.target.nodeName === "LI" ) {
+            if (( event.target as HTMLElement ).nodeName === "LI" ) {
                 this.handleSlotClick( event );
             }
             this.setHelpTopic( "tracker" );
@@ -355,7 +362,7 @@ export default {
          * add the listener directly on the slots themselves, but consider the excessive
          * amount of event listeners that would be attached to a large amount of DOM elements...
          */
-        handleSlotClick( event ) {
+        handleSlotClick( event: PointerEvent ): void {
             const pContainers = this.$refs.pattern;
             const shiftDown   = KeyboardService.hasShift();
             let selectionChannelStart = this.selectedInstrument,
@@ -407,7 +414,7 @@ export default {
                 }
             }
         },
-        selectSlotWithinClickedStep( event ) {
+        selectSlotWithinClickedStep( event: PointerEvent ) {
             const { clientX, clientY } = event;
             let el = document.caretRangeFromPoint?.( clientX, clientY )?.startContainer;
             let slot = 0;
@@ -418,7 +425,7 @@ export default {
             } else {
                 // likely no caretRangeFromPoint support (available in Safari, but broken...)
                 // let's do some manual work...
-                for ( const node of event.target.childNodes ) {
+                for ( const node of ( event.target as HTMLElement )?.childNodes ) {
                     const rect = node.getBoundingClientRect();
                     if ( clientX >= rect.left && clientX <= rect.right ) {
                         el = node;
@@ -439,7 +446,7 @@ export default {
          * maintain a cache for step slots within a single pattern container
          * this is a little more work for us, but prevents repeated DOM thrashing during heavy editing
          */
-        grabPatternContainerStepFromTemplate( container, step ) {
+        grabPatternContainerStepFromTemplate( container: HTMLElement, step: number ): HTMLElement {
             const stepElement = this.pContainerSteps[ step ] || container.querySelectorAll( "li" );
             this.pContainerSteps[ step ] = stepElement;
             return stepElement;
diff --git a/src/components/timeline-editor/timeline-editor.vue b/src/components/timeline-editor/timeline-editor.vue
index c35d1d49..5cc9ac30 100644
--- a/src/components/timeline-editor/timeline-editor.vue
+++ b/src/components/timeline-editor/timeline-editor.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2021 - https://www.igorski.nl
+* Igor Zinken 2021-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import { canvas } from "zcanvas";
 import PatternRenderer from "./renderers/pattern-renderer";
 import messages from "./messages.json";
@@ -40,11 +40,13 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
             currentStep: state => state.sequencer.currentStep,
             selectedInstrument: state => state.editor.selectedInstrument,
             windowSize: state => state.windowSize,
         }),
+        ...mapGetters([
+            "activePattern",
+        ]),
         patterns() {
             return this.activeSong.patterns;
         },
diff --git a/src/components/track-editor/track-editor.vue b/src/components/track-editor/track-editor.vue
index 0025f3f8..15057484 100644
--- a/src/components/track-editor/track-editor.vue
+++ b/src/components/track-editor/track-editor.vue
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2019-2022 - https://www.igorski.nl
+* Igor Zinken 2019-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -78,13 +78,13 @@ export default {
             showNoteEntry: state => state.editor.showNoteEntry,
         }),
         ...mapGetters([
+            "activePattern",
             "canUndo",
             "canRedo"
         ]),
         ...mapState({
             activeSong: state => state.song.activeSong,
             selectedStep: state => state.editor.selectedStep,
-            activePattern: state => state.sequencer.activePattern,
             selectedInstrument: state => state.editor.selectedInstrument,
             eventList: state => state.editor.eventList,
         })
diff --git a/src/components/transport/transport.vue b/src/components/transport/transport.vue
index 8fe0fad7..5a934c58 100644
--- a/src/components/transport/transport.vue
+++ b/src/components/transport/transport.vue
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2016-2022 - https://www.igorski.nl
+ * Igor Zinken 2016-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -84,7 +84,7 @@
                     <input
                         class="current"
                         ref="currentPatternInput"
-                        v-model.number="currentPatternValue"
+                        v-model.number="currentOrderIndex"
                         maxlength="3"
                         @focus="focusPatternInput( true )"
                         @blur="focusPatternInput( false )"
@@ -139,7 +139,7 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from "vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import Bowser from "bowser";
@@ -151,7 +151,7 @@ import messages from "./messages.json";
 export default {
     i18n: { messages },
     data: () => ({
-        tempPatternValue: 0,
+        tempOrderIndex: 0,
         patternFocused: false,
         originalTempo: 0,
         showTempoInput: false,
@@ -159,28 +159,29 @@ export default {
     computed: {
         ...mapState({
             activeSong: state => state.song.activeSong,
-            activePattern: state => state.sequencer.activePattern,
+            activeOrderIndex: state => state.sequencer.activeOrderIndex,
             midiConnected: state => state.midi.midiConnected,
             mobileMode: state => state.mobileMode,
         }),
         ...mapGetters([
+            "activePattern",
             "isPlaying",
             "isLooping",
             "isRecording",
             "isMetronomeEnabled",
             "amountOfSteps"
         ]),
-        canRecord() {
+        canRecord(): boolean {
             // for desktop/laptop devices we enable record mode (for keyboard input)
             // if a MIDI device is connected on a mobile device, it is enabled as well
             const hasKeyboard = !Bowser.ios && !Bowser.android;
             return hasKeyboard || this.midiConnected;
         },
         tempo: {
-            get() {
+            get(): number {
                 return this.activeSong.meta.tempo;
             },
-            set( value ) {
+            set( value: number ): void {
                 if ( isNaN( value )) {
                     return;
                 }
@@ -199,23 +200,23 @@ export default {
                 this.originalTempo = value;
             }
         },
-        currentPatternValue: {
-            get() {
-                return ( this.patternFocused ? this.tempPatternValue : this.activePattern ) + 1;
+        currentOrderIndex: {
+            get(): number {
+                return ( this.patternFocused ? this.tempOrderIndex : this.activeOrderIndex ) + 1;
             },
-            set( patternValue ) {
+            set( index: number ): void {
                 // normalize to Array indices (0 == first, not 1)
-                const value = Math.min( parseFloat( patternValue ), this.activeSong.patterns.length ) - 1;
-                if ( value >= 0 && value !== this.activePattern ) {
-                    this.tempPatternValue = value;
+                const value = Math.min( parseFloat( index.toString() ), this.activeSong.order.length ) - 1;
+                if ( value >= 0 && value !== this.activeOrderIndex ) {
+                    this.tempOrderIndex = value;
                 }
             }
         },
     },
     watch: {
-        isPlaying( playing ) {
+        isPlaying( playing: boolean ): void {
             if ( playing ) {
-                this.setPosition({ activeSong: this.activeSong, pattern: this.activePattern });
+                this.setPosition({ activeSong: this.activeSong, orderIndex: this.activeOrderIndex });
             } else {
                 if ( this.isRecording ) {
                     this.setRecording( false );
@@ -223,7 +224,7 @@ export default {
                 resetPlayState( this.activeSong.patterns ); // unset playing state of existing events
             }
         },
-        isRecording( recording, wasRecording ) {
+        isRecording( recording: boolean, wasRecording?: boolean ): void {
             if ( wasRecording ) {
                 // unflag the recorded state of all the events
                 const patterns = this.activeSong.patterns;
@@ -244,7 +245,7 @@ export default {
         },
         activePattern: {
             immediate: true,
-            handler( value ) {
+            handler( value: number ): void {
                 const newSteps = this.activeSong.patterns[ value ].steps;
                 if ( this.amountOfSteps !== newSteps ) {
                     this.setPatternSteps({
@@ -256,12 +257,12 @@ export default {
         },
         activeSong: {
             immediate: true,
-            handler() {
+            handler(): void {
                 this.originalTempo = this.tempo;
             }
         },
     },
-    created() {
+    created(): void {
         this.minTempo = 40;
         this.maxTempo = 300;
     },
@@ -274,28 +275,28 @@ export default {
             "setCurrentStep",
             "setMetronomeEnabled",
             "setTempo",
-            "setActivePattern",
+            "setActiveOrderIndex",
             "setPatternSteps",
             "gotoPreviousPattern",
             "gotoNextPattern",
             "setMobileMode",
         ]),
-        handleSettingsToggle() {
+        handleSettingsToggle(): void {
             this.setMobileMode( this.mobileMode ? null : "settings" );
         },
-        focusPatternInput( value ) {
+        focusPatternInput( value: number ): void {
             KeyboardService.setListener( value ? this.handlePatternInput.bind( this ) : null );
             if ( value ) {
-                this.tempPatternValue = this.activePattern;
+                this.tempOrderIndex = this.activeOrderIndex;
             } else {
-                this.setActivePattern( this.tempPatternValue );
+                this.setActiveOrderIndex( this.tempOrderIndex );
             }
             this.patternFocused = value;
         },
-        blurPatternInput() {
+        blurPatternInput(): void {
             this.$refs.currentPatternInput?.blur();
         },
-        handlePatternInput( type, keyCode ) {
+        handlePatternInput( type: string, keyCode: number, event: KeyboardEvent ): void {
             if ( type !== "up" ) {
                 return;
             }
@@ -306,7 +307,7 @@ export default {
                     this.blurPatternInput();
                     break;
                 case 27: // esc
-                    this.tempPatternValue = this.activePattern; // cancel changes
+                    this.tempOrderIndex = this.activeOrderIndex; // cancel changes
                     this.blurPatternInput();
                     break;
                 case 32: // spacebar
@@ -316,13 +317,13 @@ export default {
             }
             event.preventDefault();
         },
-        async handleTempoInputShow() {
+        async handleTempoInputShow(): Promise<void> {
             this.showTempoInput = true;
             this.suspendKeyboardService( true );
             await this.$nextTick();
             this.$refs.tempoInput.focus();
         },
-        handleTempoInputBlur() {
+        handleTempoInputBlur(): void {
             this.tempo = parseFloat( this.$refs.tempoInput.value );
             this.showTempoInput = false;
             this.suspendKeyboardService( false );
diff --git a/src/efflux-application.vue b/src/efflux-application.vue
index 53c8402e..21f99f94 100644
--- a/src/efflux-application.vue
+++ b/src/efflux-application.vue
@@ -277,7 +277,7 @@ export default {
             this.resetEditor();
             this.resetHistory();
             this.createLinkedList( song );
-            this.setActivePattern( 0 );
+            this.setActiveOrderIndex( 0 );
             this.setPlaying( false );
             this.setLooping( false );
             this.clearSelection();
@@ -420,7 +420,7 @@ export default {
             "addSample",
             "prepareLinkedList",
             "createLinkedList",
-            "setActivePattern",
+            "setActiveOrderIndex",
             "setAmountOfSteps",
             "setBlindActive",
             "setCurrentSample",
diff --git a/src/model/factories/action-factory.ts b/src/model/factories/action-factory.ts
index 78c6cc1c..70f7e937 100644
--- a/src/model/factories/action-factory.ts
+++ b/src/model/factories/action-factory.ts
@@ -109,7 +109,7 @@ function addSingleEventAction({ store, event, optEventData, updateHandler } :
     // active instrument and pattern for event (can be different to currently visible pattern
     // e.g. undo/redo action performed when viewing another pattern)
 
-    let patternIndex = state.sequencer.activePattern,
+    let patternIndex = store.getters.activePattern,
         channelIndex = state.editor.selectedInstrument,
         step         = state.editor.selectedStep;
 
@@ -216,7 +216,7 @@ function addMultipleEventsAction({ store, events } : { store: Store<EffluxState>
     // active instrument and pattern for event (can be different to currently visible pattern
     // e.g. undo/redo action performed when viewing another pattern)
 
-    let patternIndex = state.sequencer.activePattern,
+    let patternIndex = store.getters.activePattern,
         channelIndex = state.editor.selectedInstrument,
         step         = state.editor.selectedStep;
 
@@ -283,10 +283,10 @@ function addMultipleEventsAction({ store, events } : { store: Store<EffluxState>
 function deleteSingleEventOrSelectionAction({ store } : { store: Store<EffluxState> }): IUndoRedoState {
     const song               = store.state.song.activeSong,
           eventList          = store.state.editor.eventList,
-          activePattern      = store.state.sequencer.activePattern,
+          activePattern      = store.getters.activePattern,
           selectedInstrument = store.state.editor.selectedInstrument,
           selectedStep       = store.state.editor.selectedStep,
-          event              = song.patterns[activePattern].channels[selectedInstrument][selectedStep];
+          event              = song.patterns[ activePattern ].channels[ selectedInstrument ][ selectedStep ];
 
     // if a selection is set, store its state for redo purposes
 
@@ -383,7 +383,7 @@ function deleteModuleAutomationAction({ event }: { event: EffluxAudioEvent }): I
 
 function clearPattern({ store }: { store: Store<EffluxState> }): IUndoRedoState {
     const song          = store.state.song.activeSong,
-          patternIndex  = store.state.sequencer.activePattern,
+          patternIndex  = store.getters.activePattern,
           amountOfSteps = store.getters.amountOfSteps;
 
     const { commit } = store;
@@ -404,7 +404,7 @@ function clearPattern({ store }: { store: Store<EffluxState> }): IUndoRedoState
 
 function pastePattern({ store, patternCopy }: { store: Store<EffluxState>, patternCopy: EffluxPattern }): IUndoRedoState {
     const song         = store.state.song.activeSong,
-          patternIndex = store.state.sequencer.activePattern;
+          patternIndex = store.getters.activePattern;
 
     const { getters, commit } = store;
 
@@ -433,7 +433,7 @@ function pastePatternMultiple({ store, patterns, insertIndex } :
 
     if ( insertIndex === -1 ) {
          // if no index was specified, insert after current position
-        insertIndex = rootState.sequencer.activePattern;
+        insertIndex = store.getters.activePattern;
     }
 
     // splice the pattern list at the insertion point, head will contain
@@ -471,8 +471,8 @@ function pastePatternMultiple({ store, patterns, insertIndex } :
     return {
         undo(): void {
             commit( "replacePatterns", patternsHead.concat( patternsTail ));
-            if ( getters.activeSong.patterns.length <= rootState.sequencer.activePattern ) {
-                commit( "setActivePattern", getters.activeSong.patterns.length - 1 );
+            if ( getters.activeSong.order.length <= store.state.sequencer.activeOrderIndex ) {
+                commit( "setActiveOrderIndex", getters.activeSong.order.length - 1 );
             }
             linkLists();
         },
@@ -482,7 +482,8 @@ function pastePatternMultiple({ store, patterns, insertIndex } :
 
 function addPattern({ store }: { store: Store<EffluxState> }): IUndoRedoState {
     const song          = store.state.song.activeSong,
-          patternIndex  = store.state.sequencer.activePattern,
+          patternIndex  = store.getters.activePattern,
+          orderIndex    = store.state.sequencer.activeOrderIndex,
           amountOfSteps = store.getters.amountOfSteps;
 
     const { commit } = store;
@@ -499,7 +500,7 @@ function addPattern({ store }: { store: Store<EffluxState> }): IUndoRedoState {
     return {
         undo(): void {
             commit( "replacePatterns", PatternUtil.removePatternAtIndex( song.patterns, patternIndex + 1 ));
-            commit( "setActivePattern", patternIndex );
+            commit( "setActiveOrderIndex", orderIndex );
         },
         redo: act
     };
@@ -508,24 +509,25 @@ function addPattern({ store }: { store: Store<EffluxState> }): IUndoRedoState {
 function deletePattern({ store }: { store: Store<EffluxState> }): IUndoRedoState {
     const song            = store.state.song.activeSong,
           patterns        = song.patterns,
-          patternIndex    = store.state.sequencer.activePattern,
+          patternIndex    = store.getters.activePattern,
+          orderIndex      = store.state.sequencer.activeOrderIndex,
           amountOfSteps   = store.getters.amountOfSteps,
-          targetIndex     = patternIndex === ( patterns.length - 1 ) ? patternIndex - 1 : patternIndex;
+          targetIndex     = orderIndex === ( song.order.length - 1 ) ? orderIndex - 1 : orderIndex;
 
     const { commit } = store;
     const existingPattern = clonePattern( song, patternIndex );
     const existingOrder = [ ...song.order ];
 
     function act(): void {
-        commit( "setActivePattern", targetIndex );
         commit( "replacePatterns", PatternUtil.removePatternAtIndex( patterns, patternIndex ));
         commit( "replacePatternOrder", PatternOrderUtil.removeAllPatternInstances( existingOrder, patternIndex ));
+        commit( "setActiveOrderIndex", targetIndex );
     }
     act(); // perform action
 
     return {
         undo(): void {
-            commit( "setActivePattern", targetIndex );
+            commit( "setActiveOrderIndex", orderIndex );
             commit( "replacePatterns", PatternUtil.addPatternAtIndex( patterns, patternIndex, amountOfSteps, existingPattern ));
             commit( "replacePatternOrder", existingOrder );
         },
@@ -542,7 +544,7 @@ function cutSelectionAction({ store }: { store: Store<EffluxState> }): IUndoRedo
         commit( "setSelectionChannelRange", { firstChannel: editor.selectedInstrument });
         commit( "setSelection", { selectionStart: editor.selectedStep });
     }
-    const activePattern   = store.state.sequencer.activePattern;
+    const activePattern   = store.getters.activePattern;
     const firstChannel    = selection.firstSelectedChannel;
     const lastChannel     = selection.lastSelectedChannel;
     const selectedMinStep = selection.minSelectedStep;
@@ -581,7 +583,7 @@ function deleteSelectionAction({ store }: { store: Store<EffluxState> }): IUndoR
     const { selection, editor } = store.state;
     const { commit }    = store;
 
-    const activePattern   = store.state.sequencer.activePattern;
+    const activePattern   = store.getters.activePattern;
     const firstChannel    = selection.firstSelectedChannel;
     const lastChannel     = selection.lastSelectedChannel;
     const selectedMinStep = selection.minSelectedStep;
@@ -617,7 +619,7 @@ function deleteSelectionAction({ store }: { store: Store<EffluxState> }): IUndoR
 function pasteSelectionAction({ store }: { store: Store<EffluxState> }): IUndoRedoState {
     const song = store.state.song.activeSong;
     const { eventList, selectedInstrument, selectedStep } = store.state.editor;
-    const { activePattern } = store.state.sequencer;
+    const { activePattern } = store.getters;
     const { selection } = store.state;
     const { commit } = store;
 
diff --git a/src/services/keyboard-service.ts b/src/services/keyboard-service.ts
index 83addb4d..7a8fecf1 100644
--- a/src/services/keyboard-service.ts
+++ b/src/services/keyboard-service.ts
@@ -202,13 +202,13 @@ function handleKeyDown( event: KeyboardEvent ): void {
             break;
 
         case 34: // page down
-            maxStep = activeSong.patterns[ sequencer.activePattern ].steps - 1;
+            maxStep = activeSong.patterns[ store.getters.activePattern ].steps - 1;
             store.commit( "setSelectedStep", Math.min( maxStep, editor.selectedStep + 4 ));
             handleSelectionOnVerticalMovement( event );
             break;
 
         case 35: // end
-            store.commit( "setSelectedStep", activeSong.patterns[ sequencer.activePattern ].steps - 1 );
+            store.commit( "setSelectedStep", activeSong.patterns[ store.getters.activePattern ].steps - 1 );
             handleSelectionOnVerticalMovement( event );
             break;
 
@@ -224,7 +224,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
 
         case 40: // down
 
-            maxStep = activeSong.patterns[ sequencer.activePattern ].steps - 1;
+            maxStep = activeSong.patterns[ store.getters.activePattern ].steps - 1;
             targetStep = editor.selectedStep + 1;
 
             if ( targetStep <= maxStep ) {
@@ -243,8 +243,8 @@ function handleKeyDown( event: KeyboardEvent ): void {
                 if ( setSelectedSlot( editor.selectedSlot + 1 )) {
                     // when not in selection mode and we go right from the most right lane, move to the next pattern (when existing)
                     if ( !shiftDown && editor.selectedInstrument + 1 > MAX_CHANNEL ) {
-                        if ( sequencer.activePattern < ( activeSong.patterns.length - 1 )) {
-                            store.commit( "setActivePattern", sequencer.activePattern + 1 );
+                        if ( sequencer.activeOrderIndex < ( activeSong.order.length - 1 )) {
+                            store.commit( "setActiveOrderIndex", sequencer.activeOrderIndex + 1 );
                             store.commit( "setSelectedInstrument", 0 );
                         } else {
                             store.commit( "setSelectedSlot", MAX_SLOT );
@@ -274,8 +274,8 @@ function handleKeyDown( event: KeyboardEvent ): void {
                 if ( setSelectedSlot( editor.selectedSlot - 1 )) {
                     // when not in selection mode and we go left from the most left lane, move to the previous pattern (when existing)
                     if ( !shiftDown && editor.selectedInstrument - 1 < 0 ) {
-                        if ( sequencer.activePattern > 0 ) {
-                            store.commit( "setActivePattern", sequencer.activePattern - 1 );
+                        if ( sequencer.activeOrderIndex > 0 ) {
+                            store.commit( "setActiveOrderIndex", sequencer.activeOrderIndex - 1 );
                             store.commit( "setSelectedInstrument", MAX_CHANNEL );
                             store.commit( "setSelectedSlot", MAX_SLOT );
                         } else {
@@ -328,7 +328,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
             // select all
             if ( hasOption ) {
                 store.commit( "setMinSelectedStep", 0 );
-                store.commit( "setMaxSelectedStep", activeSong.patterns[ sequencer.activePattern ].steps );
+                store.commit( "setMaxSelectedStep", activeSong.patterns[ store.getters.activePattern ].steps );
                 store.commit( "setSelectionChannelRange", { firstChannel: 0, lastChannel: Config.INSTRUMENT_AMOUNT - 1 });
             }
             break;
@@ -341,7 +341,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
                      store.commit( "setSelectionChannelRange", { firstChannel: editor.selectedInstrument });
                      store.commit( "setSelection", { selectionStart: editor.selectedStep });
                  }
-                 store.commit( "copySelection", { song: activeSong, activePattern: sequencer.activePattern });
+                 store.commit( "copySelection", { song: activeSong, activePattern: store.getters.activePattern });
                  store.commit( "clearSelection" );
              }
              break;
@@ -364,7 +364,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
         case 71: // G
             if ( hasOption ) {
                 EventUtil.glideParameterAutomations(
-                    activeSong, editor.selectedStep, sequencer.activePattern,
+                    activeSong, editor.selectedStep, store.getters.activePattern,
                     editor.selectedInstrument, editor.eventList, store
                 );
                 preventDefault( event ); // in-page search
@@ -540,8 +540,8 @@ function handleDeleteActionForCurrentMode(): void {
             break;
         case MODES.PARAM_VALUE:
         case MODES.PARAM_SELECT:
-            event = state.song.activeSong.patterns[state.sequencer.activePattern]
-                         .channels[state.editor.selectedInstrument ][state.editor.selectedStep];
+            event = state.song.activeSong.patterns[ store.getters.activePattern ]
+                         .channels[ state.editor.selectedInstrument ][ state.editor.selectedStep ];
 
             if ( !event || !event.mp ) {
                 return;
diff --git a/src/services/keyboard/instrument-selection-handler.ts b/src/services/keyboard/instrument-selection-handler.ts
index c10c3008..39658b47 100644
--- a/src/services/keyboard/instrument-selection-handler.ts
+++ b/src/services/keyboard/instrument-selection-handler.ts
@@ -44,7 +44,7 @@ export default {
     setInstrument( keyCode: number ): void {
         if ( keyCode >= ONE && keyCode <= MAX_ACCEPTED_KEYCODE ) {
             const event = state.song.activeSong
-                            .patterns[ state.sequencer.activePattern ]
+                            .patterns[ store.getters.activePattern ]
                             .channels[ state.editor.selectedInstrument ][ state.editor.selectedStep ];
 
             if ( event ) {
diff --git a/src/services/keyboard/module-param-handler.ts b/src/services/keyboard/module-param-handler.ts
index 3eef9efa..0b3fe02b 100644
--- a/src/services/keyboard/module-param-handler.ts
+++ b/src/services/keyboard/module-param-handler.ts
@@ -212,14 +212,14 @@ function getModuleParamByFirstTwoLetters( letters: string, selectedParam: Module
 
 function getEventForPosition( createIfNotExisting: boolean ): EffluxAudioEvent {
     let event = state.song.activeSong
-                    .patterns[ state.sequencer.activePattern ]
+                    .patterns[ store.getters.activePattern ]
                     .channels[ state.editor.selectedInstrument ][ state.editor.selectedStep ];
 
     if ( !event && createIfNotExisting === true ) {
         event = EventFactory.create( state.editor.selectedInstrument );
         store.commit( "addEventAtPosition", {
             event, store, optData: {
-                patternIndex      : state.sequencer.activePattern,
+                patternIndex      : store.getters.activePattern,
                 channelIndex      : state.editor.selectedInstrument,
                 step              : state.editor.selectedStep,
                 newEvent          : true,
diff --git a/src/services/keyboard/module-value-handler.ts b/src/services/keyboard/module-value-handler.ts
index cf952526..907b59b6 100644
--- a/src/services/keyboard/module-value-handler.ts
+++ b/src/services/keyboard/module-value-handler.ts
@@ -126,7 +126,7 @@ function getPreviousEventWithModuleAutomation( step: number ): EffluxAudioEvent
         }
         prevEvent = EventUtil.getFirstEventBeforeStep(
             state.song.activeSong
-                .patterns[ state.sequencer.activePattern ]
+                .patterns[ store.getters.activePattern ]
                 .channels[ state.editor.selectedInstrument ], step
         );
         step = ( prevEvent ) ? step - 1 : 0;
@@ -138,7 +138,7 @@ function getPreviousEventWithModuleAutomation( step: number ): EffluxAudioEvent
 
 function getEventForPosition( createIfNotExisting: boolean ): EffluxAudioEvent {
     let event = state.song.activeSong
-                    .patterns[ state.sequencer.activePattern ]
+                    .patterns[ store.getters.activePattern ]
                     .channels[ state.editor.selectedInstrument ][ state.editor.selectedStep ];
 
     if ( !event && createIfNotExisting === true ) {
@@ -146,7 +146,7 @@ function getEventForPosition( createIfNotExisting: boolean ): EffluxAudioEvent {
         store.commit( "addEventAtPosition", {
             store, event,
             optData: {
-                patternIndex      : state.sequencer.activePattern,
+                patternIndex      : store.getters.activePattern,
                 channelIndex      : state.editor.selectedInstrument,
                 step              : state.editor.selectedStep,
                 newEvent          : true,
diff --git a/src/store/modules/selection-module.ts b/src/store/modules/selection-module.ts
index dac2126d..1df0b3ae 100644
--- a/src/store/modules/selection-module.ts
+++ b/src/store/modules/selection-module.ts
@@ -325,7 +325,7 @@ const SelectionModule: Module<SelectionState, any> = {
                 optSelectionContent = state.copySelection as EffluxChannel[];
             }
             if ( Array.isArray( optSelectionContent ) && optSelectionContent.length > 0 ) {
-                const targetPattern   = song.patterns[activePattern];
+                const targetPattern   = song.patterns[ activePattern ];
                 const selectionLength = optSelectionContent.length;
 
                 for ( let cIndex = selectedInstrument, max = targetPattern.channels.length, j = 0;
diff --git a/src/store/modules/sequencer-module.ts b/src/store/modules/sequencer-module.ts
index bb33bd43..18133112 100644
--- a/src/store/modules/sequencer-module.ts
+++ b/src/store/modules/sequencer-module.ts
@@ -1,7 +1,7 @@
 /**
 * The MIT License (MIT)
 *
-* Igor Zinken 2016-2021 - https://www.igorski.nl
+* Igor Zinken 2016-2023 - https://www.igorski.nl
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
@@ -45,13 +45,12 @@ export interface SequencerState {
     beatUnit: number;
     queueHandlers: OscillatorNode[],
     channelQueue: LinkedList[],
-    activePattern: number;
+    activeOrderIndex: number; // active index within order list
     measureStartTime: number;
     firstMeasureStartTime: number;
     currentStep: number;
     nextNoteTime: number;
     channels: EffluxChannel[];
-    worker: Worker | null
 };
 
 export const createSequencerState = ( props?: Partial<SequencerState> ): SequencerState => ({
@@ -64,16 +63,17 @@ export const createSequencerState = ( props?: Partial<SequencerState> ): Sequenc
     beatUnit              : 4,
     queueHandlers         : [],
     channelQueue          : new Array( Config.INSTRUMENT_AMOUNT ),
-    activePattern         : 0,
+    activeOrderIndex      : 0,
     measureStartTime      : 0,
     firstMeasureStartTime : 0,
     currentStep           : 0,
     nextNoteTime          : 0,
     channels              : [],
-    worker                : null,
     ...props
 });
 
+let worker: Worker;
+
 /* internal methods */
 
 /**
@@ -81,7 +81,7 @@ export const createSequencerState = ( props?: Partial<SequencerState> ): Sequenc
  */
 function enqueueEvent( store: Store<EffluxState>, event: EffluxAudioEvent, eventChannel: number ): void {
     const { sequencer } = store.state;
-    const { beatAmount, nextNoteTime, activePattern, channelQueue } = sequencer;
+    const { beatAmount, nextNoteTime, channelQueue } = sequencer;
     const activeSong = store.state.song.activeSong;
     const { action, seq } = event;
 
@@ -93,7 +93,7 @@ function enqueueEvent( store: Store<EffluxState>, event: EffluxAudioEvent, event
 
     const patternDuration = ( 60 / activeSong.meta.tempo ) * beatAmount;
     const patterns        = activeSong.patterns;
-    const eventPattern    = patterns[activePattern];
+    const eventPattern    = patterns[ store.getters.activePattern ];
 
     seq.mpLength = eventPattern ? patternDuration / eventPattern.steps : 0;
 
@@ -187,6 +187,8 @@ function collect( store: Store<EffluxState> ): void {
     const sequenceEvents = !( state.recording && Metronome.countIn && !Metronome.countInComplete );
     let i, channel, channelStep, event, seq, compareTime;
 
+    const { activePattern } = store.getters;
+
     while ( state.nextNoteTime < ( audioContext.currentTime + state.scheduleAheadTime )) {
         if ( sequenceEvents ) {
             compareTime = state.nextNoteTime - state.measureStartTime;
@@ -200,7 +202,7 @@ function collect( store: Store<EffluxState> ): void {
                     event = channel[ channelStep ];
 
                     // empty slots, recording events or events outside of the current measure can be ignored
-                    if ( !event || event.recording || event.seq.startMeasure !== state.activePattern ) {
+                    if ( !event || event.recording || event.seq.startMeasure !== activePattern ) {
                         continue;
                     }
                     seq = event.seq;
@@ -242,7 +244,6 @@ function collect( store: Store<EffluxState> ): void {
  */
 function step( store: Store<EffluxState> ): void {
     const activeSong = store.state.song.activeSong;
-    const maxMeasure = activeSong.patterns.length - 1;
     const state      = store.state.sequencer;
     const { commit } = store;
 
@@ -256,13 +257,14 @@ function step( store: Store<EffluxState> ): void {
         commit( "setCurrentStep", 0 );
 
         let sync = true;
-        const nextPattern = state.activePattern + 1;
-
+        const nextOrderIndex = state.activeOrderIndex + 1;
+        const maxOrderIndex  = activeSong.order.length - 1;
+    
         // advance/update the measure only when the Sequencer isn't looping
         if ( !state.looping ) {
-            if ( nextPattern > maxMeasure ) {
+            if ( nextOrderIndex > maxOrderIndex ) {
                 // last measure reached, jump back to first
-                commit( "setActivePattern", 0 );
+                commit( "setActiveOrderIndex", 0 );
 
                 // stop playing if we're recording output
 
@@ -289,19 +291,19 @@ function step( store: Store<EffluxState> ): void {
                 Metronome.countInComplete   = true;
                 state.firstMeasureStartTime = getAudioContext().currentTime;
 
-                commit( "setActivePattern", 0 );
+                commit( "setActiveOrderIndex", 0 );
                 return;
             }
         }
-        commit( "setActivePattern", state.activePattern );
+        commit( "setActiveOrderIndex", nextOrderIndex );
     } else {
         commit( "setCurrentStep", currentStep );
     }
 }
 
 function syncPositionToSequencerUpdate( state: SequencerState, activeSong: EffluxSong ): void {
-    const { activePattern : pattern, nextNoteTime : currentTime } = state;
-    setPosition( state, { activeSong, pattern, currentTime });
+    const { activeOrderIndex : orderIndex, nextNoteTime : currentTime } = state;
+    setPosition( state, { activeSong, orderIndex, currentTime });
 }
 
 /**
@@ -309,44 +311,44 @@ function syncPositionToSequencerUpdate( state: SequencerState, activeSong: Efflu
  *
  * @param {Object} state sequencer Vuex store module
  * @param {Object} activeSong
- * @param {number} pattern
+ * @param {number} orderIndex
  * @param {number=} currentTime optional time to sync given pattern to
  *        this will default to the currentTime of the AudioContext for instant enqueuing
  */
-function setPosition( state: SequencerState, { activeSong, pattern, currentTime }:
-    { activeSong: EffluxSong, pattern: number, currentTime?: number }) {
+function setPosition( state: SequencerState, { activeSong, orderIndex, currentTime }:
+    { activeSong: EffluxSong, orderIndex: number, currentTime?: number }) {
 
     const { patterns } = activeSong;
 
-    if ( pattern >= patterns.length ) {
-        pattern = patterns.length - 1;
+    if ( orderIndex >= activeSong.order.length ) {
+        orderIndex = activeSong.order.length - 1;
     }
 
-    if ( state.activePattern !== pattern ) {
+    if ( state.activeOrderIndex !== orderIndex ) {
         state.currentStep = 0;
     }
 
     if ( typeof currentTime !== "number" ) {
         currentTime = getAudioContext()?.currentTime || 0;
     }
-    state.activePattern         = pattern;
-    state.nextNoteTime          = currentTime;
-    state.measureStartTime      = currentTime;
-    state.firstMeasureStartTime = currentTime - ( pattern * ( 60.0 / activeSong.meta.tempo * state.beatAmount ));
+    state.activeOrderIndex      = orderIndex;
+    state.nextNoteTime          = currentTime!;
+    state.measureStartTime      = currentTime!;
+    state.firstMeasureStartTime = currentTime! - ( orderIndex * ( 60.0 / activeSong.meta.tempo * state.beatAmount ));
 
-    state.channels = patterns[ pattern ].channels;
+    state.channels = patterns[ activeSong.order[ orderIndex ]].channels;
 
     // when going to the first measure after having reached the end of the song, stop playing
     // all currently sounding notes (that were enqueued after the first measure, in case we
     // are looping the first measure or the song is only one measure in length)
 
-    if ( pattern === 0 ) {
+    if ( orderIndex === 0 ) {
         state.channelQueue.forEach(( list: LinkedList ): void => {
             let playingNote = list.tail;
             while ( playingNote ) {
                 const nextNote = playingNote.previous;
                 if ( playingNote.data.seq.startMeasure !== 0 ) {
-                    dequeueEvent( state, playingNote.data, currentTime );
+                    dequeueEvent( state, playingNote.data, currentTime! );
                     playingNote.data.seq.playing = false;
                     playingNote.remove();
                 }
@@ -374,10 +376,14 @@ const SequencerModule: Module<SequencerState, any> = {
         isMetronomeEnabled( state: SequencerState ): boolean {
             return Metronome.enabled.value;
         },
+        // TODO: rename to activePatternIndex ?
+        activePattern( state: SequencerState, rootGetters: any ): number {
+            return rootGetters.activeSong.order[ state.activeOrderIndex ];
+        },
+        // @ts-expect-error 'state' is declared but its value is never read.
         amountOfSteps( state: SequencerState, rootGetters: any ): number {
-            return rootGetters.activeSong.patterns[ state.activePattern ].steps;
+            return rootGetters.activeSong.patterns[ rootGetters.activePattern ].steps;
         },
-        position: ( state: SequencerState ) => ({ pattern: state.activePattern, step: state.currentStep })
     },
     mutations: {
         setPlaying( state: SequencerState, isPlaying: boolean ): void {
@@ -392,12 +398,12 @@ const SequencerModule: Module<SequencerState, any> = {
                     Metronome.enabled.value   = true;
                 }
                 state.currentStep = 0;  // always start from beginning
-                state.worker.postMessage({
+                worker.postMessage({
                     cmd: "start",
                     interval: ( state.scheduleAheadTime * 1000 ) / 4
                 });
             } else {
-                state.worker.postMessage({ cmd : "stop" });
+                worker.postMessage({ cmd : "stop" });
                 while ( state.queueHandlers.length ) {
                     freeHandler( state, state.queueHandlers[ 0 ]);
                 }
@@ -411,12 +417,12 @@ const SequencerModule: Module<SequencerState, any> = {
         setRecording( state: SequencerState, isRecording: boolean ): void {
             state.recording = !!isRecording;
         },
-        setActivePattern( state: SequencerState, value: number ): void {
-            state.activePattern = value;
+        setActiveOrderIndex( state: SequencerState, value: number ): void {
+            state.activeOrderIndex = value;
         },
         gotoPreviousPattern( state: SequencerState, activeSong: EffluxSong ): void {
-            if ( state.activePattern > 0 ) {
-                state.activePattern = state.activePattern - 1;
+            if ( state.activeOrderIndex > 0 ) {
+                state.activeOrderIndex = state.activeOrderIndex - 1;
             }
             if ( state.playing ) {
                 syncPositionToSequencerUpdate( state, activeSong );
@@ -425,9 +431,9 @@ const SequencerModule: Module<SequencerState, any> = {
             }
         },
         gotoNextPattern( state: SequencerState, activeSong: EffluxSong ): void {
-            const max = activeSong.patterns.length - 1;
-            if ( state.activePattern < max ) {
-                state.activePattern = state.activePattern + 1;
+            const max = activeSong.order.length - 1;
+            if ( state.activeOrderIndex < max ) {
+                state.activeOrderIndex = state.activeOrderIndex + 1;
             }
             if ( state.playing ) {
                 syncPositionToSequencerUpdate( state, activeSong );
@@ -484,8 +490,9 @@ const SequencerModule: Module<SequencerState, any> = {
                 }
 
                 // spawn Worker to handle the intervallic polling
-                state.worker = new SequencerWorker();
-                state.worker.onmessage = ({ data }) => {
+                
+                worker = worker || new SequencerWorker();
+                worker.onmessage = ({ data }) => {
                     if ( data.cmd === "collect" && state.playing ) {
                         collect( rootStore );
                     }
diff --git a/src/store/modules/song-module.ts b/src/store/modules/song-module.ts
index 17cfa572..5837bb02 100644
--- a/src/store/modules/song-module.ts
+++ b/src/store/modules/song-module.ts
@@ -138,7 +138,7 @@ const SongModule: Module<SongState, any> = {
 
                     if ( optStoreInUndoRedo && optHighlightActiveStep === true ) {
                         // move to the next step in the pattern (unless executed from undo/redo)
-                        const maxStep = store.state.song.activeSong.patterns[ store.state.sequencer.activePattern ].steps - 1;
+                        const maxStep = store.state.song.activeSong.patterns[ store.getters.activePattern ].steps - 1;
                         const targetStep = store.state.editor.selectedStep + 1;
 
                         if ( targetStep <= maxStep ) {
diff --git a/src/utils/event-util.ts b/src/utils/event-util.ts
index 84bba177..73ec771a 100644
--- a/src/utils/event-util.ts
+++ b/src/utils/event-util.ts
@@ -58,8 +58,8 @@ const EventUtil =
         }
         Vue.set( seq, "length", length);
         Vue.set( seq, "startOffset", patternNum * getMeasureDurationInSeconds( tempo ));
-        Vue.set( seq, "startMeasure", patternNum);
-        Vue.set( seq, "startMeasureOffset", eventOffset);
+        Vue.set( seq, "startMeasure", patternNum );
+        Vue.set( seq, "startMeasureOffset", eventOffset );
         Vue.set( seq, "endMeasure", patternNum + Math.abs( Math.ceil((( eventOffset + length ) - measureLength ) / measureLength )));
     },
     /**
diff --git a/src/utils/instrument-util.ts b/src/utils/instrument-util.ts
index e585c3a3..6cbb0629 100644
--- a/src/utils/instrument-util.ts
+++ b/src/utils/instrument-util.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2016-2021 - https://www.igorski.nl
+ * Igor Zinken 2016-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -262,8 +262,8 @@ function recordEventIntoSong( audioEvent: EffluxAudioEvent, store: Store<EffluxS
     const now = Date.now();
     if (( now - lastAddition ) < RECORD_THRESHOLD ) return;
 
-    const { playing, activePattern } = state.sequencer;
-    const { amountOfSteps } = getters;
+    const { playing } = state.sequencer;
+    const { activePattern, amountOfSteps } = getters;
 
     // if the sequencer isn't playing, noteOff events must be added explicitly
     // (this noteOff event is the result of a key release)
@@ -275,7 +275,7 @@ function recordEventIntoSong( audioEvent: EffluxAudioEvent, store: Store<EffluxS
     const pattern      = song.patterns[ activePattern ];
     const channelIndex = state.editor.selectedInstrument;
     const channel      = pattern.channels[ channelIndex ];
-    const step         = playing ? Math.round( getters.position.step / 64 * amountOfSteps ) % amountOfSteps : state.editor.selectedStep;
+    const step         = playing ? Math.round( state.sequencer.currentStep / 64 * amountOfSteps ) % amountOfSteps : state.editor.selectedStep;
 
     // check if the intended target position of the recording already contains an event
 
diff --git a/tests/unit/store/modules/sequencer-module.spec.ts b/tests/unit/store/modules/sequencer-module.spec.ts
new file mode 100644
index 00000000..5e438d50
--- /dev/null
+++ b/tests/unit/store/modules/sequencer-module.spec.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import PatternFactory from "@/model/factories/pattern-factory";
+import SongFactory from "@/model/factories/song-factory";
+import type { EffluxSong } from "@/model/types/song";
+import SequencerModule, { createSequencerState, type SequencerState } from "@/store/modules/sequencer-module";
+
+const { getters, mutations } = SequencerModule;
+
+describe( "Vuex sequencer module", () => {
+    let state: SequencerState;
+    let activeSong: EffluxSong;
+
+    describe( "getters", () => {
+        it( "should be able to retrieve the active playing state", () => {
+            state = createSequencerState({ playing: true });
+            expect( getters.isPlaying( state )).toEqual( true );
+        });
+
+        it( "should be able to retrieve the active looping state", () => {
+            state = createSequencerState({ looping: true });
+            expect( getters.isLooping( state )).toEqual( true );
+        });
+
+        it( "should be able to retrieve the active recording state", () => {
+            state = createSequencerState({ recording: true });
+            expect( getters.isRecording( state )).toEqual( true );
+        });
+
+        describe( "when deriving the active pattern from the active order index", () => {
+            beforeAll(() => {
+                activeSong = SongFactory.create();
+                activeSong.patterns = [
+                    PatternFactory.create( 16 ), PatternFactory.create( 8 ), PatternFactory.create( 4 ) 
+                ];
+                activeSong.order = [ 0, 0, 1, 2 ];
+                state = createSequencerState({ activeOrderIndex: 2 });
+            });
+
+            it( "should be able to retrieve the active pattern", () => {
+                const rootGetters = { activeSong };
+ 
+                expect( getters.activePattern( state, rootGetters )).toEqual( 1 );
+            });
+
+            it( "should be able to retrieve the amount of steps for the active pattern", () => {
+                const rootGetters = { activeSong, activePattern: 1 };
+
+                expect( getters.amountOfSteps( state, rootGetters )).toEqual( 8 );
+            });
+        });
+    });
+});
\ No newline at end of file