chart2music - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.d.ts

@@ -73,2 +73,12 @@ interface AudioEngine {
 
+declare global {
+    interface Window {
+        __chart2music_options__?: {
+            _hertzClamps?: {
+                lower: number;
+                upper: number;
+            };
+        };
+    }
+}
 declare const c2mChart: (input: SonifyTypes) => c2mGolangReturn;
@@ -100,3 +110,7 @@ declare class c2m {
     private _explicitAxes;
+    private _hertzClamps;
+    private _availableActions;
     constructor(input: SonifyTypes);
+    private _initializeActionMap;
+    private _initializeTouchActions;
     _generateSummary(): void;
@@ -116,2 +130,3 @@ private _setData;
     private _initializeKeyActionMap;
+    private _setHertzClamps;
     private _initializeData;
@@ -130,3 +145,5 @@ private _startListening;
     private _playRight;
+    private _getHertzRange;
     private _playCurrent;
+    private _checkAudioEngine;
     private _playDataPoint;
@@ -133,0 +150,0 @@ private _onFocus;

dist/index.js

@@ -270,3 +270,6 @@ var c2mChart = (function (exports) {
         }
-        return `${text.join(", ")}. Use arrow keys to navigate.${live ? " Press M to toggle monitor mode." : ""} Press H for more hotkeys.`;
+        const isMobile = detectIfMobile();
+        const keyboardMessage = `Use arrow keys to navigate.${live ? " Press M to toggle monitor mode." : ""} Press H for more hotkeys.`;
+        const mobileMessage = `Swipe left or right to navigate. 2 finger swipe left or right to play the rest of the category.`;
+        return `${text.join(", ")}. ${isMobile ? mobileMessage : keyboardMessage}`;
     };
@@ -488,2 +491,16 @@ const calculateAxisMinimum = (data, prop) => {
     };
+    const detectIfMobile = () => {
+        const toMatch = [
+            /Android/i,
+            /webOS/i,
+            /iPhone/i,
+            /iPad/i,
+            /iPod/i,
+            /BlackBerry/i,
+            /Windows Phone/i
+        ];
+        return toMatch.some((toMatchItem) => {
+            return navigator.userAgent.match(toMatchItem);
+        });
+    };
 
@@ -595,2 +612,38 @@ var SUPPORTED_CHART_TYPES;
 
+    var ActionSet;
+    (function (ActionSet) {
+        ActionSet["NEXT_POINT"] = "next_point";
+        ActionSet["PREVIOUS_POINT"] = "previous_point";
+        ActionSet["PLAY_RIGHT"] = "play_right";
+        ActionSet["PLAY_LEFT"] = "play_left";
+        ActionSet["STOP_PLAY"] = "stop_play";
+        ActionSet["PREVIOUS_STAT"] = "previous_stat";
+        ActionSet["NEXT_STAT"] = "next_stat";
+        ActionSet["PREVIOUS_CATEGORY"] = "previous_category";
+        ActionSet["NEXT_CATEGORY"] = "next_category";
+        ActionSet["FIRST_POINT"] = "first_point";
+        ActionSet["LAST_POINT"] = "last_point";
+        ActionSet["REPLAY"] = "replay";
+        ActionSet["SELECT"] = "select";
+        ActionSet["PREVIOUS_TENTH"] = "previous_tenth";
+        ActionSet["NEXT_TENTH"] = "next_tenth";
+        ActionSet["GO_MINIMUM"] = "go_minimum";
+        ActionSet["GO_MAXIMUM"] = "go_maximum";
+        ActionSet["SPEED_UP"] = "speed_up";
+        ActionSet["SLOW_DOWN"] = "slow_down";
+        ActionSet["MONITOR"] = "monitor";
+        ActionSet["HELP"] = "help";
+        ActionSet["OPTIONS"] = "options";
+    })(ActionSet || (ActionSet = {}));
+    var TouchActionSet;
+    (function (TouchActionSet) {
+        TouchActionSet["LEFT"] = "left";
+        TouchActionSet["RIGHT"] = "right";
+        TouchActionSet["UP"] = "up";
+        TouchActionSet["DOWN"] = "down";
+        TouchActionSet["DOUBLE_LEFT"] = "double_left";
+        TouchActionSet["DOUBLE_RIGHT"] = "double_right";
+        TouchActionSet["DOUBLE_UP"] = "double_up";
+        TouchActionSet["DOUBLE_DOWN"] = "double_down";
+    })(TouchActionSet || (TouchActionSet = {}));
     const launchOptionDialog = ({ upper, lower }, cb, playCb) => {
@@ -731,5 +784,216 @@ const previousElement = document.activeElement;
             this._sr = new ScreenReaderBridge(this._ccElement);
+            this._availableActions = this._initializeActionMap();
             this._initializeKeyActionMap();
+            this._initializeTouchActions();
             this._startListening();
         }
+        _initializeActionMap() {
+            return {
+                next_point: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._moveRight()) {
+                        this._playAndSpeak();
+                    }
+                },
+                previous_point: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._moveLeft()) {
+                        this._playAndSpeak();
+                    }
+                },
+                play_right: () => {
+                    clearInterval(this._playListInterval);
+                    this._playRight();
+                },
+                play_left: () => {
+                    clearInterval(this._playListInterval);
+                    this._playLeft();
+                },
+                stop_play: () => {
+                    clearInterval(this._playListInterval);
+                },
+                previous_stat: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._movePrevStat()) {
+                        this._flagNewStat = true;
+                        this._playAndSpeak();
+                    }
+                },
+                next_stat: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._moveNextStat()) {
+                        this._flagNewStat = true;
+                        this._playAndSpeak();
+                    }
+                },
+                previous_category: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._groupIndex === 0) {
+                        return;
+                    }
+                    this._groupIndex--;
+                    this._flagNewGroup = true;
+                    this._playAndSpeak();
+                },
+                next_category: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._groupIndex === this._data.length - 1) {
+                        return;
+                    }
+                    this._groupIndex++;
+                    this._flagNewGroup = true;
+                    this._playAndSpeak();
+                },
+                first_point: () => {
+                    clearInterval(this._playListInterval);
+                    this._pointIndex = 0;
+                    this._playAndSpeak();
+                },
+                last_point: () => {
+                    clearInterval(this._playListInterval);
+                    this._pointIndex = this._data[this._groupIndex].length - 1;
+                    this._playAndSpeak();
+                },
+                replay: () => {
+                    clearInterval(this._playListInterval);
+                    this._flagNewGroup = true;
+                    this._flagNewStat = true;
+                    this._playAndSpeak();
+                },
+                select: () => {
+                    this._options.onSelectCallback?.({
+                        slice: this._groups[this._groupIndex],
+                        index: this._pointIndex
+                    });
+                },
+                previous_tenth: () => {
+                    clearInterval(this._playListInterval);
+                    this._moveLeftTenths();
+                    this._playAndSpeak();
+                },
+                next_tenth: () => {
+                    clearInterval(this._playListInterval);
+                    this._moveRightTenths();
+                    this._playAndSpeak();
+                },
+                go_minimum: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._moveToMinimum()) {
+                        this._playAndSpeak();
+                    }
+                },
+                go_maximum: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._moveToMaximum()) {
+                        this._playAndSpeak();
+                    }
+                },
+                speed_up: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._speedRateIndex < SPEEDS.length - 1) {
+                        this._speedRateIndex++;
+                    }
+                    this._sr.render(`Speed, ${SPEEDS[this._speedRateIndex]}`);
+                },
+                slow_down: () => {
+                    clearInterval(this._playListInterval);
+                    if (this._speedRateIndex > 0) {
+                        this._speedRateIndex--;
+                    }
+                    this._sr.render(`Speed, ${SPEEDS[this._speedRateIndex]}`);
+                },
+                monitor: () => {
+                    if (!this._options.live) {
+                        this._sr.render("Not a live chart");
+                        return;
+                    }
+                    this._monitorMode = !this._monitorMode;
+                    this._sr.render(`Monitoring ${this._monitorMode ? "on" : "off"}`);
+                },
+                help: () => {
+                    clearInterval(this._playListInterval);
+                    this._keyEventManager.launchHelpDialog();
+                },
+                options: () => {
+                    this._checkAudioEngine();
+                    launchOptionDialog(this._hertzClamps, (lowerIndex, upperIndex) => {
+                        this._setHertzClamps(lowerIndex, upperIndex);
+                    }, (hertzIndex) => {
+                        this._audioEngine?.playDataPoint(HERTZ[hertzIndex], 0, NOTE_LENGTH);
+                    });
+                }
+            };
+        }
+        _initializeTouchActions() {
+            let touches = [];
+            const elem = this._chartElement;
+            const touchActionMap = {
+                left: this._availableActions.previous_point,
+                right: this._availableActions.next_point,
+                up: this._availableActions.previous_stat,
+                down: this._availableActions.next_stat,
+                double_down: this._availableActions.next_category,
+                double_left: this._availableActions.play_left,
+                double_right: this._availableActions.play_right,
+                double_up: this._availableActions.previous_category
+            };
+            let waitTime = 0;
+            let lastDirection = "";
+            let secondTouchTimeout = null;
+            elem.addEventListener("touchstart", (e) => {
+                e.preventDefault();
+                this._availableActions.stop_play();
+                if (document.activeElement !== this._chartElement) {
+                    this._chartElement.focus();
+                }
+                Array.from(e.targetTouches).forEach((touch) => {
+                    touches.push(touch);
+                });
+            });
+            const endTouch = (e) => {
+                e.preventDefault();
+                let direction = "";
+                Array.from(e.changedTouches).forEach((touch) => {
+                    const startTouch = touches.find((t) => t.identifier === touch.identifier);
+                    touches = touches.filter((t) => t.identifier !== touch.identifier);
+                    const { clientX: startX, clientY: startY } = startTouch;
+                    const { clientX: endX, clientY: endY } = touch;
+                    const xDiff = endX - startX;
+                    const yDiff = endY - startY;
+                    if (xDiff < -200 && Math.abs(yDiff) < 200) {
+                        direction = TouchActionSet.LEFT;
+                    }
+                    else if (xDiff > 200 && Math.abs(yDiff) < 200) {
+                        direction = TouchActionSet.RIGHT;
+                    }
+                    else if (yDiff < -200 && Math.abs(xDiff) < 200) {
+                        direction = TouchActionSet.UP;
+                    }
+                    else if (yDiff > 200 && Math.abs(xDiff) < 200) {
+                        direction = TouchActionSet.DOWN;
+                    }
+                    else {
+                        direction = "";
+                        return;
+                    }
+                    if (waitTime > new Date().valueOf() - 25) {
+                        if (direction === lastDirection) {
+                            clearTimeout(secondTouchTimeout);
+                            touchActionMap[`double_${direction}`]();
+                            direction = "";
+                        }
+                    }
+                    if (touches.length > 0) {
+                        waitTime = new Date().valueOf();
+                        lastDirection = direction;
+                    }
+                    secondTouchTimeout = setTimeout(() => {
+                        touchActionMap[direction]?.();
+                        direction = "";
+                    }, 25);
+                });
+            };
+            elem.addEventListener("touchend", endTouch);
+            elem.addEventListener("touchcancel", endTouch);
+        }
         _generateSummary() {
@@ -879,8 +1143,3 @@ this._summary = generateSummary({
                     key: "ArrowRight",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._moveRight()) {
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.next_point
                 },
@@ -890,8 +1149,3 @@ {
                     key: "ArrowLeft",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._moveLeft()) {
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.previous_point
                 },
@@ -901,6 +1155,3 @@ {
                     key: "Shift+End",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._playRight();
-                    }
+                    callback: this._availableActions.play_right
                 },
@@ -910,6 +1161,3 @@ {
                     key: "Shift+Home",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._playLeft();
-                    }
+                    callback: this._availableActions.play_left
                 },
