Adds m-material element to MML

.gitignore

@@ -6,3 +6,5 @@ build/
 .vscode/
 coverage/
 .nx/
+
+e2e-tests/src/assets/**/*

e2e-tests/src/m-material-frame-test.html

@@ -0,0 +1,45 @@
+<m-light type="spotlight" intensity="2000" ry="45" rx="65" rz="-45" x="10" y="30" z="10"></m-light>
+<m-plane color="#262626" width="100" height="100" x="0" y="0" z="-5"></m-plane>
+
+<m-material id="shared-material" color="red"> </m-material>
+<m-cube id="3" y="5" x="1" material-id="shared-material">
+  <m-material color="orange" id="shared-material"> </m-material>
+</m-cube>
+
+<m-material id="shared-material" color="green"> </m-material>
+<m-group></m-group>
+
+<m-frame
+  sx=".55"
+  sy=".55"
+  sz=".55"
+  z="-2"
+  y="-2"
+  src="ws://localhost:7079/m-material-test.html"
+></m-frame>
+
+<m-group></m-group>
+
+<m-frame
+  x="0"
+  sx=".55"
+  sy=".55"
+  sz=".55"
+  y="5"
+  src="ws://localhost:7079/m-material-priority-test.html"
+></m-frame>
+
+<m-group x="-1" y="5">
+  <m-label id="removeMaterial" x="1" content="remove next material" y="2"></m-label>
+  <m-cube id="0" color="gray" material-id="shared-material"> </m-cube>
+</m-group>
+
+<script>
+  const sharedMaterials = [...document.querySelectorAll("#shared-material")];
+  const cubes = [...document.querySelectorAll("m-cube")];
+  const removeMaterialButton = document.getElementById("removeMaterial");
+  removeMaterialButton.addEventListener("click", () => {
+    const material = document.querySelector("#shared-material");
+    material?.remove();
+  });
+</script>

e2e-tests/src/m-material-primitives-test.html

@@ -0,0 +1,39 @@
+<m-light type="spotlight" intensity="900" ry="45" rx="65" rz="-45" x="17.5" y="15" z="10"></m-light>
+
+<m-group id="primitives" data-loaded-materials="0">
+  <m-cube y="2" x="0" ry="45" width="2" height="2" depth="2">
+    <m-material
+      map="http://localhost:7079/assets/test-image.jpg"
+    ></m-material>
+  </m-cube>
+
+  <m-cylinder y="2" x="-4" ry="45" radius="1" height="2">
+    <m-material
+      map="http://localhost:7079/assets/test-image.jpg"
+    ></m-material>
+  </m-cylinder>
+
+  <m-plane width="20" height="20" rx="-90">
+    <m-material
+      map="http://localhost:7079/assets/test-image.jpg"
+    ></m-material>
+  </m-plane>
+
+  <m-sphere radius="1" y="2" x="4">
+    <m-material
+      map="http://localhost:7079/assets/test-image.jpg"
+    ></m-material>
+  </m-sphere>
+</m-group>
+
+<script>
+  let materialsLoaded = 0;
+  const elements = [...document.querySelectorAll("#primitives > *")];
+  elements.forEach((element) => {
+    const material = element.querySelector("m-material");
+    material.addEventListener("materialLoaded", () => {
+      materialsLoaded++;
+      document.querySelector("m-group").setAttribute("data-loaded-materials", materialsLoaded);
+    });
+  });
+</script>

e2e-tests/src/m-material-priority-test.html

