Move DOMClippingEnabled to coreSettings.ts (#1516)

* Move DOMClippingEnabled to coreSettings.ts

* nit

src/scripts/app.ts

@@ -15,7 +15,6 @@ import {
   importA1111,
   getLatentMetadata
 } from './pnginfo'
-import { addDomClippingSetting } from './domWidget'
 import { createImageHost, calculateImageGrid } from './ui/imagePreview'
 import { DraggableList } from './ui/draggableList'
 import { applyTextReplacements, addStylesheet } from './utils'
@@ -1806,7 +1805,6 @@ export class ComfyApp {
     ])
     await this.#loadExtensions()
 
-    addDomClippingSetting()
     this.#addProcessMouseHandler()
     this.#addProcessKeyHandler()
     this.#addConfigureHandler()

src/scripts/domWidget.ts

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { useSettingStore } from '@/stores/settingStore'
 import { app, ANIM_PREVIEW_WIDGET } from './app'
 import { LGraphCanvas, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type { Vector4 } from '@comfyorg/litegraph'
@@ -248,21 +249,6 @@ LGraphCanvas.prototype.computeVisibleNodes = function (): LGraphNode[] {
   return visibleNodes
 }
 
-let enableDomClipping = true
-
-export function addDomClippingSetting(): void {
-  app.ui.settings.addSetting({
-    id: 'Comfy.DOMClippingEnabled',
-    category: ['Comfy', 'Node', 'DOMClippingEnabled'],
-    name: 'Enable DOM element clipping (enabling may reduce performance)',
-    type: 'boolean',
-    defaultValue: enableDomClipping,
-    onChange(value) {
-      enableDomClipping = !!value
-    }
-  })
-}
-
 LGraphNode.prototype.addDOMWidget = function (
   name: string,
   type: string,
@@ -353,7 +339,7 @@ LGraphNode.prototype.addDOMWidget = function (
         pointerEvents: app.canvas.read_only ? 'none' : 'auto'
       })
 
-      if (enableDomClipping) {
+      if (useSettingStore().get('Comfy.DOMClippingEnabled')) {
         element.style.clipPath = getClipPath(node, element, elRect)
         element.style.willChange = 'clip-path'
       }

src/stores/coreSettings.ts

@@ -514,5 +514,12 @@ export const CORE_SETTINGS: SettingParams[] = [
       { value: LinkMarkerShape.Arrow, text: 'Arrow' }
     ],
     versionAdded: '1.3.42'
+  },
+  {
+    id: 'Comfy.DOMClippingEnabled',
+    category: ['Comfy', 'Node', 'DOMClippingEnabled'],
+    name: 'Enable DOM element clipping (enabling may reduce performance)',
+    type: 'boolean',
+    defaultValue: true
   }
 ]