87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
export default class SvgMapUI {
|
|
constructor(host) {
|
|
this.host = host
|
|
this.scale = 1
|
|
this.pos = { x: 0, y: 0 }
|
|
console.log(host)
|
|
this.host.onwheel = this.handle_wheel.bind(this)
|
|
this.host.onmousedown = this.handle_mousedown.bind(this)
|
|
this.host.onmousemove = this.handle_mousemove.bind(this)
|
|
this.host.onmouseup = this.handle_mouseup.bind(this)
|
|
|
|
this.is_down = false
|
|
|
|
this.set_scale(1)
|
|
}
|
|
|
|
|
|
set(html){
|
|
this.host.innerHTML = html
|
|
}
|
|
|
|
handle_mousedown(event) {
|
|
this.is_down = true
|
|
this.downin = { x: event.clientX, y: event.clientY }
|
|
console.log(event)
|
|
// clientX: 451, clientY: 297
|
|
// layerX: 451, layerY: 297
|
|
}
|
|
|
|
handle_mousemove(event) {
|
|
if (this.is_down) {
|
|
event.preventDefault()
|
|
let dx = event.clientX - this.downin.x
|
|
let dy = event.clientY - this.downin.y
|
|
|
|
this.pos.x -= dx * this.scale
|
|
this.pos.y -= dy * this.scale
|
|
this.set_scale(this.scale)
|
|
this.downin = { x: event.clientX, y: event.clientY }
|
|
// this.downin = {x: event.clientX, y: event.clientY}
|
|
}
|
|
// console.log(event.x, event.clientX + this.pos.x, this.scale)
|
|
}
|
|
|
|
handle_mouseup(event) {
|
|
this.is_down = false
|
|
}
|
|
|
|
|
|
handle_wheel(event) {
|
|
event.preventDefault()
|
|
|
|
if (event.ctrlKey) {
|
|
if (event.deltaY > 0) {
|
|
this.scale_up()
|
|
}
|
|
else
|
|
this.scale_down()
|
|
}
|
|
|
|
else if (event.shiftKey) {
|
|
console.log('shifted')
|
|
}
|
|
|
|
else {
|
|
|
|
}
|
|
|
|
console.log(event)
|
|
}
|
|
|
|
set_scale(scale) {
|
|
this.scale = scale
|
|
if (!this.host.childNodes.length) return;
|
|
this.host.childNodes[0].setAttribute("viewBox", `${this.pos.x} ${this.pos.y} ${2000 * this.scale} ${2000 * this.scale}`)
|
|
// this.host.childNodes[0].setAttribute("width", `1000`)
|
|
// this.host.childNodes[0].setAttribute("height", `1000`)
|
|
}
|
|
|
|
scale_up() {
|
|
this.set_scale(this.scale * 1.1)
|
|
}
|
|
|
|
scale_down() {
|
|
this.set_scale(this.scale * 0.9)
|
|
}
|
|
} |