[Editor] Move the code to generate the SVG path from draw_layer.js to outliner.js

src/display/draw_layer.js

@@ -69,31 +69,34 @@ class DrawLayer {
     return svg;
   }
 
-  highlight({ outlines, box }, color, opacity) {
+  #createClipPath(defs, pathId) {
+    const clipPath = DrawLayer._svgFactory.createElement("clipPath");
+    defs.append(clipPath);
+    const clipPathId = `clip_${pathId}`;
+    clipPath.setAttribute("id", clipPathId);
+    clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
+    const clipPathUse = DrawLayer._svgFactory.createElement("use");
+    clipPath.append(clipPathUse);
+    clipPathUse.setAttribute("href", `#${pathId}`);
+    clipPathUse.classList.add("clip");
+
+    return clipPathId;
+  }
+
+  highlight(outlines, color, opacity) {
     const id = this.#id++;
-    const root = this.#createSVG(box);
+    const root = this.#createSVG(outlines.box);
     root.classList.add("highlight");
     const defs = DrawLayer._svgFactory.createElement("defs");
     root.append(defs);
     const path = DrawLayer._svgFactory.createElement("path");
     defs.append(path);
     const pathId = `path_p${this.pageIndex}_${id}`;
     path.setAttribute("id", pathId);
-    path.setAttribute(
-      "d",
-      DrawLayer.#extractPathFromHighlightOutlines(outlines)
-    );
+    path.setAttribute("d", outlines.toSVGPath());
 
     // Create the clipping path for the editor div.
-    const clipPath = DrawLayer._svgFactory.createElement("clipPath");
-    defs.append(clipPath);
-    const clipPathId = `clip_${pathId}`;
-    clipPath.setAttribute("id", clipPathId);
-    clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
-    const clipPathUse = DrawLayer._svgFactory.createElement("use");
-    clipPath.append(clipPathUse);
-    clipPathUse.setAttribute("href", `#${pathId}`);
-    clipPathUse.classList.add("clip");
+    const clipPathId = this.#createClipPath(defs, pathId);
 
     const use = DrawLayer._svgFactory.createElement("use");
     root.append(use);
@@ -106,24 +109,21 @@ class DrawLayer {
     return { id, clipPathId: `url(#${clipPathId})` };
   }
 
-  highlightOutline({ outlines, box }) {
+  highlightOutline(outlines) {
     // We cannot draw the outline directly in the SVG for highlights because
     // it composes with its parent with mix-blend-mode: multiply.
     // But the outline has a different mix-blend-mode, so we need to draw it in
     // its own SVG.
     const id = this.#id++;
-    const root = this.#createSVG(box);
+    const root = this.#createSVG(outlines.box);
     root.classList.add("highlightOutline");
     const defs = DrawLayer._svgFactory.createElement("defs");
     root.append(defs);
     const path = DrawLayer._svgFactory.createElement("path");
     defs.append(path);
     const pathId = `path_p${this.pageIndex}_${id}`;
     path.setAttribute("id", pathId);
-    path.setAttribute(
-      "d",
-      DrawLayer.#extractPathFromHighlightOutlines(outlines)
-    );
+    path.setAttribute("d", outlines.toSVGPath());
     path.setAttribute("vector-effect", "non-scaling-stroke");
 
     const use1 = DrawLayer._svgFactory.createElement("use");
@@ -139,27 +139,6 @@ class DrawLayer {
     return id;
   }
 
-  static #extractPathFromHighlightOutlines(polygons) {
-    const buffer = [];
-    for (const polygon of polygons) {
-      let [prevX, prevY] = polygon;
-      buffer.push(`M${prevX} ${prevY}`);
-      for (let i = 2; i < polygon.length; i += 2) {
-        const x = polygon[i];
-        const y = polygon[i + 1];
-        if (x === prevX) {
-          buffer.push(`V${y}`);
-          prevY = y;
-        } else if (y === prevY) {
-          buffer.push(`H${x}`);
-          prevX = x;
-        }
-      }
-      buffer.push("Z");
-    }
-    return buffer.join(" ");
-  }
-
   updateBox(id, box) {
     DrawLayer.#setBox(this.#mapping.get(id), box);
   }

src/display/editor/outliner.js

@@ -170,7 +170,7 @@ class Outliner {
       }
       outline.push(lastPointX, lastPointY);
     }
-    return { outlines, box: this.#box };
+    return new HighlightOutline(outlines, this.#box);
   }
 
   #binarySearch(y) {
@@ -259,4 +259,51 @@ class Outliner {
   }
 }
 
+class Outline {
+  toSVGPath() {
+    throw new Error("Abstract method `toSVGPath` must be implemented.");
+  }
+
+  get box() {
+    throw new Error("Abstract getter `box` must be implemented.");
+  }
+}
+
+class HighlightOutline extends Outline {
+  #box;
+
+  #outlines;
+
+  constructor(outlines, box) {
+    super();
+    this.#outlines = outlines;
+    this.#box = box;
+  }
+
+  toSVGPath() {
+    const buffer = [];
+    for (const polygon of this.#outlines) {
+      let [prevX, prevY] = polygon;
+      buffer.push(`M${prevX} ${prevY}`);
+      for (let i = 2; i < polygon.length; i += 2) {
+        const x = polygon[i];
+        const y = polygon[i + 1];
+        if (x === prevX) {
+          buffer.push(`V${y}`);
+          prevY = y;
+        } else if (y === prevY) {
+          buffer.push(`H${x}`);
+          prevX = x;
+        }
+      }
+      buffer.push("Z");
+    }
+    return buffer.join(" ");
+  }
+
+  get box() {
+    return this.#box;
+  }
+}
+
 export { Outliner };