Skip to content
Snippets Groups Projects
Commit 22531aba authored by Nayeem Rahman's avatar Nayeem Rahman
Browse files

Support touchscreens and multi-touch

parent 289e7468
No related branches found
No related tags found
No related merge requests found
......@@ -48,14 +48,14 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
let subpath = []
for (let point of points) {
for (const point of points) {
if (point[0] === undefined) {
continue
}
if (point[2] === false) {
if (subpath.length === 1) {
let subpathElem = document.createElementNS(
if (subpath.length == 1) {
const subpathElem = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle",
)
......@@ -68,7 +68,7 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
pathElem.appendChild(subpathElem)
} else if (subpath.length > 0) {
let subpathElem = document.createElementNS(
const subpathElem = document.createElementNS(
"http://www.w3.org/2000/svg",
"path",
)
......@@ -125,19 +125,13 @@ function handleRoomConnectClick() {
function handleRoomConnectionEstablished(room) {
showConnectedRoom(room.name)
let userInput = false
let currentTool = tools.PEN
let pathElems = new Map()
let currentPathID = null
HTML.userIDElem.value = room.ownID || ""
room.addEventListener("allocateOwnID", ({ detail: id }) => {
HTML.userIDElem.value = id
})
room.addEventListener("userJoin", ({ detail: id }) => {
if (HTML.connectedPeers.children.length === 0) {
if (HTML.connectedPeers.children.length == 0) {
HTML.connectedPeers.innerHTML = ""
}
......@@ -153,89 +147,63 @@ function handleRoomConnectionEstablished(room) {
}
}
if (HTML.connectedPeers.children.length === 0) {
if (HTML.connectedPeers.children.length == 0) {
HTML.connectedPeers.innerHTML = "No peers are connected"
}
})
const pathElems = new Map()
room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
addOrUpdatePathElem(pathElems, id, points)
})
const canvasOnMouseDown = (e) => {
userInput = true
let mouse = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
currentPathID = room.addPath(mouse)
} else if (currentTool === tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
})
}
}
HTML.canvas.addEventListener("mousedown", canvasOnMouseDown)
const canvasOnMouseLeave = () => {
userInput = false
}
HTML.canvas.addEventListener("mouseleave", canvasOnMouseLeave)
const canvasOnMouseEnter = (e) => {
if (e.buttons === 0) {
userInput = false
let currentTool = tools.PEN
const pathIDsByPointerID = new Map()
const canvasOnPointerEnter = (e) => {
if (~e.buttons & 1) {
return
}
userInput = true
let mouse = [e.offsetX, e.offsetY]
const mousePos = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
currentPathID = room.addPath(mouse)
} else if (currentTool === tools.ERASER) {
if (currentTool == tools.PEN) {
pathIDsByPointerID.set(e.pointerId, room.addPath(mousePos))
} else if (currentTool == tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
if (getDistance(mousePos, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
})
}
}
HTML.canvas.addEventListener("mouseenter", canvasOnMouseEnter)
const canvasOnMouseUp = () => {
userInput = false
const canvasOnPointerLeave = (e) => {
pathIDsByPointerID.delete(e.pointerId)
}
HTML.canvas.addEventListener("mouseup", canvasOnMouseUp)
const canvasOnMouseMove = (e) => {
if (!userInput) {
const canvasOnPointerMove = (e) => {
if (~e.buttons & 1) {
return
}
let mouse = [e.offsetX, e.offsetY]
const mousePos = [e.offsetX, e.offsetY]
if (currentTool === tools.PEN) {
room.extendPath(currentPathID, mouse)
} else if (currentTool === tools.ERASER) {
if (currentTool == tools.PEN) {
room.extendPath(pathIDsByPointerID.get(e.pointerId), mousePos)
} else if (currentTool == tools.ERASER) {
room.getPaths().forEach((points, pathID) => {
points.forEach((point, i) => {
if (getDistance(mouse, point) <= ERASERRADIUS) {
if (getDistance(mousePos, point) <= ERASERRADIUS) {
room.erasePoint(pathID, i)
}
})
})
}
}
HTML.canvas.addEventListener("mousemove", canvasOnMouseMove)
const peerButtonOnClick = () => {
const peerID = HTML.peerIDElem.value
......@@ -245,7 +213,6 @@ function handleRoomConnectionEstablished(room) {
room.inviteUser(peerID)
HTML.peerIDElem.value = ""
}
HTML.peerButton.addEventListener("click", peerButtonOnClick)
const penButtonOnClick = () => {
currentTool = tools.PEN
......@@ -253,7 +220,6 @@ function handleRoomConnectionEstablished(room) {
HTML.penButton.classList.add("selected")
HTML.eraserButton.classList.remove("selected")
}
HTML.penButton.addEventListener("click", penButtonOnClick)
const eraserButtonOnClick = () => {
currentTool = tools.ERASER
......@@ -261,18 +227,28 @@ function handleRoomConnectionEstablished(room) {
HTML.penButton.classList.remove("selected")
HTML.eraserButton.classList.add("selected")
}
HTML.eraserButton.addEventListener("click", eraserButtonOnClick)
HTML.canvas.addEventListener("pointerdown", canvasOnPointerEnter)
HTML.canvas.addEventListener("pointerenter", canvasOnPointerEnter)
HTML.canvas.addEventListener("pointerup", canvasOnPointerLeave)
HTML.canvas.addEventListener("pointerleave", canvasOnPointerLeave)
HTML.canvas.addEventListener("pointermove", canvasOnPointerMove)
HTML.penButton.addEventListener("click", penButtonOnClick)
HTML.eraserButton.addEventListener("click", eraserButtonOnClick)
HTML.peerButton.addEventListener("click", peerButtonOnClick)
HTML.roomConnectButton.removeEventListener("click", handleRoomConnectClick)
const roomConnectButtonOnClick = () => {
const selectedRoomID = HTML.roomIDElem.value
if (!selectedRoomID || selectedRoomID === room.name) return
if (!selectedRoomID || selectedRoomID == room.name) {
return
}
HTML.canvas.removeEventListener("mousedown", canvasOnMouseDown)
HTML.canvas.removeEventListener("mouseleave", canvasOnMouseLeave)
HTML.canvas.removeEventListener("mouseenter", canvasOnMouseEnter)
HTML.canvas.removeEventListener("mouseup", canvasOnMouseUp)
HTML.canvas.removeEventListener("mousemove", canvasOnMouseMove)
HTML.canvas.removeEventListener("pointerdown", canvasOnPointerEnter)
HTML.canvas.removeEventListener("pointerenter", canvasOnPointerEnter)
HTML.canvas.removeEventListener("pointerup", canvasOnPointerLeave)
HTML.canvas.removeEventListener("pointerleave", canvasOnPointerLeave)
HTML.canvas.removeEventListener("pointermove", canvasOnPointerMove)
HTML.peerButton.removeEventListener("click", peerButtonOnClick)
HTML.penButton.removeEventListener("click", penButtonOnClick)
HTML.eraserButton.removeEventListener("click", eraserButtonOnClick)
......@@ -282,7 +258,7 @@ function handleRoomConnectionEstablished(room) {
)
room.disconnect()
room = undefined
room = null
handleRoomConnectClick()
}
......@@ -299,6 +275,8 @@ function connectToARoom(roomID) {
.catch(handleRoomConnectionError)
}
HTML.canvas.addEventListener("touchmove", (e) => e.preventDefault())
HTML.roomConnectButton.addEventListener("click", handleRoomConnectClick, {
once: true,
})
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment