Made all properties in FeatureNode non-optional

src/components/Context.vue

@@ -24,11 +24,11 @@ const observerOptions = {
 provide(RegisterNodeInjectionKey, (id, element) => {
     const observer = new MutationObserver(() => updateNode(id));
     observer.observe(element, observerOptions);
-    nodes.value[id] = { element, observer };
+    nodes.value[id] = { element, observer, rect: element.getBoundingClientRect() };
     nextTick(() => updateNode(id));
 });
 provide(UnregisterNodeInjectionKey, id => {
-    nodes.value[id]?.observer?.disconnect();
+    nodes.value[id]?.observer.disconnect();
     nodes.value[id] = undefined;
 });
 provide(NodesInjectionKey, nodes);

src/features/links/Link.vue

@@ -26,8 +26,7 @@ const props = toRefs(_props);
 const startPosition = computed(() => {
     const rect = props.startNode.value.rect;
     const boundingRect = props.boundingRect.value;
-    const position =
+    const position = boundingRect
-        rect && boundingRect
         ? {
               x: rect.x + rect.width / 2 - boundingRect.x,
               y: rect.y + rect.height / 2 - boundingRect.y
@@ -43,8 +42,7 @@ const startPosition = computed(() => {
 const endPosition = computed(() => {
     const rect = props.endNode.value.rect;
     const boundingRect = props.boundingRect.value;
-    const position =
+    const position = boundingRect
-        rect && boundingRect
         ? {
               x: rect.x + rect.width / 2 - boundingRect.x,
               y: rect.y + rect.height / 2 - boundingRect.y

src/features/links/Links.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { Link } from "features/links/links";
-import { NodesInjectionKey } from "game/layers";
+import { FeatureNode, NodesInjectionKey } from "game/layers";
 import { computed, inject, nextTick, onMounted, ref, toRef } from "vue";
 import LinkVue from "./Link.vue";
 
@@ -43,9 +43,8 @@ function updateNodes() {
         isDirty = false;
         nextTick(() => {
             boundingRect.value = resizeListener.value?.getBoundingClientRect();
-            Object.values(nodes.value).forEach(
+            (Object.values(nodes.value) as FeatureNode[]).forEach(
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                node => (node.rect = node.element.getBoundingClientRect())
-                node => (node!.rect = node?.element.getBoundingClientRect())
             );
             isDirty = true;
         });

src/features/particles/Particles.vue

@@ -35,7 +35,7 @@ import { Emitters } from "tsparticles-plugin-emitters/Emitters";
 import { EmitterContainer } from "tsparticles-plugin-emitters/EmitterContainer";
 import { defineComponent, inject, nextTick, onMounted, PropType, ref } from "vue";
 import { ParticlesComponent } from "particles.vue3";
-import { NodesInjectionKey } from "game/layers";
+import { FeatureNode, NodesInjectionKey } from "game/layers";
 
 // TODO get typing support on the Particles component
 export default defineComponent({
@@ -93,9 +93,8 @@ export default defineComponent({
                 nextTick(() => {
                     if (resizeListener.value != null && props.onContainerResized) {
                         // TODO don't overlap with Links.vue
-                        Object.values(nodes.value).forEach(
+                        (Object.values(nodes.value) as FeatureNode[]).forEach(
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            node => (node.rect = node.element.getBoundingClientRect())
-                            node => (node!.rect = node?.element.getBoundingClientRect())
                         );
                         props.onContainerResized(resizeListener.value.getBoundingClientRect());
                     }

src/game/layers.tsx

@@ -22,8 +22,8 @@ import { persistent, PersistentRef } from "./persistence";
 import player from "./player";
 
 export interface FeatureNode {
-    rect?: DOMRect;
+    rect: DOMRect;
-    observer?: MutationObserver;
+    observer: MutationObserver;
     element: HTMLElement;
 }