WIP: erasing intervals

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