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.
190 lines
5.1 KiB
190 lines
5.1 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); |
|
|
|
document.querySelector('#file-input').addEventListener('change', form_upload); |
|
|
|
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 || (e.button === 0 && spacedown)) { |
|
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 || e.button === 0 && spacedown) && moving) { |
|
moving = false; |
|
} |
|
} |
|
|
|
function wheel(e) { |
|
const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY}; |
|
const zooming_in = e.deltaY < 0; |
|
let level = zooming_in ? zoom_level + 2 : zoom_level - 2; |
|
const dz = (level > 0 ? config.zoom_delta : -config.zoom_delta); |
|
|
|
if (level > config.max_zoom_level) { |
|
level = config.max_zoom_level; |
|
} |
|
|
|
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 quads = traces[Object.keys(traces)[0]].geo; |
|
offset.x = -quads.pos[0] + config.padding * 2; |
|
offset.y = quads.pos[1] + config.padding * 2; |
|
zoom_target = 1; |
|
zoom = 1; |
|
schedule_draw(); |
|
} |
|
} |
|
|
|
function keydown(e) { |
|
if (e.code === 'Digit0') { |
|
jump_to_first_instruction(); |
|
} else if (e.code === 'Space') { |
|
spacedown = true; |
|
} |
|
} |
|
|
|
function keyup(e) { |
|
if (e.code === 'Space') { |
|
spacedown = false; |
|
if (moving) { |
|
moving = false; |
|
} |
|
} |
|
} |
|
|
|
function upload_file(file) { |
|
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('Upload finished. String length:', text.length); |
|
|
|
import_worker.onmessage = (e) => { |
|
const msg = e.data; |
|
if (msg.type === 'trace') { |
|
traces['0'] = msg.data; |
|
jump_to_first_instruction(); |
|
schedule_draw(); |
|
} else if (msg.type === 'rasterize') { |
|
const data = msg.data; |
|
queue_rasterize(data.text, data.at); |
|
} else if (msg.type === 'rasterize_numbers') { |
|
const value = msg.up_to; |
|
const at = msg.at; |
|
|
|
number_base.x = at.x; |
|
number_base.y = at.y; |
|
|
|
for (let i = 1; i <= value; ++i) { |
|
queue_rasterize(i, {...at}); |
|
at.x += 1; |
|
if (at.x === Math.floor(config.raster_texture_size / config.w)) { |
|
at.x = 0; |
|
at.y += 1; |
|
} |
|
} |
|
} else if (msg.type === 'progress_parse') { |
|
console.log(`Parsing: ${msg.data}%`); |
|
} else if (msg.type === 'progress_generate') { |
|
console.log(`Generating geometry: ${msg.data}%`); |
|
} |
|
}; |
|
|
|
import_worker.postMessage({'type': 'import', 'text': text}); |
|
}; |
|
|
|
const upload_progress = (e) => { |
|
if (e.lengthComputable) { |
|
const percent = Math.floor(e.loaded / e.total * 100); |
|
console.log(`Uploading: ${percent}%`); |
|
} else { |
|
console.log('Uploading: 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); |
|
} |
|
|
|
function form_upload(e) { |
|
if (e.target.files.length === 1) { |
|
upload_file(e.target.files[0]); |
|
} else if (e.target.files > 1) { |
|
console.error('Only one file at a time for now!'); |
|
} |
|
} |
|
|
|
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]; |
|
upload_file(file); |
|
}
|
|
|