2d-grid-map/Background.js at main · JavaScriptPlayground/2d-grid-map · 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
exportclassBackground{

 #canvas
 #ctx
 #origin
 #updateFunction

constructor(canvas,gridsize=10,zoomSteps=5){

this.#canvas =canvas

this.#ctx =this.#canvas.getContext('2d')

this.#origin ={
posX: 0,
posY: 0,
offsetX: ()=>{
// calculate the rest in the X direction if devided by gridSize
returnthis.#origin.posX%this.gridSize
},
offsetY: ()=>{
// calculate the rest in the Y direction if devided by gridSize
returnthis.#origin.posY%this.gridSize
}
}

this.gridSize=gridsize
this.zoomSteps=zoomSteps

this.style={
grid: {
color: '#000000',
lineWidth: 1
}
}

this.#updateFunction =()=>{}

}

getOrigin(){
return{
posX: this.#origin.posX,
posY: this.#origin.posY
}
}

getOffset(){
return{
offsetX: this.#origin.offsetX(),
offsetY: this.#origin.offsetY()
}
}

moveTo(posX,posY){
this.#origin.posX=posX
this.#origin.posY=posY
this.clear()
this.#drawGrid()
this.#updateFunction()
}

moveBy(movementX=0,movementY=0){
constmoveToX=this.#origin.posX+movementX
constmoveToY=this.#origin.posY+movementY
this.moveTo(moveToX,moveToY)
}

clear(){
this.#ctx.clearRect(0,0,this.#canvas.width,this.#canvas.height)
}

resize(width,height){
this.#canvas.width=width
this.#canvas.height=height
this.clear()
this.#drawGrid()
this.#updateFunction()
}

zoomAt(posX,posY,directionIn){

// calculate the new position of the grid based on the scroll position
constmoveByX=Math.floor(((posX-this.#origin.posX)/this.gridSize)*this.zoomSteps)
constmoveByY=Math.floor(((posY-this.#origin.posY)/this.gridSize)*this.zoomSteps)

// zoom in
if(directionIn){
this.gridSize+=this.zoomSteps
this.moveBy(-moveByX,-moveByY)
}

// zoom out
elseif(!directionIn&&this.gridSize>this.zoomSteps){
this.gridSize-=this.zoomSteps
this.moveBy(moveByX,moveByY)
}
}

update(callbackfn){
this.#updateFunction =callbackfn
}

 #drawGrid(){

// set stroke style and line width
this.#ctx.strokeStyle=this.style.grid.color
this.#ctx.lineWidth=this.style.grid.lineWidth

// draw vertical lines
for(letwidth=this.#origin.offsetX();width<this.#canvas.width;width+=this.gridSize){
this.#ctx.beginPath()
this.#ctx.moveTo(width,0);
this.#ctx.lineTo(width,this.#canvas.height)
this.#ctx.stroke()
this.#ctx.closePath()
}

// draw horizontal lines
for(letheight=this.#origin.offsetY();height<this.#canvas.height;height+=this.gridSize){
this.#ctx.beginPath()
this.#ctx.moveTo(0,height);
this.#ctx.lineTo(this.#canvas.width,height)
this.#ctx.stroke()
this.#ctx.closePath()
}
}
}