From 4b1f67f0be9c0bb411a10a8312689171509e48b2 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Sun, 22 Dec 2024 22:15:13 -0800
Subject: [PATCH 1/2] mvp barely working

run like this:
document.querySelector('[managed-street]').components['managed-street'].deleteSegmentByIndex(10)
---
 src/components/managed-street.js | 52 ++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/managed-street.js b/src/components/managed-street.js
index d70cdabc..20c812b1 100644
--- a/src/components/managed-street.js
+++ b/src/components/managed-street.js
@@ -60,6 +60,55 @@ AFRAME.registerComponent('managed-street', {
     this.pendingEntities = [];
     // Bind the method to preserve context
     this.refreshFromSource = this.refreshFromSource.bind(this);
+
+    // Set up mutation observer to watch for removed segments
+    this.setupMutationObserver();
+  },
+  // Add new method to managed-street component
+  setupMutationObserver: function () {
+    console.log('Setting up mutation observer');
+    // Create mutation observer
+    this.observer = new MutationObserver((mutations) => {
+      let needsReflow = false;
+
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+          console.log('Child list mutation detected');
+          // Check if any of the removed nodes were street segments
+          mutation.removedNodes.forEach((node) => {
+            if (node.hasAttribute && node.hasAttribute('street-segment')) {
+              needsReflow = true;
+            }
+          });
+        }
+      });
+
+      // If segments were removed, trigger reflow
+      if (needsReflow) {
+        console.log('Reflowing due to child list mutation');
+        this.refreshManagedEntities();
+        this.applyJustification();
+        this.createOrUpdateJustifiedDirtBox();
+      }
+    });
+
+    // Start observing the managed-street element
+    this.observer.observe(this.el, {
+      childList: true,
+      subtree: false
+    });
+  },
+  // Optional: Add helper method to managed-street to delete segments
+  deleteSegmentByIndex: function (index) {
+    this.refreshManagedEntities();
+    if (index >= 0 && index < this.managedEntities.length) {
+      const segment = this.managedEntities[index];
+      segment.remove();
+      // Directly trigger reflow after removal
+      this.refreshManagedEntities();
+      this.applyJustification();
+      this.createOrUpdateJustifiedDirtBox();
+    }
   },
   update: function (oldData) {
     const data = this.data;
@@ -286,6 +335,9 @@ AFRAME.registerComponent('managed-street', {
     }
   },
   remove: function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     this.managedEntities.forEach(
       (entity) => entity.parentNode && entity.remove()
     );

From dd8a49a04ce0f703e3564390cc723cf02a9d3942 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 23 Dec 2024 15:27:20 -0800
Subject: [PATCH 2/2] setup mutation observer in refreshManagedEntities()

---
 src/components/managed-street.js | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/components/managed-street.js b/src/components/managed-street.js
index 20c812b1..5cc95feb 100644
--- a/src/components/managed-street.js
+++ b/src/components/managed-street.js
@@ -60,20 +60,17 @@ AFRAME.registerComponent('managed-street', {
     this.pendingEntities = [];
     // Bind the method to preserve context
     this.refreshFromSource = this.refreshFromSource.bind(this);
-
-    // Set up mutation observer to watch for removed segments
-    this.setupMutationObserver();
   },
-  // Add new method to managed-street component
   setupMutationObserver: function () {
-    console.log('Setting up mutation observer');
     // Create mutation observer
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     this.observer = new MutationObserver((mutations) => {
       let needsReflow = false;
 
       mutations.forEach((mutation) => {
         if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
-          console.log('Child list mutation detected');
           // Check if any of the removed nodes were street segments
           mutation.removedNodes.forEach((node) => {
             if (node.hasAttribute && node.hasAttribute('street-segment')) {
@@ -85,7 +82,6 @@ AFRAME.registerComponent('managed-street', {
 
       // If segments were removed, trigger reflow
       if (needsReflow) {
-        console.log('Reflowing due to child list mutation');
         this.refreshManagedEntities();
         this.applyJustification();
         this.createOrUpdateJustifiedDirtBox();
@@ -94,22 +90,9 @@ AFRAME.registerComponent('managed-street', {
 
     // Start observing the managed-street element
     this.observer.observe(this.el, {
-      childList: true,
-      subtree: false
+      childList: true // watch for child additions/removals
     });
   },
-  // Optional: Add helper method to managed-street to delete segments
-  deleteSegmentByIndex: function (index) {
-    this.refreshManagedEntities();
-    if (index >= 0 && index < this.managedEntities.length) {
-      const segment = this.managedEntities[index];
-      segment.remove();
-      // Directly trigger reflow after removal
-      this.refreshManagedEntities();
-      this.applyJustification();
-      this.createOrUpdateJustifiedDirtBox();
-    }
-  },
   update: function (oldData) {
     const data = this.data;
     const dataDiff = AFRAME.utils.diff(oldData, data);
@@ -203,6 +186,7 @@ AFRAME.registerComponent('managed-street', {
     this.managedEntities = Array.from(
       this.el.querySelectorAll('[street-segment]')
     );
+    this.setupMutationObserver();
   },
   createOrUpdateJustifiedDirtBox: function () {
     const data = this.data;