You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.5 KiB
138 lines
3.5 KiB
function init_listeners() { |
|
document.querySelector('#c').addEventListener('dragover', cancel); |
|
document.querySelector('#c').addEventListener('drop', drop); |
|
document.querySelector('#c').addEventListener('click', debug); |
|
|
|
document.querySelector('#c').addEventListener('mousedown', mousedown); |
|
document.querySelector('#c').addEventListener('mousemove', mousemove); |
|
document.querySelector('#c').addEventListener('mouseup', mouseup); |
|
document.querySelector('#c').addEventListener('mouseleave', mouseleave); |
|
document.querySelector('#c').addEventListener('wheel', wheel); |
|
|
|
window.addEventListener('keydown', keydown); |
|
window.addEventListener('keyup', keyup); |
|
} |
|
|
|
function debug() { |
|
schedule_draw(); |
|
} |
|
|
|
function cancel(e) { |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
} |
|
|
|
function mousedown(e) { |
|
if (e.button === 1) { |
|
moving = true; |
|
return; |
|
} |
|
} |
|
|
|
function mousemove(e) { |
|
let do_draw = false; |
|
|
|
if (moving) { |
|
offset.x += e.movementX; |
|
offset.y += e.movementY; |
|
do_draw = true; |
|
} |
|
|
|
if (do_draw) { |
|
schedule_draw(); |
|
} |
|
} |
|
|
|
function mouseleave(e) { |
|
if (moving) { |
|
moving = false; |
|
} |
|
} |
|
|
|
function mouseup(e) { |
|
if (e.button === 1 && moving) { |
|
moving = false; |
|
} |
|
} |
|
|
|
function wheel(e) { |
|
const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY}; |
|
const zooming_in = e.deltaY < 0; |
|
const level = zooming_in ? zoom_level + 2 : zoom_level - 2; |
|
const dz = (level > 0 ? config.zoom_delta : -config.zoom_delta); |
|
|
|
zoom_level = level; |
|
zoom_target = Math.pow(1.0 + dz, Math.abs(zoom_level)) |
|
zoom_screenp = screenp; |
|
|
|
schedule_draw(); |
|
} |
|
|
|
function jump_to_first_instruction() { |
|
if (Object.keys(traces).length > 0) { |
|
const trace = traces[Object.keys(traces)[0]].raw; |
|
if (Object.keys(trace).length > 0) { |
|
const first_instruction = trace[Object.keys(trace)[0]]; |
|
offset.x = -first_instruction.cycle * config.w + config.padding * 2; |
|
offset.y = config.padding * 2; |
|
zoom_target = 1; |
|
zoom = 1; |
|
schedule_draw(); |
|
} |
|
} |
|
} |
|
|
|
function keydown(e) { |
|
if (e.code === 'Digit0') { |
|
jump_to_first_instruction(); |
|
} |
|
} |
|
|
|
function keyup(e) { |
|
} |
|
|
|
function drop(e) { |
|
e.preventDefault(); |
|
|
|
if (e.dataTransfer.files.length !== 1) { |
|
console.error('Only one file at once, please!'); |
|
return false; |
|
} |
|
|
|
const file = e.dataTransfer.files[0]; |
|
const fr = new FileReader(); |
|
|
|
const upload_failed = () => { |
|
console.error('Upload failed'); |
|
}; |
|
|
|
const upload_started = () => { |
|
console.log('Upload started'); |
|
}; |
|
|
|
const upload_finished = () => { |
|
const text = fr.result; |
|
console.log('Finished. String length:', text.length); |
|
if (parse(text)) { |
|
jump_to_first_instruction(); |
|
schedule_draw(); |
|
} |
|
}; |
|
|
|
const upload_progress = (e) => { |
|
if (e.lengthComputable) { |
|
const percent = Math.floor(e.loaded / e.total * 100); |
|
console.log(`Progress: ${percent}%`); |
|
} else { |
|
console.log('Progress: unknown'); |
|
} |
|
}; |
|
|
|
fr.addEventListener('abort', upload_failed); |
|
fr.addEventListener('error', upload_failed); |
|
fr.addEventListener('load', upload_finished); |
|
fr.addEventListener('loadstart', upload_started); |
|
fr.addEventListener('progress', upload_progress); |
|
|
|
fr.readAsText(file); |
|
}
|
|
|