fix: DOM widget position offset after canvas moves (#4557)

src/composables/element/useAbsolutePosition.ts

@@ -1,8 +1,9 @@
 import type { Size, Vector2 } from '@comfyorg/litegraph'
-import { CSSProperties, ref } from 'vue'
+import { CSSProperties, ref, watch } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 export interface PositionConfig {
   /* The position of the element on litegraph canvas */
@@ -18,9 +19,18 @@ export function useAbsolutePosition(options: { useTransform?: boolean } = {}) {
 
   const canvasStore = useCanvasStore()
   const lgCanvas = canvasStore.getCanvas()
-  const { canvasPosToClientPos } = useCanvasPositionConversion(
-    lgCanvas.canvas,
-    lgCanvas
+  const { canvasPosToClientPos, update: updateCanvasPosition } =
+    useCanvasPositionConversion(lgCanvas.canvas, lgCanvas)
+
+  const settingStore = useSettingStore()
+  watch(
+    [
+      () => settingStore.get('Comfy.Sidebar.Location'),
+      () => settingStore.get('Comfy.Sidebar.Size'),
+      () => settingStore.get('Comfy.UseNewMenu')
+    ],
+    () => updateCanvasPosition(),
+    { flush: 'post' }
   )
 
   /**

src/composables/element/useCanvasPositionConversion.ts

@@ -11,7 +11,7 @@ export const useCanvasPositionConversion = (
   canvasElement: Parameters<typeof useElementBounding>[0],
   lgCanvas: LGraphCanvas
 ) => {
-  const { left, top } = useElementBounding(canvasElement)
+  const { left, top, update } = useElementBounding(canvasElement)
 
   const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
     const { offset, scale } = lgCanvas.ds
@@ -31,6 +31,7 @@ export const useCanvasPositionConversion = (
 
   return {
     clientPosToCanvasPos,
-    canvasPosToClientPos
+    canvasPosToClientPos,
+    update
   }
 }