Large perf increase in bitmapToMask

Author: Templarian

src/components/pg/button/button.css

@@ -3,6 +3,11 @@
   width: fit-content;
 }
 
+:host:has(button.block) {
+  display: flex;
+  width: unset;
+}
+
 [part=button] {
   display: flex;
   align-items: center;

src/components/pg/inputPixelEditor/inputPixelEditor.ts

@@ -1466,8 +1466,12 @@ export default class PgInputPixelEditor extends HTMLElement {
   #getLayerPaths() {
     return this.#data.map((layer, layerIndex) => {
       const colors = this.getLayerColorIndexes(layerIndex);
-      return colors.map((color) => {
-        return [color, bitmaskToPath(layer, { scale: 1, include: [color] })];
+      const paths = bitmaskToPath(layer, {
+        scale: 1,
+        include: colors.map((color) => ([color])),
+      });
+      return colors.map((color, i) => {
+        return [color, paths[i]];
       });
     });
   }
@@ -1489,7 +1493,7 @@ export default class PgInputPixelEditor extends HTMLElement {
               color,
               path: bitmaskToPath(this.#data[layerIndex], {
                 scale: 1,
-                include: [color]
+                include: [[color]]
               }),
             };
           });

src/components/pg/inputPixelEditor/utils/bitmapToMask.ts

@@ -13,18 +13,18 @@ interface Options {
   scale?: number;
   offsetX?: number;
   offsetY?: number;
-  include?: number[];
+  include?: number[][];
 }
 
 export function toIndex(x: number, y: number, width: number) {
   return y * width + x;
 }
 
 /**
- * Convert a 2d array to a SVG path.
+ * Convert a 2d array to SVG paths.
  * @param data
  * @param options
- * @returns path string
+ * @returns array of path strings, one per include grouping
  */
 export default function bitmaskToPath(data: number[] | number[][], options: Options = {}) {
 
@@ -34,10 +34,10 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     scale = 1,
     offsetX = 0,
     offsetY = 0,
-    include = [1];
+    include: number[][] = [[1]];
 
   if (options.width) {
-    bitmask = data as number[]; // already flat
+    bitmask = data as number[];
     width = options.width;
     height = bitmask.length / width;
     if (height % 1 !== 0) {
@@ -67,150 +67,184 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     include = options.include;
   }
 
-  // Naively copy into a new bitmask with a border of 1 to make sampling easier (no out of bounds checks)
+  const groupCount = include.length;
   const newWidth = width + 2;
   const newHeight = height + 2;
-  const bm = Array(newWidth * newHeight).fill(0);
 
-  // BM is just shifted over (1, 1) for the padding
   function BMXYToIndex(x: number, y: number) {
     return (y + 1) * newWidth + (x + 1);
   }
 
+  // Build value → group bitmask lookup
+  const valueToGroupBits = new Map<number, number>();
+  for (let g = 0; g < groupCount; ++g) {
+    for (const val of include[g]) {
+      valueToGroupBits.set(val, (valueToGroupBits.get(val) ?? 0) | (1 << g));
+    }
+  }
+
+  // Single pass: build padded cellMask where each cell stores a bitfield of group membership
+  const cellMask = new Int32Array(newWidth * newHeight);
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      bm[BMXYToIndex(x, y)] = include.includes(bitmask[toIndex(x, y, width)]) ? 1 : 0;
+      const bits = valueToGroupBits.get(bitmask[toIndex(x, y, width)]) ?? 0;
+      if (bits) {
+        cellMask[BMXYToIndex(x, y)] = bits;
+      }
     }
   }
 
-  // Edges data structure has [x, y, nextEdge, group]
+  // Allocate per-group edge structures upfront
   const edgeXCount = width * (height + 1);
   const edgeYCount = (width + 1) * height;
   const edgeCount = edgeXCount + edgeYCount;
 
