class Canvas { constructor(wrapperEl) { this.allowDrawing = false; this.viewbox = { "x": 0, "y": 0, "width": null, "height": null }; this.url = window.location.origin.replace('http', 'ws') + '/ws?' + window.location.search.substring(1); // build the interface this.wrapperEl = wrapperEl; this.wrapperEl.classList.add('closed'); this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.wrapperEl.appendChild(this.svgEl); this.toolboxEl = document.createElement('div'); this.toolboxEl.classList.add('toolbox') this.wrapperEl.appendChild(this.toolboxEl); this.filenameEl = document.createElement('div'); this.filenameEl.classList.add('filename') this.wrapperEl.appendChild(this.filenameEl); this.colors = ["black", "red", "blue", "green"]; this.resize(); window.addEventListener('resize', this.requestResize); this.paths = []; this.viewboxes = []; this.events = []; // all paths & viewboxes events this.isDrawing = false; this.hasMouseDown = false; this.currentStrokeEl = null; this.startTime = null; this.isMoving = false; document.body.addEventListener('pointermove', (ev) => { if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button this.moveCanvas(ev); } else { // pointerType == pen or mouse this.draw(ev); } }); document.body.addEventListener('pointerup', (ev) => { if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup this.endMoveCanvas(ev); this.isMoving = false; } else { // pointerType == pen or mouse this.penup(ev); } }); this.svgEl.addEventListener('pointerdown', (ev) => { if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button this.isMoving = true; this.startMoveCanvas(ev); } else { // pointerType == pen or mouse this.startStroke(ev); } }); this.createToolbox(); this.setColor(this.colors[0]); this.socket = new WebSocket(this.url); this.socket.addEventListener('open', (e) => { const d = { 'event': 'dimensions', 'width': this.viewbox.width, 'height': this.viewbox.height }; console.log('send', d); this.socket.send(JSON.stringify(d)); }) this.socket.addEventListener('message', (e) => { let msg = JSON.parse(e.data); console.log('receive', msg); if (msg.hasOwnProperty('filename')) { console.log('filename', msg.filename); this.setFilename(msg.filename); this.openTheFloor() } }); } startMoveCanvas(ev) { this.moveCanvasPrevPoint = { "x": ev.x, "y": ev.y }; this.currentMoves = []; } endMoveCanvas(ev) { this.moveCanvasPrevPoint = null; // sync viewpoints const d = { 'event': 'viewbox', 'viewboxes': this.currentMoves }; console.log('send', d); this.socket.send(JSON.stringify(d)); } moveCanvas(ev) { if (this.moveCanvasPrevPoint === null) { return } const diff = { "x": ev.x - this.moveCanvasPrevPoint.x, "y": ev.y - this.moveCanvasPrevPoint.y, } this.viewbox.x -= diff.x; this.viewbox.y -= diff.y; this.moveCanvasPrevPoint = { "x": ev.x, "y": ev.y }; this.currentMoves.push(Object.assign({'t': window.performance.now() - this.startTime}, this.viewbox)); this.applyViewBox() } openTheFloor() { this.wrapperEl.classList.remove('closed'); } setFilename(filename) { this.filename = filename; this.filenameEl.innerText = filename; } createToolbox() { const colorsEl = document.createElement('ul'); colorsEl.classList.add('colors'); for (let color of this.colors) { const colorEl = document.createElement('li'); colorEl.style.background = color; colorEl.addEventListener('click', (e) => { console.log('set color', color) this.setColor(color); }) colorsEl.appendChild(colorEl); } this.toolboxEl.appendChild(colorsEl); } setColor(color) { this.currentColor = color; const colorEls = this.toolboxEl.querySelectorAll('.colors li'); for (let colorEl of colorEls) { if (colorEl.style.backgroundColor == color) { colorEl.classList.add('selected'); } else { colorEl.classList.remove('selected'); } } } resize() { this.viewbox.width = window.innerWidth; this.viewbox.height = window.innerHeight; this.applyViewBox(); } applyViewBox() { const viewBox = `${this.viewbox.x} ${this.viewbox.y} ${this.viewbox.width} ${this.viewbox.height}`; this.svgEl.setAttribute('viewBox', viewBox); this.svgEl.setAttribute('width', this.viewbox.width + 'mm'); this.svgEl.setAttribute('height', this.viewbox.height + 'mm'); // todo save drag event; // const newViewbox = Object.assign({}, this.viewbox, {'t': window.performance.now() - this.startTime}); // const lastViewbox = this.viewboxes[this.viewboxes.length - 1]; // if(newViewbox.x == lastViewbox.x && newViewbox.y == lastViewbox.y && newViewbox.width == lastViewbox.width && newViewbox.height == lastViewbox.height){ // // do nothing, avoiding duplicate // } else { // this.viewboxes.push(newViewbox); // this.events.push(newViewbox); // } } requestResize() { alert('Resize not implemented yet. Please reloade the page'); } getCoordinates(e) { // convert event coordinates into relative positions on x & y axis let box = this.svgEl.getBoundingClientRect(); let x = (e.x - box['left'] + this.viewbox.x) / box['width']; let y = (e.y - box['top'] + this.viewbox.y) / box['height']; return { 'x': x, 'y': y }; } isInsideBounds(pos) { return !(pos['x'] < 0 || pos['y'] < 0 || pos['x'] > 1 || pos['y'] > 1); } draw(e) { let pos = this.getCoordinates(e); if (!this.isDrawing && this.hasMouseDown /*&& this.isInsideBounds(pos)*/) { this.isDrawing = true; } if (this.isDrawing) { this.paths[this.paths.length - 1].points.push([pos['x'], pos['y'], 0, window.performance.now() - this.startTime]); let d = this.strokes2D(this.paths[this.paths.length - 1].points); this.currentStrokeEl.setAttribute('d', d); } } startStroke(e) { this.hasMouseDown = true; const strokeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path'); strokeEl.style.stroke = this.currentColor; this.svgEl.appendChild(strokeEl); this.currentStrokeEl = strokeEl; let path = { 'el': strokeEl, 'color': this.currentColor, 'points': [] }; this.paths.push(path); this.events.push(path); // same ref. if (this.startTime === null) { // initiate timer on first stroke this.startTime = window.performance.now(); } } endStroke(pos) { if (!this.isDrawing) { return; } this.isDrawing = false; //document.body.removeEventListener('mousemove', draw); if (this.paths[this.paths.length - 1].points.length > 0) { // mark point as last of stroke this.paths[this.paths.length - 1].points[this.paths[this.paths.length - 1].points.length - 1][2] = 1; } const stroke = this.paths[this.paths.length - 1]; const d = { 'event': 'stroke', 'color': stroke.color, 'points': stroke.points }; console.log('send', d); this.socket.send(JSON.stringify(d)); } penup(e) { if (!this.hasMouseDown) { return; } this.hasMouseDown = false; let pos = this.getCoordinates(e); this.endStroke(pos); } strokes2D(strokes) { // strokes to a d attribute for a path let d = ""; let last_stroke = undefined; let cmd = ""; for (let stroke of strokes) { if (!last_stroke) { d += `M${stroke[0] * this.viewbox.width},${stroke[1] * this.viewbox.height} `; cmd = 'M'; } else { if (last_stroke[2] == 1) { d += " m"; cmd = 'm'; } else if (cmd != 'l') { d += ' l '; cmd = 'l'; } let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]]; d += `${rel_stroke[0] * this.viewbox.width},${rel_stroke[1] * this.viewbox.height} `; } last_stroke = stroke; } return d; } }