Merge pull request #54 from equinor/fix/48/revert_reuse_fix_query_selector

fix(48): Revert trying to reuse annotations root, but leave fix for q…

Author: tomktjemsland

src/components/Annotations/Annotations.tsx

@@ -111,18 +111,14 @@ export const Annotations = ({ maxVisible = 100, children }: AnnotationsProviderP
 
     if (!parent) throw Error('Unable to create root!')
 
-    let container: HTMLElement | null = parent.querySelector(`#${id}`)
-
-    if (!container) {
-      container = document.createElement('div')
-      container.setAttribute('id', id)
-      container.setAttribute('style', 'position:absolute;top:0;left:0;z-index: 1;pointer-events:none;padding:0;width:100%;height:100%;user-select:none')
-      parent.appendChild(container)
-    }
-
-    const annotationsRoot = createRoot(container)
-
-    return annotationsRoot
+    parent.querySelector(`#${id}`)?.remove() // remove any existing annotations container
+  
+    const container = document.createElement('div')
+    container.setAttribute('id', id)
+    container.setAttribute('style', 'position:absolute;top:0;left:0;z-index: 1;pointer-events:none;padding:0;width:100%;height:100%;user-select:none')
+    parent.appendChild(container)
+
+    return createRoot(container)
   }, [renderer])
 
   useEffect(() => {
@@ -134,7 +130,6 @@ export const Annotations = ({ maxVisible = 100, children }: AnnotationsProviderP
   }, [root, dispose])
 
 
-
   useFrame(({ gl, camera, scene, clock, pointer }) => {
     // take over the render loop so we can ensure we render on top of the last frame
     gl.getSize(size)