MIDI_JS/inputEvents.js at master · Dan12/MIDI_JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// Setup namespace
var Input_Events = new function() {

    // c and v, for copy and paste
    var importantKeys = [67,86];

    // return new inputevents object
    this.init = function(editor){
        this.Inputevents = new InputEvents(editor);
    }

    // constructor
    var InputEvents = function(editor){

        // create detail object
        // reference will be sent to all eventListeners attached to editor
        this.detail = {};
        this.detail.mouseDown = false;
        this.detail.mouseDrag = false;
        this.detail.mouseX = -1;
        this.detail.mouseY = -1;
        this.detail.keyDown = null;
        this.detail.ctrlKey = false;
        this.detail.deltaX = 0;
        this.detail.deltaY = 0;
        this.detail.scrollConsumes = 0;
        this.detail.doubleClickConsumes = 0;

        this.editor = editor;
        this.prevMouseX = -1;
        this.prevMouseY = -1;

        // setup all input methods
        var thisObj = this;
        // detail refers to same object
        this.inputEvent = new CustomEvent('InputEvent', {"detail":this.detail});
        $(this.editor).mousedown(function(e){thisObj.mouseInputDown(e); return false;});
        $(this.editor).mouseup(function(e){thisObj.mouseInputUp(e); return false;});
        $(this.editor).mousemove(function(e){thisObj.mouseInputMove(e); return false;});
        $(this.editor).mouseleave(function(e){thisObj.mouseInputLeave(e); return false;});
        $(this.editor).dblclick(function(e){e.preventDefault(); thisObj.mouseInputDoubleClick(e); return false;});
        $(document).keydown(function(e){
            // important keycodes for ctrl return false to prevent default behavior
            thisObj.keyInputDown(e);
            if((e.ctrlKey || e.metaKey) && importantKeys.indexOf(e.keyCode) != -1)
                return false;
        });
        $(document).keyup(function(e){
            // important keycodes for ctrl return false to prevent default behavior
            thisObj.keyInputUp(e);
            if((e.ctrlKey || e.metaKey) && importantKeys.indexOf(e.keyCode) != -1)
                return false;
        });

        this.editor.addEventListener('wheel',function(e){e.preventDefault(); thisObj.mouseInputWheel(e); return false;});

        console.log("New Input Events");
    }

    // keydown
    InputEvents.prototype.keyInputDown = function(event){
        this.detail.keyDown = event.keyCode;
        this.detail.ctrlKey = event.ctrlKey || event.metaKey;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // keyup, set key to null
    InputEvents.prototype.keyInputUp = function(event){
        this.detail.keyDown = null;
        this.detail.ctrlKey = false;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // mouse leave canvas
    InputEvents.prototype.mouseInputLeave = function(event){
        this.detail.mouseDown = false;
        this.detail.mouseX = -1;
        this.detail.mouseY = -1;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // mouse down
    InputEvents.prototype.mouseInputDown = function(event){
        this.detail.mouseX = event.pageX - $(this.editor).offset().left;
        this.detail.mouseY = event.pageY - $(this.editor).offset().top;
        this.detail.deltaX = 0;
        this.detail.deltaY = 0;
        this.detail.mouseDown = true;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // mouse up
    InputEvents.prototype.mouseInputUp = function(event){
        this.detail.mouseX = event.pageX - $(this.editor).offset().left;
        this.detail.mouseY = event.pageY - $(this.editor).offset().top;
        this.detail.mouseDown = false;
        this.prevMouseX = -1;
        this.prevMouseY = -1;
        this.detail.mouseDrag = false;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // mouse move
    InputEvents.prototype.mouseInputMove = function(event){
        this.detail.mouseX = event.pageX - $(this.editor).offset().left;
        this.detail.mouseY = event.pageY - $(this.editor).offset().top;
        if(this.prevMouseX != -1){
            this.detail.deltaX = this.detail.mouseX-this.prevMouseX;
            this.detail.deltaY = this.detail.mouseY-this.prevMouseY;
        }
        this.prevMouseX = this.detail.mouseX;
        this.prevMouseY = this.detail.mouseY;
        if(this.detail.mouseDown)
            this.detail.mouseDrag = true;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // scroll on editor
    InputEvents.prototype.mouseInputWheel = function(event){
        this.detail.deltaX = event.deltaX;
        this.detail.deltaY = event.deltaY;
        // no NotScroll method so can't tell when scrolling stops
        // number of objects checking scroll is 2
        // each object consumes a scrollConsumes, meaning that scrollConsumes == 0 is NotScroll
        this.detail.scrollConsumes = 2;
        this.editor.dispatchEvent(this.inputEvent);
    }

    // double click
    InputEvents.prototype.mouseInputDoubleClick = function(event){
        // consumed by notesHandler
        this.detail.doubleClickConsumes = 1;
        this.editor.dispatchEvent(this.inputEvent);
    }
}