Last active
August 22, 2019 09:30
-
-
Save malgamves/6d5916e772108d706511612e0ca5a15b to your computer and use it in GitHub Desktop.
problematic script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mspaint = { | |
sketchSelector: "", | |
paintSelector: "", | |
paintContext: null, | |
currentIcon: null, | |
canvas: null, | |
start: function(selector1, selector2) { | |
this.sketchSelector = selector1; | |
this.paintSelector = selector2; | |
var canvas = document.querySelector(this.paintSelector); | |
this.canvas = canvas; | |
this.paintContext = canvas.getContext("2d"); | |
// var channel = "draw"; | |
var pubnub = PUBNUB.init({ | |
publish_key: "pub-c-29417840-d54d-495c-982c-c7206ed92e47", | |
subscribe_key: "sub-c-f42fe0ec-8dd6-11e9-8277-da7aa9a31542", | |
ssl: document.location.protocol === "https:" | |
}); | |
pubnub.subscribe({ | |
channels: ['draw','chat'], | |
callback: drawFromStream, | |
presence: function(m) { | |
if (m.occupancy > 0) { | |
document.getElementById("users").textContent = m.occupancy; | |
} | |
} | |
}); | |
var box = document.getElementById("box"), | |
input = document.getElementById("input"); | |
pubnub.addListener({ | |
message: function(m) { | |
if (m.channel === 'chat'){ | |
box.innerHTML = | |
("" + m.message).replace(/[<>]/g, "") + | |
"<br> <hr>" + | |
box.innerHTML; // Add message to page. | |
} | |
} | |
}); | |
input.addEventListener("keypress", function(e) { | |
(e.keyCode || e.charCode) === 13 && | |
pubnub.publish({ | |
// Publish new message when enter is pressed. | |
channel: 'chat', | |
message: input.value, | |
x: (input.value = "") | |
}); | |
}); | |
var plots = []; | |
var sketch = document.querySelector(this.sketchSelector); | |
var sketch_style = getComputedStyle(sketch); | |
canvas.width = parseInt(sketch_style.getPropertyValue("width")); | |
canvas.height = parseInt(sketch_style.getPropertyValue("height")); | |
this.currentIcon = document.getElementById("current"); | |
var mouse = { | |
x: 0, | |
y: 0, | |
getX: function() { | |
return this.x - 65; | |
}, | |
getY: function() { | |
return this.y - 55; | |
} | |
}; | |
/* Drawing on Paint App */ | |
this.setLineWidth(5); | |
this.setLineCap("round"); | |
this.setLineJoin("round"); | |
this.setColor("black"); | |
/* Mouse Capturing Work */ | |
var machine = this; | |
canvas.addEventListener( | |
"mousemove", | |
function(e) { | |
mouse.x = e.pageX - this.offsetLeft; | |
mouse.y = e.pageY - this.offsetTop; | |
}, | |
false | |
); | |
canvas.addEventListener( | |
"mousedown", | |
function(e) { | |
machine.paintContext.beginPath(); | |
machine.paintContext.moveTo(mouse.getX(), mouse.getY()); | |
//initial dot | |
mouse.x += 0.1; | |
mouse.y += -0.1; | |
onPaint(); | |
canvas.addEventListener("mousemove", onPaint, false); | |
}, | |
false | |
); | |
canvas.addEventListener( | |
"mouseout", | |
function() { | |
canvas.removeEventListener("mousemove", onPaint, false); | |
}, | |
false | |
); | |
canvas.addEventListener( | |
"mouseup", | |
function() { | |
canvas.removeEventListener("mousemove", onPaint, false); | |
pubnub.publish({ | |
channel: 'draw', | |
message: { | |
plots: plots | |
} | |
}); | |
plots = []; | |
}, | |
false | |
); | |
var onPaint = function() { | |
machine.paintContext.lineTo(mouse.getX(), mouse.getY()); | |
machine.paintContext.stroke(); | |
plots.push({ x: mouse.getX(), y: mouse.getY() }); | |
//console.log(plots) | |
}; | |
function drawOnCanvas(plots) { | |
//ctx.strokeStyle = color; | |
machine.paintContext.beginPath(); | |
//console.log(plots); | |
machine.paintContext.moveTo(plots[0].x, plots[0].y); | |
for (var i = 1; i < plots.length; i++) { | |
machine.paintContext.lineTo(plots[i].x, plots[i].y); | |
} | |
machine.paintContext.stroke(); | |
} | |
function drawFromStream(message) { | |
if (!message || message.plots.length < 1) return; | |
drawOnCanvas(message.plots); | |
} | |
/* Color changing */ | |
var colorButtons = document.getElementsByClassName("color"); | |
for (var index = 0; index < colorButtons.length; index++) { | |
colorButtons[index].addEventListener("click", function() { | |
machine.setColor(this.getAttribute("data-color")); | |
}); | |
} | |
}, | |
setLineWidth: function(lineWidth) { | |
this.paintContext.lineWidth = lineWidth; | |
}, | |
setLineCap: function(lineCap) { | |
this.paintContext.lineCap = lineCap; | |
}, | |
setLineJoin: function(lineJoin) { | |
this.paintContext.lineJoin = lineJoin; | |
}, | |
setColor: function(color) { | |
this.currentIcon.style.background = "#" + color; | |
this.paintContext.strokeStyle = "#" + color; | |
} | |
}; | |
window.download = function() { | |
var dt = mspaint.canvas.toDataURL(); | |
dt = dt.replace( | |
/^data:image\/[^;]/, | |
"data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=art.png" | |
); | |
window.location.href = dt; | |
}; | |
window.onload = function() { | |
mspaint.start("#sketch", "#paint"); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment