Revert "perf: draw simplified nodes on the canvas instead of the DOM"

This reverts commit 93f7e4d.

Drawing the simplified nodes through litegraph's own node pass means the
Vue renderer cannot render a zoomed-out graph without litegraph present,
which is the opposite of the direction this renderer is heading. Links
already have the right shape - a Vue-owned canvas element with the drawing
itself living renderer-side in CanvasPathRenderer - so the simplified node
pass should follow that pattern instead.

Author: benjcooley

src/components/graph/GraphCanvas.vue

@@ -72,15 +72,10 @@
     @pointermove.capture="forwardPointerMovePanEvent"
   >
     <!-- Vue nodes rendered based on graph nodes -->
-    <!--
-      Nothing is mounted while zoomed out past legibility: the canvas renderer
-      draws each node as a plain rectangle instead, which is what a node looks
-      like at that zoom anyway and costs no elements.
-    -->
-    <template v-if="!isLowQuality">
+    <template v-for="nodeData in allNodes" :key="nodeData.id">
+      <LGraphNodeLOD v-if="isLowQuality" :node-data="nodeData" />
       <LGraphNode
-        v-for="nodeData in allNodes"
-        :key="nodeData.id"
+        v-else
         :node-data="nodeData"
         :error="
           executionErrorStore.lastExecutionErrorNodeId === nodeData.id
@@ -192,6 +187,7 @@ import type { StartupOutcome } from '@/platform/workflow/persistence/base/draftT
 import { useFirstRunEntry } from '@/renderer/extensions/firstRunTour/gettingStarted/firstRunEntry'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import LGraphNodeLOD from '@/renderer/extensions/vueNodes/components/LGraphNodeLOD.vue'
 import { useLowQualityRendering } from '@/renderer/extensions/vueNodes/composables/useLowQualityRendering'
 import { requestSlotLayoutSyncForAllNodes } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
 import { UnauthorizedError } from '@/scripts/api'

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5670,10 +5670,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         node.arrange()
       }
       // Skip all node body/widget/title rendering. Vue overlay handles visuals.
-      // Except when zoomed out past the point of legibility: a node is then
-      // just a filled rectangle, which is far cheaper to draw here than to
-      // mount an element per node, so fall through and draw it as normal.
-      if (!this.low_quality) return
+      return
     }
 
     const color = node.renderingColor

src/renderer/extensions/vueNodes/components/LGraphNodeLOD.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
+
+const { nodeData } = defineProps<{ nodeData: VueNodeData }>()
+
+const { position, size } = useNodeLayout(() => nodeData.id)
+
+const style = computed(() => ({
+  transform: `translate(${position.value.x ?? 0}px, ${(position.value.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+  width: `${size.value.width ?? 0}px`,
+  height: `${(size.value.height ?? 0) + LiteGraph.NODE_TITLE_HEIGHT}px`,
+  backgroundColor: nodeData.bgcolor || undefined
+}))
+</script>
+
+<template>
+  <!--
+    Stand-in for a full node while zoomed too far out to read its text, matching
+    litegraph's own low-quality pass, which draws a plain filled rect and skips
+    text, badges and shadows. Deliberately childless and non-interactive: the
+    whole point is that one node costs one element instead of a component tree.
+  -->
+  <div
+    :data-node-id="nodeData.id"
+    data-node-lod
+    class="lg-node-lod pointer-events-none absolute bg-node-component-surface"
+    :style="style"
+  />
+</template>