@@ -0,0 +1,249 @@
+<m-light type="spotlight" intensity="1200" ry="90" rx="90" rz="-45" x="0" y="35" z="10"></m-light>
+
+<m-group id="ui" y="10">
+  <m-label
+    id="Test1"
+    x="-6"
+    y="0"
+    z="0"
+    content="Run Test 1 (Red, Green, Blue)"
+    width="2"
+    alignment="center"
+    onclick="Test1()"
+  ></m-label>
+  <m-label
+    id="Test2"
+    x="-3"
+    y="0"
+    z="0"
+    content="Run Test 2 (Red, Red, Blue)"
+    width="2"
+    alignment="center"
+    onclick="Test2()"
+  ></m-label>
+  <m-label
+    id="Test3"
+    x="0"
+    y="0"
+    z="0"
+    content="Run Test 3 (Blue, Red, Red)"
+    width="2"
+    alignment="center"
+    onclick="Test3()"
+  ></m-label>
+  <m-label
+    id="Test4"
+    x="3"
+    y="0"
+    z="0"
+    content="Run Test 4 (Blue, Green, Red)"
+    width="2"
+    alignment="center"
+    onclick="Test4()"
+  ></m-label>
+  <m-label id="stepLabel" x="0" y="1.5" content="-1" alignment="center"> </m-label>
+  <m-label
+    id="Test5"
+    x="6"
+    y="0"
+    z="0"
+    content="Run Test 5 (Red, Green, Blue)"
+    width="2"
+    alignment="center"
+    onclick="Test5()"
+  ></m-label>
+</m-group>
+
+<m-group id="container" data-test-step="-1"> </m-group>
+
+<script>
+  const stepLabel = document.getElementById("stepLabel");
+  const container = document.getElementById("container");
+
+  function createMaterial(color, opacity, map) {
+    const material = document.createElement("m-material");
+    material.setAttribute("color", color);
+    material.setAttribute("opacity", opacity);
+    material.setAttribute("map", map);
+    material.setAttribute("id", "my-material-" + color);
+    return material;
+  }
+
+  function createCube(x, y, z) {
+    const cube = document.createElement("m-cube");
+    cube.setAttribute("x", x);
+    cube.setAttribute("y", y);
+    cube.setAttribute("z", z);
+    cube.setAttribute("color", "blue");
+    return cube;
+  }
+
+  /**
+   * Test 1: Specify both material id and child material. Remove child material first then
+   * remove material id.
+   * Order should be red -> green -> blue
+   **/
+  async function Test1() {
+    const cube = createCube(0, 6, 0);
+    const childMaterial = createMaterial("red", 1.0, "http://localhost:7079/assets/test-image.jpg");
+    cube.setAttribute("material-id", "shared-material");
+    cube.appendChild(childMaterial);
+    createSharedMaterial();
+
+    container.appendChild(cube);
+    updateDataStep(0);
+
+    setTimeout(() => {
+      cube.removeChild(childMaterial);
+      updateDataStep(1);
+    }, 1000);
+
+    setTimeout(() => {
+      cube.setAttribute("material-id", "");
+      updateDataStep(2);
+    }, 2000);
+
+    setTimeout(() => {
+      cleanup();
+    }, 2500);
+  }
+
+  /**
+   * Test 2: Specify both material id and child material. Remove material id first then
+   * remove child material.
+   * Order should be red -> red -> blue
+   **/
+  async function Test2() {
+    const cube = createCube(0, 6, 0);
+    const childMaterial = createMaterial("red", 1.0, "http://localhost:7079/assets/test-image.jpg");
+    cube.setAttribute("material-id", "shared-material");
+    cube.appendChild(childMaterial);
+    createSharedMaterial();
+
+    container.appendChild(cube); // should be red
+    updateDataStep(0);
+
+    setTimeout(() => {
+      cube.setAttribute("material-id", ""); // should be red
+      updateDataStep(1);
+    }, 1000);
+
+    setTimeout(() => {
+      cube.removeChild(childMaterial); // should be blue
+      updateDataStep(2);
+    }, 2000);
+
+    setTimeout(() => {
+      cleanup();
+    }, 2500);
+  }
+
+  /**
+   * Test 3: Add child material then add material id
+   * Order should be blue -> red -> red
+   **/
+  async function Test3() {
+    const cube = createCube(0, 6, 0);
+    const childMaterial = createMaterial("red", 1.0, "http://localhost:7079/assets/test-image.jpg");
+    createSharedMaterial();
+
+    container.appendChild(cube);
+    updateDataStep(0);
+
+    setTimeout(() => {
+      cube.appendChild(childMaterial);
+      updateDataStep(1);
+    }, 1000);
+
+    setTimeout(() => {
+      cube.setAttribute("material-id", "shared-material");
+      updateDataStep(2);
+    }, 2000);
+
+    setTimeout(() => {
+      cleanup();
+    }, 2500);
+  }
+
+  /**
+   * Test 4: Add material id then add child material
+   * Order should be blue -> green -> red
+   */
+  async function Test4() {
+    cleanup();
+    const cube = createCube(0, 6, 0);
+    const childMaterial = createMaterial("red", 1.0, "http://localhost:7079/assets/test-image.jpg");
+    createSharedMaterial();
+
+    container.appendChild(cube);
+    updateDataStep(0);
+
+    setTimeout(() => {
+      cube.setAttribute("material-id", "shared-material");
+      updateDataStep(1);
+    }, 1000);
+
+    setTimeout(() => {
+      cube.appendChild(childMaterial);
+      updateDataStep(2);
+    }, 2000);
+
+    setTimeout(() => {
+      cleanup();
+    }, 2500);
+  }
+
+  /**
+   * Test 5: Test duplicate material id
+   * Order should be red -> green -> blue
+   */
+  async function Test5() {
+    cleanup();
+    const cube = createCube(0, 6, 0);
+    const shared1 = createSharedMaterial("shared-material", "red", 1.0);
+    const shared2 = createSharedMaterial("shared-material", "green", 1.0, "");
+    const shared3 = createSharedMaterial("shared-material", "blue", 1.0, "");
+
+    cube.setAttribute("material-id", "shared-material");
+    container.appendChild(cube);
+    updateDataStep(0);
+
+    setTimeout(() => {
+      container.removeChild(shared1);
+      updateDataStep(1);
+    }, 1000);
+
+    setTimeout(() => {
+      container.removeChild(shared2);
+      updateDataStep(2);
+    }, 2000);
+
+    setTimeout(() => {
+      cleanup();
+    }, 2500);
+  }
+
+  function createSharedMaterial(
+    id = "shared-material",
+    color = "green",
+    opacity = 1.0,
+    map = "http://localhost:7079/assets/test-image.jpg",
+  ) {
+    const sharedMaterial = createMaterial(color, opacity, map);
+    sharedMaterial.setAttribute("id", id);
+    container.appendChild(sharedMaterial);
+    return sharedMaterial;
+  }
+
+  function cleanup() {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    updateDataStep(-1);
+  }
+
+  function updateDataStep(step) {
+    container.setAttribute("data-test-step", step);
+    stepLabel.setAttribute("content", step);
+  }
+</script>