-  const edges = Array(edgeCount).fill(0).map(() => ({ x: 0, y: 0, next: undefined })) as Edge[];
   function EdgeXIndex(x: number, y: number) {
     return y * width + x;
   }
   function EdgeYIndex(x: number, y: number) {
     return edgeXCount + y * (width + 1) + x;
   }
 
-  const groups = new Set<Edge>();
+  const allEdges: Edge[][] = [];
+  const allContours: Set<Edge>[] = [];
+  for (let g = 0; g < groupCount; ++g) {
+    allEdges.push(Array(edgeCount).fill(0).map(() => ({ x: 0, y: 0, next: undefined })) as Edge[]);
+    allContours.push(new Set<Edge>());
+  }
 
-  function SetEdge(edge: Edge, x: number, y: number) {
+  // Helper: check group membership via cellMask bit
+  function isSet(x: number, y: number, bit: number) {
+    return (cellMask[BMXYToIndex(x, y)] & bit) !== 0;
+  }
+
+  function SetEdge(contours: Set<Edge>, edge: Edge, x: number, y: number) {
     edge.x = x;
     edge.y = y;
-    groups.add(edge);
+    contours.add(edge);
   }
 
-  function UnionGroup(edge: Edge) {
+  function UnionGroup(contours: Set<Edge>, edge: Edge) {
     for (var itr = edge.next; itr !== undefined && itr !== edge; itr = itr.next) {
-      groups.delete(itr);
+      contours.delete(itr);
     }
     if (itr !== undefined) {
-      groups.add(edge);
+      contours.add(edge);
     }
   }
 
+  // Single pass edge detection for all groups
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      if (bm[BMXYToIndex(x, y)] === 1) {
-        const left = bm[BMXYToIndex(x - 1, y)];
-        if (left == 0) {
+      const myMask = cellMask[BMXYToIndex(x, y)];
+      if (myMask === 0) continue;
+
+      for (let g = 0; g < groupCount; ++g) {
+        const groupBit = 1 << g;
+        if ((myMask & groupBit) === 0) continue;
+
+        const edges = allEdges[g];
+        const contours = allContours[g];
+
+        if (!isSet(x - 1, y, groupBit)) {
           const edge = edges[EdgeYIndex(x, y)];
-          SetEdge(edge, x, y + 1);
-          if (bm[BMXYToIndex(x - 1, y - 1)]) {
+          SetEdge(contours, edge, x, y + 1);
+          if (isSet(x - 1, y - 1, groupBit)) {
             edge.next = edges[EdgeXIndex(x - 1, y)];
-          } else if (bm[BMXYToIndex(x, y - 1)]) {
+          } else if (isSet(x, y - 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x, y - 1)];
           } else {
             edge.next = edges[EdgeXIndex(x, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const right = bm[BMXYToIndex(x + 1, y)];
-        if (right === 0) {
+        if (!isSet(x + 1, y, groupBit)) {
           const edge = edges[EdgeYIndex(x + 1, y)];
-          SetEdge(edge, x + 1, y);
-          if (bm[BMXYToIndex(x + 1, y + 1)]) {
+          SetEdge(contours, edge, x + 1, y);
+          if (isSet(x + 1, y + 1, groupBit)) {
             edge.next = edges[EdgeXIndex(x + 1, y + 1)];
-          } else if (bm[BMXYToIndex(x, y + 1)]) {
+          } else if (isSet(x, y + 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x + 1, y + 1)];
           } else {
             edge.next = edges[EdgeXIndex(x, y + 1)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const top = bm[BMXYToIndex(x, y - 1)];
-        if (top === 0) {
-          const edge: Edge = edges[EdgeXIndex(x, y)];
-          SetEdge(edge, x, y);
-          if (bm[BMXYToIndex(x + 1, y - 1)]) {
+        if (!isSet(x, y - 1, groupBit)) {
+          const edge = edges[EdgeXIndex(x, y)];
+          SetEdge(contours, edge, x, y);
+          if (isSet(x + 1, y - 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x + 1, y - 1)];
-          } else if (bm[BMXYToIndex(x + 1, y)]) {
+          } else if (isSet(x + 1, y, groupBit)) {
             edge.next = edges[EdgeXIndex(x + 1, y)];
           } else {
             edge.next = edges[EdgeYIndex(x + 1, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const bottom = bm[BMXYToIndex(x, y + 1)];
-        if (bottom === 0) {
+        if (!isSet(x, y + 1, groupBit)) {
           const edge = edges[EdgeXIndex(x, y + 1)];
-          SetEdge(edge, x + 1, y + 1);
-          if (bm[BMXYToIndex(x - 1, y + 1)]) {
+          SetEdge(contours, edge, x + 1, y + 1);
+          if (isSet(x - 1, y + 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x, y + 1)];
-          } else if (bm[BMXYToIndex(x - 1, y)]) {
+          } else if (isSet(x - 1, y, groupBit)) {
             edge.next = edges[EdgeXIndex(x - 1, y + 1)];
           } else {
             edge.next = edges[EdgeYIndex(x, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
       }
     }
   }
 
-  for (const edge of groups) {
-    let itr = edge;
-    do {
-      if (itr.next) {
-        itr.next.type = itr.x == itr?.next?.x ? 'V' : 'H';
-        itr = itr.next;
-      }
-    } while (itr !== edge);
-  }
-
-  // Compress sequences of H and V
-  for (let edge of groups) {
-    let itr = edge;
-    do {
-      if (itr.type != itr.next?.type) {
-        while (itr.next?.type == itr.next?.next?.type) {
-          if (itr.next === edge) {
-            groups.delete(edge);
-            edge = itr.next.next as Edge;
-            groups.add(edge); // Note this will cause it to iterate over this group again, meh.
+  // Per-group post-processing: type assignment, compression, path building
+  const paths: string[] = [];
+
+  for (let g = 0; g < groupCount; ++g) {
+    const contours = allContours[g];
+
+    for (const edge of contours) {
+      let itr = edge;
+      do {
+        if (itr.next) {
+          itr.next.type = itr.x == itr?.next?.x ? 'V' : 'H';
+          itr = itr.next;
+        }
+      } while (itr !== edge);
+    }
+
+    for (let edge of contours) {
+      let itr = edge;
+      do {
+        if (itr.type != itr.next?.type) {
+          while (itr.next?.type == itr.next?.next?.type) {
+            if (itr.next === edge) {
+              contours.delete(edge);
+              edge = itr.next.next as Edge;
+              contours.add(edge);
+            }
+            itr.next = itr.next?.next;
           }
-          itr.next = itr.next?.next;
+        }
+        itr = itr.next as Edge;
+      } while (itr !== edge);
+    }
+
+    let path = '';
+    for (const edge of contours) {
+      path += `M${edge.x * scale},${edge.y * scale}`;
+      for (var itr = edge.next; itr != edge; itr = itr?.next) {
+        if (itr?.type == 'H') {
+          path += `H${(itr?.x * scale) + offsetX}`;
+        } else if (itr?.type == 'V') {
+          path += `V${(itr?.y * scale) + offsetY}`;
         }
       }
-      itr = itr.next as Edge;
-    } while (itr !== edge);
-  }
-
-  let path = '';
-  for (const edge of groups) {
-    path += `M${edge.x * scale},${edge.y * scale}`;
-    for (var itr = edge.next; itr != edge; itr = itr?.next) {
-      if (itr?.type == 'H') {
-        path += `H${(itr?.x * scale) + offsetX}`;
-      } else if (itr?.type == 'V') {
-        path += `V${(itr?.y * scale) + offsetY}`;
-      }
+      path += 'Z';
     }
-    path += 'Z';
+    paths.push(path);
   }
-  return path;
+
+  return paths;
 }

src/components/pg/table/__examples__/basic/basic.ts

@@ -91,6 +91,7 @@ export default class XPgTableBasic extends HTMLElement {
   newCount = 0;
   handlePushData() {
     this.$table.data.push(createTableItem({
+      selected: false,
       name: `new ${this.newCount++}`,
       age: this.newCount,
       favorite: {