A.Olokhtonov
5 months ago
6 changed files with 41 additions and 367 deletions
@ -1,327 +0,0 @@
@@ -1,327 +0,0 @@
|
||||
function on_down(e) { |
||||
const x = Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom); |
||||
const y = Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom); |
||||
|
||||
// Scroll wheel (mouse button 3)
|
||||
if (e.button === 1) { |
||||
// storage.state.moving = true;
|
||||
// storage.state.mousedown = true;
|
||||
return; |
||||
} |
||||
|
||||
// Right mouse button
|
||||
if (e.button === 2) { |
||||
const image_hit = image_at(x, y); |
||||
activate_image(image_hit); |
||||
e.preventDefault(); |
||||
return; |
||||
} |
||||
|
||||
// Left mouse button
|
||||
if (e.button === 0) { |
||||
const image_hit = image_at(context, x, y); |
||||
|
||||
if (elements.active_image !== null && image_hit !== null) { |
||||
const image_id = image_hit.getAttribute('data-image-id'); |
||||
const image_position = storage.images[image_id]; |
||||
storage.state.moving_image = true; |
||||
storage.moving_image_original_x = image_position.x; |
||||
storage.moving_image_original_y = image_position.y; |
||||
return; |
||||
} |
||||
|
||||
if (storage.state.moving) { |
||||
storage.state.mousedown = true; |
||||
return; |
||||
} |
||||
|
||||
storage.state.drawing = true; |
||||
|
||||
if (storage.ctx1.lineWidth !== storage.cursor.width) { |
||||
storage.ctx1.lineWidth = storage.cursor.width; |
||||
} |
||||
|
||||
storage.cursor.x = x; |
||||
storage.cursor.y = y; |
||||
|
||||
if (storage.tools.active === 'pencil') { |
||||
const predraw = predraw_event(x, y); |
||||
storage.current_stroke.push(predraw); |
||||
fire_event(predraw); |
||||
} else if (storage.tools.active === 'ruler') { |
||||
storage.ruler_origin.x = x; |
||||
storage.ruler_origin.y = y; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function on_move(e) { |
||||
const last_x = storage.cursor.x; |
||||
const last_y = storage.cursor.y; |
||||
|
||||
const x = storage.cursor.x = Math.max(Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom), 0); |
||||
const y = storage.cursor.y = Math.max(Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom), 0); |
||||
|
||||
const old_offset_x = storage.canvas.offset_x; |
||||
const old_offset_y = storage.canvas.offset_y; |
||||
|
||||
if (elements.active_image && storage.state.moving_image) { |
||||
const dx = Math.round(e.movementX / storage.canvas.zoom); |
||||
const dy = Math.round(e.movementY / storage.canvas.zoom); |
||||
|
||||
const image_id = elements.active_image.getAttribute('data-image-id'); |
||||
|
||||
const ix = storage.images[image_id].x += dx; |
||||
const iy = storage.images[image_id].y += dy; |
||||
|
||||
elements.active_image.style.transform = `translate(${ix}px, ${iy}px)`; |
||||
|
||||
return; |
||||
} |
||||
|
||||
if (storage.state.drawing) { |
||||
if (storage.tools.active === 'pencil') { |
||||
const width = storage.cursor.width; |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(last_x, last_y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
|
||||
const predraw = predraw_event(x, y); |
||||
storage.current_stroke.push(predraw); |
||||
|
||||
fire_event(predraw); |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const erased = strokes_intersect_line(last_x, last_y, x, y); |
||||
storage.erased.push(...erased); |
||||
|
||||
if (erased.length > 0) { |
||||
for (const other_event of storage.events) { |
||||
for (const stroke_id of erased) { |
||||
if (stroke_id === other_event.stroke_id) { |
||||
if (!other_event.deleted) { |
||||
other_event.deleted = true; |
||||
const stats = stroke_stats(other_event.points, storage.cursor.width); |
||||
redraw_region(stats.bbox); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const old_ruler = [ |
||||
{'x': storage.ruler_origin.x, 'y': storage.ruler_origin.y}, |
||||
{'x': last_x, 'y': last_y} |
||||
]; |
||||
|
||||
const stats = stroke_stats(old_ruler, storage.cursor.width); |
||||
const bbox = stats.bbox; |
||||
|
||||
storage.ctx1.clearRect(bbox.xmin, bbox.ymin, bbox.xmax - bbox.xmin, bbox.ymax - bbox.ymin); |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(storage.ruler_origin.x, storage.ruler_origin.y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
} else if (storage.state.moving && storage.state.mousedown) { |
||||
storage.canvas.offset_x -= e.movementX; |
||||
storage.canvas.offset_y -= e.movementY; |
||||
|
||||
if (storage.canvas.offset_x !== old_offset_x || storage.canvas.offset_y !== old_offset_y) { |
||||
move_canvas(); |
||||
} |
||||
|
||||
// if (storage.canvas.offset_x > storage.canvas.max_scroll_x) storage.canvas.offset_x = storage.canvas.max_scroll_x;
|
||||
// if (storage.canvas.offset_x < 0) storage.canvas.offset_x = 0;
|
||||
// if (storage.canvas.offset_y > storage.canvas.max_scroll_y) storage.canvas.offset_y = storage.canvas.max_scroll_y;
|
||||
// if (storage.canvas.offset_y < 0) storage.canvas.offset_y = 0;
|
||||
} |
||||
|
||||
e.preventDefault(); |
||||
} |
||||
|
||||
async function on_up(e) { |
||||
if (storage.state.moving_image && e.button === 0) { |
||||
storage.state.moving_image = false; |
||||
const image_id = elements.active_image.getAttribute('data-image-id'); |
||||
const position = storage.images[image_id]; |
||||
// Store delta instead of new position for easy undo
|
||||
const event = image_move_event(image_id, position.x - storage.moving_image_original_x, position.y - storage.moving_image_original_y); |
||||
await queue_event(event); |
||||
storage.moving_image_original_x = null; |
||||
storage.moving_image_original_y = null; |
||||
return; |
||||
} |
||||
|
||||
if (storage.state.moving && (e.button === 1 || e.button === 0)) { |
||||
storage.state.mousedown = false; |
||||
if (!storage.state.spacedown) { |
||||
storage.state.moving = false; |
||||
return; |
||||
} |
||||
} |
||||
|
||||
if (storage.state.drawing && e.button === 0) { |
||||
if (storage.tools.active === 'pencil') { |
||||
const event = stroke_event(); |
||||
storage.current_stroke = []; |
||||
await queue_event(event); |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const events = eraser_events(); |
||||
storage.erased = []; |
||||
if (events.length > 0) { |
||||
for (const event of events) { |
||||
await queue_event(event); |
||||
} |
||||
} |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const event = ruler_event(storage.cursor.x, storage.cursor.y); |
||||
await queue_event(event); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
|
||||
storage.state.drawing = false; |
||||
|
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_keydown(e) { |
||||
if (e.code === 'Space' && !storage.state.drawing) { |
||||
storage.state.moving = true; |
||||
storage.state.spacedown = true; |
||||
return; |
||||
} |
||||
|
||||
if (e.code === 'KeyZ' && e.ctrlKey) { |
||||
undo(); |
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_keyup(e) { |
||||
if (e.code === 'Space' && storage.state.moving) { |
||||
storage.state.moving = false; |
||||
storage.state.spacedown = false; |
||||
} |
||||
} |
||||
|
||||
function on_leave(e) { |
||||
// TODO: broken when "moving"
|
||||
if (storage.state.moving) { |
||||
storage.state.moving = false; |
||||
storage.state.holding = false; |
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_resize(e) { |
||||
const width = window.innerWidth; |
||||
const height = window.innerHeight; |
||||
|
||||
elements.canvas0.width = elements.canvas1.width = width; |
||||
elements.canvas0.height = elements.canvas1.height = height; |
||||
|
||||
storage.ctx1.lineJoin = storage.ctx1.lineCap = storage.ctx0.lineJoin = storage.ctx0.lineCap = 'round'; |
||||
storage.ctx1.lineWidth = storage.ctx0.lineWidth = storage.cursor.width; |
||||
|
||||
redraw_region({'xmin': 0, 'xmax': width, 'ymin': 0, 'ymax': width}); |
||||
// storage.canvas.max_scroll_x = storage.canvas.width - window.innerWidth;
|
||||
// storage.canvas.max_scroll_y = storage.canvas.height - window.innerHeight;
|
||||
} |
||||
|
||||
async function on_drop(e) { |
||||
e.preventDefault(); |
||||
const file = e.dataTransfer.files[0]; |
||||
const bitmap = await createImageBitmap(file); |
||||
|
||||
const x = storage.cursor.x - Math.round(bitmap.width / 2); |
||||
const y = storage.cursor.y - Math.round(bitmap.height / 2); |
||||
|
||||
// storage.ctx0.drawImage(bitmap, x, y);
|
||||
|
||||
const form_data = new FormData(); |
||||
form_data.append('file', file); |
||||
|
||||
const resp = await fetch(`/api/image?deskId=${storage.desk_id}`, { |
||||
method: 'post', |
||||
body: form_data, |
||||
}) |
||||
|
||||
if (resp.ok) { |
||||
const image_id = await resp.text(); |
||||
const event = image_event(image_id, x, y); |
||||
await queue_event(event); |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
function on_wheel(e) { |
||||
return; |
||||
|
||||
const x = Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom); |
||||
const y = Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom); |
||||
|
||||
const dz = (e.deltaY < 0 ? 0.1 : -0.1); |
||||
|
||||
storage.canvas.zoom += dz; |
||||
|
||||
if (storage.canvas.zoom > storage.max_zoom) { |
||||
storage.canvas.zoom = storage.max_zoom; |
||||
return; |
||||
} |
||||
|
||||
if (storage.canvas.zoom < storage.min_zoom) { |
||||
storage.canvas.zoom = storage.min_zoom; |
||||
return; |
||||
} |
||||
|
||||
const zoom_offset_x = Math.round(dz * x); |
||||
const zoom_offset_y = Math.round(dz * y); |
||||
|
||||
storage.canvas.offset_x += zoom_offset_x; |
||||
storage.canvas.offset_y += zoom_offset_y; |
||||
|
||||
move_canvas(); |
||||
} |
||||
|
||||
function cancel(e) { |
||||
e.preventDefault(); |
||||
return false; |
||||
} |
||||
|
||||
function update_brush() { |
||||
elements.brush_preview.classList.remove('dhide'); |
||||
|
||||
const color = elements.brush_color.value; |
||||
const width = elements.brush_width.value; |
||||
|
||||
storage.cursor.color = color; |
||||
storage.cursor.width = width; |
||||
|
||||
const x = Math.round(storage.cursor.x - width / 2); |
||||
const y = Math.round(storage.cursor.y - width / 2); |
||||
|
||||
elements.brush_preview.style.transform = `translate(${x}px, ${y}px)`; |
||||
elements.brush_preview.style.width = width + 'px'; |
||||
elements.brush_preview.style.height = width + 'px'; |
||||
elements.brush_preview.style.background = color; |
||||
|
||||
if (storage.timers.brush_preview) { |
||||
clearTimeout(storage.timers.brush_preview); |
||||
} |
||||
|
||||
storage.timers.brush_preview = setTimeout(() => { |
||||
elements.brush_preview.classList.add('dhide'); |
||||
}, 1000); |
||||
} |
||||
Loading…
Reference in new issue