diff --git a/src/app.js b/src/app.js index 5c1aa8a6591ed8c7e45862e63dec4a581fc050f9..a5fce1a6ea2581b5a89b1ee3ef26731e02e01fee 100644 --- a/src/app.js +++ b/src/app.js @@ -66,11 +66,30 @@ function eraseAt(x, y, room) { }) } +const SVG_URL = "http://www.w3.org/2000/svg" + +const SVG = { + create: { + circle: () => SVG.create.elem("circle"), + group: () => SVG.create.elem("g"), + path: () => SVG.create.elem("path"), + elem: (elemName) => document.createElementNS(SVG_URL, elemName), + }, +} + +const TEST_ERASE_INTERVAL = { + 0: { + start: [120, 120, true], + end: [140, 140, true], + }, +} + const addOrUpdatePathElem = (pathElems, id, points) => { let pathElem = pathElems.get(id) if (pathElem == null) { - pathElem = document.createElementNS("http://www.w3.org/2000/svg", "g") + pathElem = SVG.create.group() + console.log(pathElem) pathElem.setAttribute("stroke", STROKECOLOUR) pathElem.setAttribute("stroke-width", STROKERADIUS * 2) @@ -91,45 +110,64 @@ const addOrUpdatePathElem = (pathElems, id, points) => { // Push a fake path split to generate the last path points.push([-1, -1, false]) + const originalID = (i) => i - 1 + + let subPath = [] + let toAdd = undefined - let subpath = [] + for (let i = 0; i < points.length; i++) { + const point = points[i] + console.log(subPath) + if (toAdd) { + subPath.push(toAdd) + toAdd = undefined + } - for (const point of points) { if (point[0] === undefined) { continue } if (point[2] === false) { - if (subpath.length == 1) { - const subpathElem = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle", - ) + // End of subpath + if (subPath.length == 1) { + const subpathElem = SVG.create.circle() subpathElem.setAttribute("stroke", "none") subpathElem.setAttribute("fill", STROKECOLOUR) - subpathElem.setAttribute("cx", subpath[0][0]) - subpathElem.setAttribute("cy", subpath[0][1]) + subpathElem.setAttribute("cx", subPath[0][0]) + subpathElem.setAttribute("cy", subPath[0][1]) subpathElem.setAttribute("r", STROKERADIUS) pathElem.appendChild(subpathElem) - } else if (subpath.length > 0) { - const subpathElem = document.createElementNS( - "http://www.w3.org/2000/svg", - "path", - ) + } else if (subPath.length > 0) { + const subpathElem = SVG.create.path() - subpathElem.setAttribute("d", lineFn(subpath)) + subpathElem.setAttribute("d", lineFn(subPath)) pathElem.appendChild(subpathElem) } - subpath = [] + subPath = [] continue } - subpath.push(point) + // Valid point inside a subpath + subPath.push(point) + + const eraseInterval = TEST_ERASE_INTERVAL[originalID(i)] + + if (eraseInterval) { + // console.log(eraseInterval) + subPath.push(eraseInterval.start) + + const subpathElem = SVG.create.path() + subpathElem.setAttribute("d", lineFn(subPath)) + pathElem.appendChild(subpathElem) + subPath = [] + + toAdd = eraseInterval.end + } } return pathElem