diff --git a/src/app.js b/src/app.js index 0563e444b13219b9c0b77d69312961620b1bd0d2..46fc45992e0e7265dd825e944253bfbc7776c192 100644 --- a/src/app.js +++ b/src/app.js @@ -23,7 +23,7 @@ const tools = { const STROKECOLOUR = "blue" const STROKERADIUS = 2 -const ERASERRADIUS = STROKERADIUS * 8 +const ERASERRADIUS = STROKERADIUS * 10 function interpolatedCoordinate(start, end, length) { const dx = end[0] - start[0] @@ -36,36 +36,47 @@ function interpolatedCoordinate(start, end, length) { function eraseAt(x, y, room) { let mousePos = [x, y] room.getPaths().forEach((points, pathID) => { + const t = computeErasureIntervals(points, mousePos, ERASERRADIUS) + if (!TEST_ERASE_INTERVAL[pathID]) TEST_ERASE_INTERVAL[pathID] = {} + TEST_ERASE_INTERVAL[pathID] = combineErasureIntervals( + TEST_ERASE_INTERVAL[pathID], + t, + ) + room.dispatchEvent( + new CustomEvent("addOrUpdatePath", { + detail: { id: pathID, points }, + }), + ) points.forEach((point, i) => { const distanceToPoint = getDistance(mousePos, point) if (distanceToPoint <= ERASERRADIUS) { room.erasePoint(pathID, i) - let prev, next - if (i > 0) { - prev = i - 1 - } - if (i < points.length - 1) { - next = i + 1 - } - - if (prev !== undefined) { - const interpolatedPoint = interpolatedCoordinate( - point, - points[prev], - ERASERRADIUS, - ) - room.insertIntoPath(pathID, prev, interpolatedPoint) - } - - if (next !== undefined) { - const interpolatedPoint = interpolatedCoordinate( - point, - points[next], - ERASERRADIUS, - ) - room.insertIntoPath(pathID, next, interpolatedPoint) - } + // let prev, next + // if (i > 0) { + // prev = i - 1 + // } + // if (i < points.length - 1) { + // next = i + 1 + // } + + // if (prev !== undefined) { + // const interpolatedPoint = interpolatedCoordinate( + // point, + // points[prev], + // ERASERRADIUS, + // ) + // room.insertIntoPath(pathID, prev, interpolatedPoint) + // } + + // if (next !== undefined) { + // const interpolatedPoint = interpolatedCoordinate( + // point, + // points[next], + // ERASERRADIUS, + // ) + // room.insertIntoPath(pathID, next, interpolatedPoint) + // } } }) }) @@ -82,7 +93,7 @@ const SVG = { }, } -let TEST_ERASE_INTERVAL = { 0: [[0.1, 0.3], [0.4, 0.8]] } +let TEST_ERASE_INTERVAL = {} // { 0: [[0.1, 0.3], [0.4, 0.8]] } function erasurePoints(pointA, pointB, start, fin) { if (start >= fin) return @@ -166,8 +177,15 @@ const addOrUpdatePathElem = (pathElems, id, points) => { // Valid point inside a subpath subPath.push(point) - const eraseIntervals = TEST_ERASE_INTERVAL[i] + const eraseIntervalsForPath = TEST_ERASE_INTERVAL[id] + if (!eraseIntervalsForPath) continue + const eraseIntervals = TEST_ERASE_INTERVAL[id][i] if (!eraseIntervals) continue + if (i === points.length - 1) { + continue + } + + const nextPoint = points[i + 1] for (const eraseInterval of eraseIntervals) { if (eraseInterval) { @@ -176,18 +194,14 @@ const addOrUpdatePathElem = (pathElems, id, points) => { toAdd = undefined } - if (i === points.length - 1) { - continue - } - - const nextPoint = points[i + 1] - - const [start, fin] = erasurePoints( + const erp = erasurePoints( point, nextPoint, eraseInterval[0], eraseInterval[1], ) + if (!(erp && erp.length)) continue + const [start, fin] = erp subPath.push(start) @@ -302,20 +316,7 @@ function handleRoomConnectionEstablished(room) { if (currentTool == tools.PEN) { room.extendPath(pathIDsByPointerID.get(e.pointerId), mousePos) } else if (currentTool == tools.ERASER) { - room.getPaths().forEach((points, pathID) => { - const t = computeErasureIntervals(points, mousePos, ERASERRADIUS) - TEST_ERASE_INTERVAL = combineErasureIntervals(TEST_ERASE_INTERVAL, t) - room.dispatchEvent( - new CustomEvent("addOrUpdatePath", { - detail: { id: pathID, points }, - }), - ) - points.forEach((point, i) => { - if (getDistance(mousePos, point) <= ERASERRADIUS) { - room.erasePoint(pathID, i) - } - }) - }) + eraseAt(e.offsetX, e.offsetY, room) } } @@ -379,8 +380,10 @@ function handleRoomConnectionEstablished(room) { HTML.roomConnectButton.addEventListener("click", roomConnectButtonOnClick) let pid = room.addPath([100, 100]) - room.extendPath(pid, [150, 150]) - room.extendPath(pid, [100, 200]) + room.extendPath(pid, [110, 105]) + room.extendPath(pid, [120, 100]) + room.extendPath(pid, [130, 105]) + room.extendPath(pid, [140, 100]) } function handleRoomConnectionError(err) { diff --git a/src/erasure.js b/src/erasure.js index 32686f399f9e8a5059dccc4d9a6bbfc8825513c6..7fcbbb2be42523044935c9472dff2226b4377c48 100644 --- a/src/erasure.js +++ b/src/erasure.js @@ -3,7 +3,7 @@ function distance([x1, y1], [x2, y2]) { } function sqr(x) { - return x * x + return x ** 2 } function dist2(v, w) { @@ -63,7 +63,7 @@ function cap1(x) { } function erasureInterval(lineStart, lineEnd, erasureCenter, erasureRadius) { - const [cx, cy] = interpolate( + const projectionPoint = interpolate( lineStart, lineEnd, project(lineStart, lineEnd, erasureCenter), @@ -72,9 +72,10 @@ function erasureInterval(lineStart, lineEnd, erasureCenter, erasureRadius) { const halfLength = Math.sqrt(erasureRadius ** 2 - d ** 2) const lineLength = distance(lineStart, lineEnd) - const touchFromStartDist = distance(lineStart, [cx, cy]) + const touchFromStartDist = distance(lineStart, projectionPoint) const touchBeginFromStarDist = touchFromStartDist - halfLength const touchEndFromStarDist = touchFromStartDist + halfLength + return [ cap0(touchBeginFromStarDist / lineLength), cap1(touchEndFromStarDist / lineLength),