diff --git a/public/index.html b/public/index.html
index 863ce55f807478b515982a345b129c37ecde6a40..68f4a58727ef446a10cf07ab501793aa250222d6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,6 @@
<link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="logo.png" />
<link rel="stylesheet" href="styles.css" />
- <link
- href="https://fonts.googleapis.com/css?family=Martel:300,400&display=swap"
- rel="stylesheet"
- />
<link
rel="stylesheet"
@@ -61,113 +57,6 @@
<button id="pen-tool" class="selected">
<i class="fa fa-paint-brush"></i>
</button>
- <div id="pen-properties" class="properties">
- <div class="pen-contents">
- <div class="pen-header">
- <span class="close">×</span>
- <h2>Pen properties</h2>
- </div>
- <div class="pen-body">
- <div id="brush-colour">
- <h3>Brush colour</h3>
- </div>
-
- <a href="#">
- <div id="rectangle"></div>
- </a>
- </div>
- </div>
- </div>
- <div id="palette" class="properties" style="padding-top: 150px">
- <div class="palette-selector">
- <div class="wheel-header">
- <span class="close">×</span>
- <h2>Select a colour from the palette</h2>
- </div>
- <svg
- id="wheel"
- viewBox="0 10 100 100"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- >
- <defs>
- <path
- id="piePiece"
- d="M 42.2,78.9 46.1,64.4 Q 50,65 53.88,64.48 L 57.7,78.9 Q 50,80 42.2,78.9Z"
- />
- </defs>
- <a href="#">
- <use class="wheelPiece" xlink:href="#piePiece" fill="#329739" />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(30,50,50)"
- fill="#639b47"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(60,50,50)"
- fill="#9ac147"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(90,50,50)"
- fill="#A9AA39"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(120,50,50)"
- fill="#e1e23b"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(150,50,50)"
- fill="#f7941e"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(180,50,50)"
- fill="#ba3e2e"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(210,50,50)"
- fill="#9a1d34"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(240,50,50)"
- fill="#662a6c"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(270,50,50)"
- fill="#272b66"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(300,50,50)"
- fill="#2d559f"
- />
- <use
- class="wheelPiece"
- xlink:href="#piePiece"
- transform="rotate(330,50,50)"
- fill="#43a1cd"
- />
- </a>
- </svg>
- </div>
- </div>
<button id="eraser-tool"><i class="fa fa-eraser"></i></button>
<div id="connected-room-info">
You are connected to a room: <span id="connected-room-id"></span>
diff --git a/public/styles.css b/public/styles.css
index 067051c0e9aeea80bb3eb5826767c111626838e6..e79e429218c85986505ec9b3dcc945bd24be43b6 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -158,104 +158,3 @@ button.selected {
background-color: #4f4f4f !important;
transition-duration: 0.4s;
}
-
-.properties {
- display: none;
- position: fixed;
- z-index: 1;
- padding-top: 100px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgb(0, 0, 0);
- background-color: rgba(0, 0, 0, 0.4);
-}
-
-.pen-contents {
- position: relative;
- background-color: #fefefe;
- margin: auto;
- padding: 0;
- border: 1px solid #888;
- width: 80%;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
- animation-name: animatetop;
- animation-duration: 0.4s;
- font-family: "Martel", serif;
-}
-
-.close {
- color: white;
- float: right;
- font-size: 28px;
- font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
-}
-
-.pen-header {
- padding: 2px 16px;
- background-color: #2f2f2f;
- color: white;
-}
-
-.pen-body {
- padding: 2px 16px;
- display: flex;
- align-items: center;
-}
-
-@keyframes animatetop {
- from {
- top: -300px;
- opacity: 0;
- }
- to {
- top: 0;
- opacity: 1;
- }
-}
-
-#rectangle {
- height: 20px;
- width: 30px;
- background-color: blue;
-}
-
-.palette-selector {
- position: relative;
- background-color: #fefefe;
- margin: auto;
- padding: 0;
- border: 1px solid #888;
- width: 500px;
- height: 500px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
- font-family: "Martel", serif;
-}
-
-.wheelPiece {
- opacity: 0.8;
-}
-
-.wheelPiece:hover {
- opacity: 1;
-}
-
-.wheel-header {
- padding: 2px 16px;
- background-color: #2f2f2f;
- color: white;
- text-align: center;
-}
-
-.properties:palette {
- padding-top: 50px;
-}
diff --git a/src/app.js b/src/app.js
index 40f046eb207e012e24cbf7b9a020ec5ae62f25fa..075cd18d270f728be86fa11f5616f8118dc16026 100644
--- a/src/app.js
+++ b/src/app.js
@@ -63,44 +63,11 @@ let currentTool = tools.PEN
const pathIDsByPointerID = new Map()
HTML.penButton.addEventListener("click", () => {
- if (currentTool == tools.PEN) {
- HTML.properties.style.display = "block"
- } else {
- currentTool = tools.PEN
- HTML.penButton.classList.add("selected")
- HTML.eraserButton.classList.remove("selected")
- }
+ currentTool = tools.PEN
+ HTML.penButton.classList.add("selected")
+ HTML.eraserButton.classList.remove("selected")
})
-HTML.span.forEach((element) => {
- element.addEventListener("click", () => {
- element.parentNode.parentNode.parentNode.style.display = "none"
- })
-})
-
-window.addEventListener("click", (event) => {
- if (event.target == HTML.properties) {
- HTML.properties.style.display = "none"
- } else if (event.target == HTML.palette) {
- HTML.palette.style.display = "none"
- HTML.properties.style.display = "none"
- }
-})
-
-HTML.rectangle.addEventListener("click", () => {
- HTML.palette.style.display = "block"
-})
-
-var svg = HTML.wheel.children
-for (var i = 1; i < svg.length; i++) {
- svg[i].addEventListener("click", (event) => {
- var paletteColour = event.target.getAttribute("fill")
- HTML.rectangle.style.backgroundColor = paletteColour
- canvas.setStrokeColour(paletteColour)
- HTML.palette.style.display = "none"
- })
-}
-
HTML.eraserButton.addEventListener("click", () => {
currentTool = tools.ERASER
HTML.penButton.classList.remove("selected")
@@ -160,10 +127,7 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
const mousePos = [e.offsetX, e.offsetY]
if (currentTool == tools.PEN) {
- pathIDsByPointerID.set(
- e.pointerId,
- room.addPath([...mousePos, e.pressure, canvas.stroke_colour]),
- )
+ pathIDsByPointerID.set(e.pointerId, room.addPath([...mousePos, e.pressure]))
} else if (currentTool == tools.ERASER) {
erasePoint(mousePos)
}
@@ -184,7 +148,6 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
room.extendPath(pathIDsByPointerID.get(e.pointerId), [
...mousePos,
e.pressure,
- canvas.stroke_colour,
])
} else if (currentTool == tools.ERASER) {
erasePoint(mousePos)
diff --git a/src/canvas.js b/src/canvas.js
index 7ea872de8af48046bb02ba8b0e637d910e6cb010..0620076a5a93b7fcae919d75e463d3c87e56ff77 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -16,7 +16,7 @@ const lineFn = line()
const pathGroupElems = new Map()
-export var stroke_colour = "blue"
+export const STROKE_COLOUR = "blue"
export const MIN_STROKE_RADIUS = 0.1
export const MAX_STROKE_RADIUS = 3.9
@@ -35,13 +35,11 @@ const createPathElem = (d, width) => {
export const renderPath = (id, points) => {
points = points.filter(([x]) => x != null)
- var colour = ""
// Split up points into completely non-erased segments.
let segments = [[]]
for (const point of points) {
- colour = point[3]
- if (point[4] != false) {
+ if (point[3] != false) {
segments[segments.length - 1].push(point)
} else {
segments.push([])
@@ -61,7 +59,7 @@ export const renderPath = (id, points) => {
if (pathGroupElem == null) {
pathGroupElem = document.createElementNS(SVG_URL, "g")
- pathGroupElem.setAttribute("stroke", colour)
+ pathGroupElem.setAttribute("stroke", STROKE_COLOUR)
pathGroupElem.setAttribute("fill", "none")
pathGroupElem.setAttribute("stroke-linecap", "round")
pathGroupElem.setAttribute("pointer-events", "none")
@@ -75,7 +73,7 @@ export const renderPath = (id, points) => {
if (subpath.length == 1) {
const circleElem = document.createElementNS(SVG_URL, "circle")
circleElem.setAttribute("stroke", "none")
- circleElem.setAttribute("fill", colour)
+ circleElem.setAttribute("fill", STROKE_COLOUR)
circleElem.setAttribute("cx", subpath[0][0])
circleElem.setAttribute("cy", subpath[0][1])
circleElem.setAttribute("r", getStrokeRadius(subpath[0][2]))
@@ -84,7 +82,6 @@ export const renderPath = (id, points) => {
// Further split up segments based on thickness.
const subpath_ = subpath.slice()
let w = subpath_[0][2]
- console.log(w)
for (let i = 1; i < subpath_.length; i++) {
if (subpath_[i][2] != w) {
const d = lineFn([...subpath_.splice(0, i), subpath_[0]])
@@ -122,7 +119,3 @@ canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
canvas.addEventListener("touchmove", (e) => e.preventDefault())
-
-export function setStrokeColour(colour) {
- stroke_colour = colour
-}
diff --git a/src/elements.js b/src/elements.js
index dc03849bff521e250947acef6b6fea3a802502fd..0d8400f1e240bf971ce9758ed664eae0d9c7d81a 100644
--- a/src/elements.js
+++ b/src/elements.js
@@ -14,9 +14,3 @@ export const connectedRoomID = document.getElementById("connected-room-id")
export const connectedRoomInfoContainer = document.getElementById(
"connected-room-info",
)
-
-export const properties = document.getElementById("pen-properties")
-export const span = document.querySelectorAll(".close")
-export const palette = document.getElementById("palette")
-export const rectangle = document.getElementById("rectangle")
-export const wheel = document.getElementById("wheel")
diff --git a/src/liowebrtc b/src/liowebrtc
index 545380d3c27797799f3013ad112f9f17c64bc8c7..9b066b28a56a902b7ba0fe1532508bf28f269604 160000
--- a/src/liowebrtc
+++ b/src/liowebrtc
@@ -1 +1 @@
-Subproject commit 545380d3c27797799f3013ad112f9f17c64bc8c7
+Subproject commit 9b066b28a56a902b7ba0fe1532508bf28f269604
diff --git a/src/room.js b/src/room.js
index e7ad251629752b78678a5c2e35ce94e419c6d5f3..ae28294abeeb45dd0831723c01b891702d423516 100644
--- a/src/room.js
+++ b/src/room.js
@@ -23,14 +23,14 @@ class Room extends EventTarget {
this._y.destroy()
}
- addPath([x, y, w, z]) {
+ addPath([x, y, w]) {
const id = uuidv4()
- this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, z]])
+ this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w]])
return id
}
- extendPath(id, [x, y, w, z]) {
- this._y.share.strokeAdd.get(id).push([[x, y, w, z]])
+ extendPath(id, [x, y, w]) {
+ this._y.share.strokeAdd.get(id).push([[x, y, w]])
}
getPaths() {
@@ -65,7 +65,7 @@ class Room extends EventTarget {
return addSet
.toArray()
- .map((p = [], i) => [p[0], p[1], p[2], p[3], !eraseSet.get(i.toString())])
+ .map((p = [], i) => [p[0], p[1], p[2], !eraseSet.get(i.toString())])
}
inviteUser(id) {