@@ -920,5 +1168,3 @@ {
                     keyDescription: "Control",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                    }
+                    callback: this._availableActions.stop_play
                 },
@@ -928,9 +1174,3 @@ {
                     key: "ArrowUp",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._movePrevStat()) {
-                            this._flagNewStat = true;
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.previous_stat
                 },
@@ -940,9 +1180,3 @@ {
                     key: "ArrowDown",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._moveNextStat()) {
-                            this._flagNewStat = true;
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.next_stat
                 },
@@ -952,11 +1186,3 @@ {
                     key: "PageUp",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._groupIndex === 0) {
-                            return;
-                        }
-                        this._groupIndex--;
-                        this._flagNewGroup = true;
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.previous_category
                 },
@@ -966,11 +1192,3 @@ {
                     key: "PageDown",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._groupIndex === this._data.length - 1) {
-                            return;
-                        }
-                        this._groupIndex++;
-                        this._flagNewGroup = true;
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.next_category
                 },
@@ -980,7 +1198,3 @@ {
                     key: "Home",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._pointIndex = 0;
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.first_point
                 },
@@ -990,7 +1204,3 @@ {
                     key: "End",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._pointIndex = this._data[this._groupIndex].length - 1;
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.last_point
                 },
@@ -1001,8 +1211,3 @@ {
                     keyDescription: "Spacebar",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._flagNewGroup = true;
-                        this._flagNewStat = true;
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.replay
                 },
@@ -1012,8 +1217,3 @@ {
                     key: "Enter",
-                    callback: () => {
-                        this._options.onSelectCallback?.({
-                            slice: this._groups[this._groupIndex],
-                            index: this._pointIndex
-                        });
-                    }
+                    callback: this._availableActions.select
                 },
@@ -1023,7 +1223,3 @@ {
                     key: "Ctrl+ArrowLeft",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._moveLeftTenths();
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.previous_tenth
                 },
@@ -1033,7 +1229,3 @@ {
                     key: "Ctrl+ArrowRight",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._moveRightTenths();
-                        this._playAndSpeak();
-                    }
+                    callback: this._availableActions.next_tenth
                 },
@@ -1043,8 +1235,3 @@ {
                     key: "[",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._moveToMinimum()) {
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.go_minimum
                 },
@@ -1054,8 +1241,3 @@ {
                     key: "]",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._moveToMaximum()) {
-                            this._playAndSpeak();
-                        }
-                    }
+                    callback: this._availableActions.go_maximum
                 },
@@ -1065,9 +1247,3 @@ {
                     key: "q",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._speedRateIndex < SPEEDS.length - 1) {
-                            this._speedRateIndex++;
-                        }
-                        this._sr.render(`Speed, ${SPEEDS[this._speedRateIndex]}`);
-                    }
+                    callback: this._availableActions.speed_up
                 },
