Introduced activeOrderIndex to allow sequenced playback through order…

… lists with repeated patterns
igorski · Sep 9, 2023 · de65b05 · de65b05
1 parent 2b5b6da
commit de65b05
Show file tree

Hide file tree

Showing 23 changed files with 269 additions and 186 deletions.
diff --git 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
@@ -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
@@ -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
@@ -107,14 +107,14 @@ 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,
             selectedInstrument   : state => state.editor.selectedInstrument,
             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
@@ -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
@@ -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
@@ -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 {