create sortElementsByHtmlOrder helper

Author: spearwolf

packages/twopoint5d-elements/src/components/GlitchPassElement.ts

@@ -39,11 +39,9 @@ export class GlitchPassElement extends TwoPoint5DElement implements PostProcessi
     const postProcessing = this.postProcessing;
     if (postProcessing != null) {
       this.logger?.log('add glitchPass to postProcessing', {postProcessing, self: this});
-      // postProcessing.renderer.addPass(this.pass);
       postProcessing.addPassElement(this);
       return () => {
         this.logger?.log('remove glitchPass from postProcessing', {postProcessing, self: this});
-        // postProcessing.renderer.removePass(this.pass);
         postProcessing.removePassElement(this);
       };
     }

packages/twopoint5d-elements/src/utils/sortElementsByHtmlOrder.spec.ts

@@ -0,0 +1,35 @@
+import {describe, expect, it} from 'vitest';
+import {sortElementsByHtmlOrder} from './sortElementsByHtmlOrder.js';
+
+const createElement = (id: string, children: HTMLElement[] = []) => {
+  const div = document.createElement('div');
+  div.id = id;
+  div.append(...children);
+  return div;
+};
+
+describe('sortElementsByHtmlOrder', () => {
+  it('should sort elements by html order', () => {
+    const A = createElement('A');
+    const B = createElement('B');
+    const C = createElement('C');
+    const D = createElement('D');
+    const E = createElement('E');
+    const F = createElement('F');
+    const G = createElement('G');
+    const H = createElement('H');
+
+    const dAB = createElement('dAB', [A, B]);
+    const dFAB = createElement('dFAB', [F, dAB]);
+    const dG = createElement('dG', [G]);
+    const dCD = createElement('dCD', [C, D]);
+    const dCDE = createElement('dCDE', [dCD, E]);
+
+    const ROOT = createElement('ROOT', [dFAB, dG, H, dCDE]);
+
+    const children = sortElementsByHtmlOrder(ROOT, [A, B, C, D, E, F, G, H]);
+
+    expect(children).toHaveLength(8);
+    expect(children).toEqual([F, A, B, G, H, C, D, E]);
+  });
+});

packages/twopoint5d-elements/src/utils/sortElementsByHtmlOrder.ts

@@ -0,0 +1,72 @@
+class ElementItem {
+  container: HTMLElement;
+  children: HTMLElement[];
+
+  constructor(container: HTMLElement, children: HTMLElement[] = []) {
+    this.container = container;
+    this.children = children;
+  }
+
+  getParent(): HTMLElement {
+    return this.container.parentElement!;
+  }
+}
+
+interface DepthLayer {
+  leafs: ElementItem[];
+  depth: number;
+}
+
+export function sortElementsByHtmlOrder(root: HTMLElement, elements: HTMLElement[]): HTMLElement[] {
+  const layers: DepthLayer[] = [];
+
+  const getDepth = (child: HTMLElement): number => {
+    let depth = 0;
+    let el = child;
+    while (el !== root) {
+      depth++;
+      el = el.parentElement!;
+    }
+    return depth;
+  };
+
+  const findOrCreateLayer = (depth: number): DepthLayer => {
+    if (!layers[depth]) {
+      layers[depth] = {leafs: [], depth};
+    }
+    return layers[depth];
+  };
+
+  for (const leaf of elements.map((el) => new ElementItem(el, [el]))) {
+    findOrCreateLayer(getDepth(leaf.container)).leafs.push(leaf);
+  }
+
+  while (layers.length > 1) {
+    const layer = layers.pop();
+    if (!layer) continue;
+
+    const parents = new Set<HTMLElement>(layer.leafs.map((leaf) => leaf.getParent()));
+
+    for (const parent of parents) {
+      const children = sortByHtmlOrder(
+        parent,
+        layer.leafs.filter((leaf) => leaf.getParent() === parent),
+      );
+
+      findOrCreateLayer(getDepth(parent)).leafs.push(
+        new ElementItem(
+          parent,
+          children.flatMap((leaf) => leaf.children),
+        ),
+      );
+    }
+  }
+
+  return layers.length === 1 ? layers[0].leafs.flatMap((leaf) => leaf.children) : [];
+}
+
+function sortByHtmlOrder(parent: HTMLElement, children: ElementItem[]): ElementItem[] {
+  return Array.from(parent.children)
+    .map((el) => children.find((item) => item.container === el))
+    .filter(Boolean) as ElementItem[];
+}

packages/twopoint5d-elements/vite.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+  },
+});