fixes dynamically placed label bug with a MutationObserver (#1750)

Author: hamilton

web-common/src/components/data-graphic/actions/outline.ts

@@ -61,7 +61,13 @@ export function outline(
   const observer = new MutationObserver(() => {
     clonedElement.setAttribute("x", node.getAttribute("x"));
     clonedElement.setAttribute("y", node.getAttribute("y"));
-    clonedElement.setAttribute("text-anchor", node.getAttribute("text-anchor"));
+    if (node.getAttribute("text-anchor")) {
+      clonedElement.setAttribute(
+        "text-anchor",
+        node.getAttribute("text-anchor")
+      );
+    }
+
     if (node.getAttribute("dx")) {
       clonedElement.setAttribute("dx", node.getAttribute("dx"));
     }

web-common/src/components/data-graphic/guides/DynamicallyPlacedLabel.svelte

@@ -37,26 +37,36 @@
     elementHeight = bb.height;
     elementX = bb.x;
     elementY = bb.y;
-
     if (location === "right" && elementX + elementWidth > $config.plotRight) {
       xOffset.set(-elementWidth - buffer);
     } else {
       xOffset.set(buffer);
     }
   }
 
-  let observer;
+  let resize;
+  let mutation;
 
   onMount(() => {
-    observer = new ResizeObserver(() => {
+    // resize if element updates.
+    resize = new ResizeObserver(() => {
       if (element) update();
     });
-    observer.observe(element);
+    // reposition if element DOM parameters change.
+    mutation = new MutationObserver(() => {
+      update();
+    });
+    mutation.observe(element, {
+      attributes: true,
+      childList: true,
+    });
+    resize.observe(element);
     update();
   });
 
   onDestroy(() => {
-    observer.unobserve(element);
+    resize.unobserve(element);
+    mutation.disconnect();
   });
 
   $: trueX = rx || $xScale(x);