A.Olokhtonov
2 years ago
15 changed files with 49 additions and 842 deletions
@ -1,72 +0,0 @@
@@ -1,72 +0,0 @@
|
||||
function draw_stroke(stroke) { |
||||
const points = stroke.points; |
||||
|
||||
if (points.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
// if (config.debug_print) console.debug(points)
|
||||
|
||||
storage.ctx0.beginPath(); |
||||
storage.ctx0.moveTo(points[0].x, points[0].y); |
||||
storage.ctx0.strokeStyle = color_from_u32(stroke.color); |
||||
storage.ctx0.lineWidth = stroke.width; |
||||
|
||||
for (let i = 1; i < points.length; ++i) { |
||||
const p = points[i]; |
||||
storage.ctx0.lineTo(p.x, p.y); |
||||
} |
||||
|
||||
storage.ctx0.stroke(); |
||||
} |
||||
|
||||
function redraw_predraw() { |
||||
storage.ctx1.clearRect(0, 0, storage.ctx1.canvas.width, storage.ctx1.canvas.height); |
||||
} |
||||
|
||||
function predraw_user(user_id, event) { |
||||
if (!(user_id in storage.predraw)) { |
||||
storage.predraw[user_id] = []; |
||||
} |
||||
|
||||
storage.ctx1.beginPath(); |
||||
if (storage.predraw[user_id].length > 0) { |
||||
const last = storage.predraw[user_id][storage.predraw[user_id].length - 1]; |
||||
storage.ctx1.moveTo(last.x, last.y); |
||||
storage.ctx1.lineTo(event.x, event.y); |
||||
} else { |
||||
storage.ctx1.moveTo(event.x, event.y); |
||||
} |
||||
storage.ctx1.stroke(); |
||||
|
||||
storage.predraw[user_id].push({ 'x': event.x, 'y': event.y }); |
||||
} |
||||
|
||||
function redraw_region(bbox) { |
||||
// const start = performance.now();
|
||||
|
||||
if (bbox.xmin === bbox.xmax || bbox.ymin === bbox.ymax) { |
||||
return; |
||||
} |
||||
|
||||
storage.ctx0.save(); |
||||
storage.ctx0.clearRect(bbox.xmin, bbox.ymin, bbox.xmax - bbox.xmin, bbox.ymax - bbox.ymin); |
||||
|
||||
storage.ctx0.beginPath(); |
||||
storage.ctx0.rect(bbox.xmin, bbox.ymin, bbox.xmax - bbox.xmin, bbox.ymax - bbox.ymin); |
||||
storage.ctx0.clip(); |
||||
|
||||
for (const event of storage.events) { |
||||
if (event.type === EVENT.STROKE && !event.deleted) { |
||||
if (stroke_intersects_region(event.points, bbox)) { |
||||
draw_stroke(event); |
||||
} |
||||
} |
||||
} |
||||
|
||||
storage.ctx0.restore(); |
||||
|
||||
// const end = performance.now();
|
||||
|
||||
// if (config.debug_print) console.debug(`Redraw took ${end - start}ms`);
|
||||
} |
||||
|
Before Width: | Height: | Size: 671 B |
|
Before Width: | Height: | Size: 957 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 371 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 500 B |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 691 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 643 B |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 494 B |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 457 B |
@ -1,310 +0,0 @@
@@ -1,310 +0,0 @@
|
||||
let ws = null; |
||||
let ls = window.localStorage; |
||||
|
||||
document.addEventListener('DOMContentLoaded', main); |
||||
|
||||
const EVENT = Object.freeze({ |
||||
PREDRAW: 10, |
||||
STROKE: 20, |
||||
RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */ |
||||
UNDO: 30, |
||||
REDO: 31, |
||||
IMAGE: 40, |
||||
IMAGE_MOVE: 41, |
||||
ERASER: 50, |
||||
}); |
||||
|
||||
const MESSAGE = Object.freeze({ |
||||
INIT: 100, |
||||
SYN: 101, |
||||
ACK: 102, |
||||
FULL: 103, |
||||
FIRE: 104, |
||||
JOIN: 105, |
||||
}); |
||||
|
||||
const config = { |
||||
ws_url: 'ws://192.168.100.2/ws/', |
||||
image_url: 'http://192.168.100.2/images/', |
||||
sync_timeout: 1000, |
||||
ws_reconnect_timeout: 2000, |
||||
second_finger_timeout: 500, |
||||
buffer_first_touchmoves: 5, |
||||
debug_print: false, |
||||
}; |
||||
|
||||
const storage = { |
||||
'state': { |
||||
'drawing': false, |
||||
'moving': false, |
||||
'moving_image': false, |
||||
'mousedown': false, |
||||
'spacedown': false, |
||||
}, |
||||
|
||||
'moving_image_original_x': null, |
||||
'moving_image_original_y': null, |
||||
|
||||
'touch': { |
||||
'moves': 0, |
||||
'drawing': false, |
||||
'moving': false, |
||||
'waiting_for_second_finger': false, |
||||
'position': { 'x': null, 'y': null }, |
||||
'screen_position': { 'x': null, 'y': null }, |
||||
'finger_distance': null, |
||||
'buffered': [], |
||||
'ids': [], |
||||
}, |
||||
|
||||
'tools': { |
||||
'active': null, |
||||
'active_element': null, |
||||
}, |
||||
|
||||
'ruler_origin': {}, |
||||
'erased': [], |
||||
'predraw': {}, |
||||
'timers': {}, |
||||
'me': {}, |
||||
|
||||
'sn': 0, // what WE think SERVER SN is (we tell this to the server, it uses to decide how much stuff to SYN to us)
|
||||
'server_lsn': 0, // what SERVER said LSN is (used to decide how much stuff to SYN)
|
||||
'lsn': 0, // what actual LSN is (can't just use length of local queue because it gets cleared)
|
||||
'queue': [], // to server
|
||||
'events': [], // from server
|
||||
'current_stroke': [], |
||||
|
||||
'desk_id': 123, |
||||
|
||||
'max_zoom': 4, |
||||
'min_zoom': 0.2, |
||||
|
||||
'images': {}, |
||||
|
||||
'canvas': { |
||||
'zoom': 1, |
||||
'width': 1500, |
||||
'height': 4000, |
||||
'offset_x': 0, |
||||
'offset_y': 0, |
||||
}, |
||||
|
||||
'cursor': { |
||||
'width': 8, |
||||
'color': 'rgb(0, 0, 0)', |
||||
'x': 0, |
||||
'y': 0, |
||||
} |
||||
}; |
||||
const elements = { |
||||
'cursor': null, |
||||
'canvas0': null, |
||||
'canvas1': null, |
||||
'active_image': null, |
||||
}; |
||||
|
||||
function move_canvas() { |
||||
elements.canvas0.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; |
||||
elements.canvas1.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; |
||||
elements.images.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; |
||||
} |
||||
|
||||
function image_at(x, y) { |
||||
let image_hit = null; |
||||
|
||||
for (let i = storage.events.length - 1; i >= 0; --i) { |
||||
if (!storage.events[i].deleted && storage.events[i].type === EVENT.IMAGE) { |
||||
const event = storage.events[i]; |
||||
const item = document.querySelector(`img[data-image-id="${event.image_id}"]`); |
||||
if (item) { |
||||
const left = storage.images[event.image_id].x; |
||||
const right = left + item.width; |
||||
const top = storage.images[event.image_id].y; |
||||
const bottom = top + item.height; |
||||
if (left <= x && x <= right && top <= y && y <= bottom) { |
||||
return item; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function activate_image(item) { |
||||
if (item === null) { |
||||
elements.canvas1.classList.remove('disabled'); |
||||
if (elements.active_image) { |
||||
elements.active_image.classList.remove('activated'); |
||||
elements.active_image = null; |
||||
} |
||||
return; |
||||
} |
||||
|
||||
elements.canvas1.classList.add('disabled'); |
||||
|
||||
if (elements.active_image) { |
||||
if (elements.active_image === item) { |
||||
return; |
||||
} |
||||
|
||||
elements.active_image.classList.remove('activated'); |
||||
} |
||||
|
||||
elements.active_image = item; |
||||
|
||||
item.classList.add('activated'); |
||||
} |
||||
|
||||
function predraw_event(x, y) { |
||||
return { |
||||
'type': EVENT.PREDRAW, |
||||
'x': x, |
||||
'y': y |
||||
}; |
||||
} |
||||
|
||||
function stroke_event() { |
||||
return { |
||||
'type': EVENT.STROKE, |
||||
'points': storage.current_stroke, |
||||
'width': storage.cursor.width, |
||||
'color': color_to_u32(storage.cursor.color), |
||||
}; |
||||
} |
||||
|
||||
function ruler_event(x, y) { |
||||
const points = []; |
||||
|
||||
points.push(predraw_event(storage.ruler_origin.x, storage.ruler_origin.y)); |
||||
points.push(predraw_event(x, y)); |
||||
|
||||
return { |
||||
'type': EVENT.RULER, |
||||
'points': points, |
||||
'width': storage.cursor.width, |
||||
'color': color_to_u32(storage.cursor.color), |
||||
}; |
||||
} |
||||
|
||||
function undo_event() { |
||||
return { 'type': EVENT.UNDO }; |
||||
} |
||||
|
||||
function redo_event() { |
||||
return { 'type': EVENT.REDO }; |
||||
} |
||||
|
||||
function image_event(image_id, x, y) { |
||||
return { |
||||
'type': EVENT.IMAGE, |
||||
'image_id': image_id, |
||||
'x': x, |
||||
'y': y, |
||||
} |
||||
} |
||||
|
||||
function image_move_event(image_id, x, y) { |
||||
return { |
||||
'type': EVENT.IMAGE_MOVE, |
||||
'image_id': image_id, |
||||
'x': x, |
||||
'y': y, |
||||
} |
||||
} |
||||
|
||||
function eraser_events() { |
||||
const result = []; |
||||
|
||||
for (const stroke_id of storage.erased) { |
||||
result.push({ |
||||
'type': EVENT.ERASER, |
||||
'stroke_id': stroke_id, |
||||
}); |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
|
||||
// Generally doesn't return null
|
||||
function find_stroke_backwards(stroke_id) { |
||||
for (let i = storage.events.length - 1; i >= 0; --i) { |
||||
const event = storage.events[i]; |
||||
if (event.type === EVENT.STROKE && event.stroke_id === stroke_id) { |
||||
return event; |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function queue_undo() { |
||||
const event = undo_event(); |
||||
queue_event(event); |
||||
} |
||||
|
||||
function main() { |
||||
const url = new URL(window.location.href); |
||||
const parts = url.pathname.split('/'); |
||||
|
||||
storage.desk_id = parts.length > 0 ? parts[parts.length - 1] : 0; |
||||
|
||||
ws_connect(true); |
||||
|
||||
elements.canvas0 = document.getElementById('canvas0'); |
||||
elements.canvas1 = document.getElementById('canvas1'); |
||||
elements.images = document.getElementById('canvas-images'); |
||||
|
||||
tools_init(); |
||||
|
||||
// TODO: remove
|
||||
elements.brush_color = document.getElementById('brush-color'); |
||||
elements.brush_width = document.getElementById('brush-width'); |
||||
elements.brush_preview = document.getElementById('brush-preview'); |
||||
elements.toucher = document.getElementById('toucher'); |
||||
|
||||
elements.brush_color.value = storage.cursor.color; |
||||
elements.brush_width.value = storage.cursor.width; |
||||
|
||||
update_brush(); |
||||
|
||||
// storage.canvas.offset_x = window.scrollX;
|
||||
// storage.canvas.offset_y = window.scrollY;
|
||||
|
||||
// storage.canvas.max_scroll_x = storage.canvas.width - window.innerWidth;
|
||||
// storage.canvas.max_scroll_y = storage.canvas.height - window.innerHeight;
|
||||
|
||||
storage.ctx0 = elements.canvas0.getContext('2d'); |
||||
storage.ctx1 = elements.canvas1.getContext('2d'); |
||||
|
||||
on_resize(); |
||||
// storage.ctx1.canvas.width = storage.ctx0.canvas.width = storage.canvas.width;
|
||||
// storage.ctx1.canvas.height = storage.ctx0.canvas.height = storage.canvas.height;
|
||||
|
||||
storage.ctx1.lineJoin = storage.ctx1.lineCap = storage.ctx0.lineJoin = storage.ctx0.lineCap = 'round'; |
||||
storage.ctx1.lineWidth = storage.ctx0.lineWidth = storage.cursor.width; |
||||
|
||||
elements.toucher.addEventListener('mousedown', on_down) |
||||
elements.toucher.addEventListener('mousemove', on_move) |
||||
elements.toucher.addEventListener('mouseup', on_up); |
||||
|
||||
elements.toucher.addEventListener('keydown', on_keydown); |
||||
elements.toucher.addEventListener('keyup', on_keyup); |
||||
elements.toucher.addEventListener('contextmenu', cancel); |
||||
elements.toucher.addEventListener('wheel', on_wheel); |
||||
|
||||
elements.toucher.addEventListener('touchstart', on_touchstart); |
||||
elements.toucher.addEventListener('touchmove', on_touchmove); |
||||
elements.toucher.addEventListener('touchend', on_touchend); |
||||
elements.toucher.addEventListener('touchcancel', on_touchend); |
||||
|
||||
elements.brush_color.addEventListener('input', update_brush); |
||||
elements.brush_width.addEventListener('input', update_brush); |
||||
|
||||
elements.canvas0.addEventListener('dragover', on_move); |
||||
elements.canvas0.addEventListener('drop', on_drop); |
||||
elements.canvas0.addEventListener('mouseleave', on_leave); |
||||
|
||||
window.addEventListener('resize', on_resize); |
||||
} |
||||
@ -1,44 +0,0 @@
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Desk</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
||||
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon"> |
||||
<link rel="stylesheet" type="text/css" href="default.css?v=6"> |
||||
<link rel="stylesheet" type="text/css" href="touch.css?v=4"> |
||||
<script type="text/javascript" src="index.js?v=10"></script> |
||||
<script type="text/javascript" src="cursor.js?v=5"></script> |
||||
<script type="text/javascript" src="touch.js?v=20"></script> |
||||
<script type="text/javascript" src="websocket.js?v=6"></script> |
||||
<script type="text/javascript" src="send.js?v=5"></script> |
||||
<script type="text/javascript" src="recv.js?v=5"></script> |
||||
<script type="text/javascript" src="math.js?v=5"></script> |
||||
<script type="text/javascript" src="draw.js?v=5"></script> |
||||
<script type="text/javascript" src="tools.js?v=6"></script> |
||||
</head> |
||||
<body> |
||||
<div class="toolbar"> |
||||
<input type="color" id="brush-color"> |
||||
<input type="number" min="1" id="brush-width"> |
||||
</div> |
||||
|
||||
<div class="tools-wrapper"> |
||||
<div class="tools"> |
||||
<div class="tool" data-tool="pencil"><img draggable="false" src="icons/draw.svg"></div> |
||||
<div class="tool" data-tool="ruler"><img draggable="false" src="icons/ruler.svg"></div> |
||||
<div class="tool" data-tool="eraser"><img draggable="false" src="icons/erase.svg"></div> |
||||
<div class="tool" data-tool="undo"><img draggable="false" src="icons/undo.svg"></div> |
||||
<!-- <div class="tool" data-tool="redo"><img draggable="false" src="icons/redo.svg"></div> --> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="brush-preview" class="dhide"></div> |
||||
|
||||
<canvas class="canvas white" id="canvas0"></canvas> |
||||
<canvas class="canvas" id="canvas1"></canvas> |
||||
<div class="canvas" id="canvas-images"></div> |
||||
|
||||
<div id="toucher"></div> |
||||
</body> |
||||
</html> |
||||
@ -1,21 +0,0 @@
@@ -1,21 +0,0 @@
|
||||
This is pdfTeX, Version 3.141592653-2.6-1.40.24 (TeX Live 2022/Debian) (preloaded format=pdflatex 2023.3.25) 8 APR 2023 22:14 |
||||
entering extended mode |
||||
restricted \write18 enabled. |
||||
%&-line parsing enabled. |
||||
** |
||||
|
||||
! Emergency stop. |
||||
<*> |
||||
|
||||
End of file on the terminal! |
||||
|
||||
|
||||
Here is how much of TeX's memory you used: |
||||
3 strings out of 476091 |
||||
111 string characters out of 5794081 |
||||
1849330 words of memory out of 5000000 |
||||
20488 multiletter control sequences out of 15000+600000 |
||||
512287 words of font info for 32 fonts, out of 8000000 for 9000 |
||||
1141 hyphenation exceptions out of 8191 |
||||
0i,0n,0p,1b,6s stack positions out of 10000i,1000n,20000p,200000b,200000s |
||||
! ==> Fatal error occurred, no output PDF file produced! |
||||
Loading…
Reference in new issue