From 33898ab27a679a7e8731ceb180329714463ed402 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sun, 23 Apr 2023 19:13:34 +0300 Subject: [PATCH] Client code cleanup p1 --- client/client_recv.js | 12 ++ client/draw.js | 72 -------- client/favicon2.png | Bin 671 -> 0 bytes client/favicon_old.png | Bin 957 -> 0 bytes client/icons/cheeseburga.svg | 65 +------- client/icons/draw.svg | 59 +------ client/icons/erase.svg | 79 +-------- client/icons/favicon.svg | 62 +------ client/icons/redo.svg | 54 ------ client/icons/ruler.svg | 53 +----- client/icons/undo.svg | 59 +------ client/index.html | 1 + client/index.js | 310 ----------------------------------- client/old_index.html | 44 ----- client/texput.log | 21 --- 15 files changed, 49 insertions(+), 842 deletions(-) delete mode 100644 client/draw.js delete mode 100644 client/favicon2.png delete mode 100644 client/favicon_old.png delete mode 100644 client/icons/redo.svg delete mode 100644 client/index.js delete mode 100644 client/old_index.html delete mode 100644 client/texput.log diff --git a/client/client_recv.js b/client/client_recv.js index 4eed95d..91c4f02 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -314,11 +314,23 @@ async function handle_message(state, context, d) { } const event_count = des_u32(d); + const user_count = des_u32(d); if (config.debug_print) console.debug(`${event_count} events in init`); state.events.length = 0; + for (let i = 0; i < user_count; ++i) { + const user_id = des_u32(d); + const user_color = des_u32(d); + const user_width = des_u16(d); + + state.players[user_id] = { + 'color': user_color, + 'width': user_width, + }; + } + for (let i = 0; i < event_count; ++i) { const event = des_event(d); handle_event(state, context, event, true); diff --git a/client/draw.js b/client/draw.js deleted file mode 100644 index f4768d8..0000000 --- a/client/draw.js +++ /dev/null @@ -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`); -} \ No newline at end of file diff --git a/client/favicon2.png b/client/favicon2.png deleted file mode 100644 index 6bc00549fa351e5d4ba0d737caa246f3b34e6eea..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 671 zcmV;Q0$}}#P)EX>4Tx04R}tkv&MmKpe$iQ>8^JB6bjQ$WR5rE-E6p)G8FALZ}s5buhW~3z{?} zEiR6NYr(;f#j1mgv#t)Vf*|+-;_Bk0=prTlFDbN$@!+^0@9sVB-T^|R%rvVj255TK zOeNxCCc7#IUg1YSf*8ZB%q(M0l9KQoU-$6w^)AY@ywCkPdexl80G~)4V}@BJ-XNad ztQws6iNmZYtHkHT<0f5@_>t?1%Ws?u4huXpY^GE5#9?Bw(7{Rvv!baHPZ38{O{aVz z*5I4>^8`Tnf2L zVB}ap1sY_>5B>+gyS4I@6K+x{4s^fR_Qwbi*aez(+x|Yb?dA#Ke+I7fw!hKo454hX`2A>SslpV=WQ^@Cm_cQvYEHH2j^sKqPwf1rP0Hmp_y{D4^000SaNLh0L z04^f{04^f|c%?sf00007bV*G`2j>G32rC=}@;fd7000?uMObu0Z*6U5Zgc=ca%Ew3 zWn>_CX>@2HM@dakSAh-}0001XNkl;|yGDIf;oIOI2VC#6wEweD2hV1bBiO=C;Jk4Ua;t=#?Dz=zbKU>|002ovPDHLk FV1m4p8}|SJ diff --git a/client/favicon_old.png b/client/favicon_old.png deleted file mode 100644 index dab577ecd706572f09c3e0acfd25b206bae6d23e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 957 zcmV;u148_XP)EX>4Tx04R}tkv&MmKpe$iQ>8^JDs~WY$WR@`E-K;tBaGOiZLMN=c5CXT3@PWeK{ zW0mt3XRTai&3p0}hI0DKGS_L2Ab~|JL4pVcRg_SMjVP@;DHc++AMfBFcKs5$6mpfo z$gzM5G{~+W{11M2YvrdVy`)ea=zejWk5M473p8qu^L^|%jT6BC3|#3gf29u0ev)2m zX^|tKZyUI{ZfVLMaJd5vJsGkoyON)#kk13}XY@^3VDJ{`S@U{p?&I_UNK;qI8{ps& z7%NcrdWUxh+k5->OtZfqaolpIj|eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00EUrL_t(o!|j(*YQr!LhCeU5LPkoCFen6epdD>@*i$c2 z$ir?>=*UhGP{>|XFmCKRX|ghyz@%xF{__7ziUkig=ii7(p{gZN1b%~ve5>lPNfaVd z02R;xN8l8!Bd|BWO~CgCat0I_gQfO+wK~30{%%1OzyN&N75lCPcEB!2in&r&w!7XK zIGPl-tyhnkBnykA^dvaggH@n)Z4Zxjtuuh}OaCB%SSk6Lo&%ngG)2`IX(Vl=VZ|C#Hh9=nPD|d36OF0Q%#*9= z>xos(pnOh}uKHU42Y(oNpIe?=f!{38wJp27rtImC01DvQJ4bd)j_tA%8-*QOV-}q& z?g?N3I+LOVKD?83Xq~FQiOA<_!_7qbjfvF*2j^Uw9L<&lp{g%7S3D{XF%Rg;DNt_Ay0IHY>00000NkvXXu0mjf{eGe1 diff --git a/client/icons/cheeseburga.svg b/client/icons/cheeseburga.svg index 5003fe3..a1604f0 100644 --- a/client/icons/cheeseburga.svg +++ b/client/icons/cheeseburga.svg @@ -1,59 +1,8 @@ - - - - - - - - - - - + + + + + + + diff --git a/client/icons/draw.svg b/client/icons/draw.svg index 5278f0e..2b40463 100644 --- a/client/icons/draw.svg +++ b/client/icons/draw.svg @@ -1,54 +1,7 @@ - - - - - - - - - - + + + + + + diff --git a/client/icons/erase.svg b/client/icons/erase.svg index 38d6749..dab9ec3 100644 --- a/client/icons/erase.svg +++ b/client/icons/erase.svg @@ -1,74 +1,7 @@ - - - - - - - - - - - - + + + + + + diff --git a/client/icons/favicon.svg b/client/icons/favicon.svg index 4d214ca..47b8d0d 100644 --- a/client/icons/favicon.svg +++ b/client/icons/favicon.svg @@ -1,57 +1,7 @@ - - - - - - - - - - + + + + + + diff --git a/client/icons/redo.svg b/client/icons/redo.svg deleted file mode 100644 index c777746..0000000 --- a/client/icons/redo.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - diff --git a/client/icons/ruler.svg b/client/icons/ruler.svg index 2012999..8189043 100644 --- a/client/icons/ruler.svg +++ b/client/icons/ruler.svg @@ -1,49 +1,6 @@ - - - - - - - - - + + + + + diff --git a/client/icons/undo.svg b/client/icons/undo.svg index 49d5e88..af26ad9 100644 --- a/client/icons/undo.svg +++ b/client/icons/undo.svg @@ -1,54 +1,7 @@ - - - - - - - - - - + + + + + + diff --git a/client/index.html b/client/index.html index 097686c..7cb14d4 100644 --- a/client/index.html +++ b/client/index.html @@ -3,6 +3,7 @@ Desk + diff --git a/client/index.js b/client/index.js deleted file mode 100644 index 9c9c0a8..0000000 --- a/client/index.js +++ /dev/null @@ -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); -} diff --git a/client/old_index.html b/client/old_index.html deleted file mode 100644 index 17f41ac..0000000 --- a/client/old_index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - Desk - - - - - - - - - - - - - - - -
- - -
- -
-
-
-
-
-
- -
-
- -
- - - -
- -
- - diff --git a/client/texput.log b/client/texput.log deleted file mode 100644 index 14bf232..0000000 --- a/client/texput.log +++ /dev/null @@ -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!