@@ -1077,9 +1253,3 @@ {
                     key: "e",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        if (this._speedRateIndex > 0) {
-                            this._speedRateIndex--;
-                        }
-                        this._sr.render(`Speed, ${SPEEDS[this._speedRateIndex]}`);
-                    }
+                    callback: this._availableActions.slow_down
                 },
@@ -1089,10 +1259,3 @@ {
                     key: "m",
-                    callback: () => {
-                        if (!this._options.live) {
-                            this._sr.render("Not a live chart");
-                            return;
-                        }
-                        this._monitorMode = !this._monitorMode;
-                        this._sr.render(`Monitoring ${this._monitorMode ? "on" : "off"}`);
-                    }
+                    callback: this._availableActions.monitor
                 },
@@ -1102,6 +1265,3 @@ {
                     key: "h",
-                    callback: () => {
-                        clearInterval(this._playListInterval);
-                        this._keyEventManager.launchHelpDialog();
-                    }
+                    callback: this._availableActions.help
                 },
@@ -1111,10 +1271,3 @@ {
                     key: "o",
-                    callback: () => {
-                        this._checkAudioEngine();
-                        launchOptionDialog(this._hertzClamps, (lowerIndex, upperIndex) => {
-                            this._setHertzClamps(lowerIndex, upperIndex);
-                        }, (hertzIndex) => {
-                            this._audioEngine?.playDataPoint(HERTZ[hertzIndex], 0, NOTE_LENGTH);
-                        });
-                    }
+                    callback: this._availableActions.options
                 }
@@ -1121,0 +1274,0 @@ ]);

dist/types/c2mChart.d.ts

@@ -40,3 +40,6 @@ import type { SonifyTypes, c2mGolangReturn } from "./types";
     private _hertzClamps;
+    private _availableActions;
     constructor(input: SonifyTypes);
+    private _initializeActionMap;
+    private _initializeTouchActions;
     _generateSummary(): void;
@@ -43,0 +46,0 @@ private _setData;

dist/types/utils.d.ts

@@ -29,2 +29,3 @@ import type { SupportedDataPointType } from "./dataPoint";
 export declare const checkForNumberInput: (metadataByGroup: groupedMetadata[], data: SonifyTypes["data"]) => groupedMetadata[];
+export declare const detectIfMobile: () => boolean;
 export {};

package.json

 {
     "name": "chart2music",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.mjs",

No alert changes

Improved metrics

Total package byte prevSize

139949

increased by10.89%

Lines of code

3347

increased by10.83%

No dependency changes