-
Notifications
You must be signed in to change notification settings - Fork 64
/
CanvasManager.js
105 lines (98 loc) · 2.9 KB
/
CanvasManager.js
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
class CanvasManager {
constructor(dimension) {
this.zoomer = document.getElementById(`zoomer`)
this.setDefaultDimension()
this.zoomStatus = document.getElementById(`zoomStatus`)
this.mover = document.getElementById('mover')
this.x = 0
this.y = 0
this.zoom = 1
this.sizeAdjust = window.screen.height * .00165
this.mover.style.transform = `translate(0px, 0px)`
this.zoomer.style.transform = `scale(${this.sizeAdjust}, ${this.sizeAdjust})`
this.dragger = document.getElementById('dragger')
}
setDefaultDimension() {
this.zoomer.height = config.DEFAULTLENGTH
this.zoomer.width = config.DEFAULTLENGTH
}
resetMove(e) {
this.x = 0
this.y = 0
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
this.dragger.style.transform = `translate(${this.x}px, ${this.y}px)`
}
handleMove(e) {
e.preventDefault()
switch(e.keyCode){
case 37:
this.x += (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 65:
this.x += (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 38:
this.y += (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 87:
this.y += (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 39:
this.x -= (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 68:
this.x -= (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 40:
this.y -= (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 83:
this.y -= (20 * this.zoom)
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
break;
case 32:
this.cycleZoom(e)
default:
this.mover.style.transform = `translate(${this.x}px, ${this.y}px)`
}
}
zoomMultiplier(zoomLevel){
return this.sizeAdjust * this.zoom
}
cycleZoom(e) {
e.preventDefault()
switch (this.zoom) {
case 1:
this.zoom = 2
this.zoomStatus.innerText = `x2`
break;
case 2:
this.zoom = 4
this.zoomStatus.innerText = `x4`
break;
case 4:
this.zoom = 8
this.zoomStatus.innerText = `x8`
break;
case 8:
this.zoom = 16
this.zoomStatus.innerText = `x16`
break;
case 16:
this.zoom = 1
this.zoomStatus.innerText = `x1`
break;
default:
this.zoom = 1
this.zoomStatus.innerText = `x1`
}
this.zoomer.style.transform = `scale(${this.zoomMultiplier(this.zoom)}, ${this.zoomMultiplier(this.zoom)})`
}
}