Fix typos (#404)

* Fix typos: Interupt -> Interrupt

* Fix typos: tempateManagerRow -> templateManagerRow

* Fix some typos

* Fix typos: Convertable -> Convertible

* Fix some typos

browser_tests/interaction.spec.ts

@@ -27,7 +27,7 @@ test.describe('Node Interaction', () => {
 
   test('Can disconnect/connect edge', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
-    // Close search menu poped up.
+    // Close search menu popped up.
     await comfyPage.page.keyboard.press('Escape')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(

src/extensions/core/nodeTemplates.ts

@@ -184,7 +184,7 @@ class ManageTemplates extends ComfyDialog {
               'div',
               {
                 dataset: { id: i.toString() },
-                className: 'tempateManagerRow',
+                className: 'templateManagerRow',
                 style: {
                   display: 'grid',
                   gridTemplateColumns: '1fr auto',
@@ -206,7 +206,7 @@ class ManageTemplates extends ComfyDialog {
 
                   // rearrange the elements
                   this.element
-                    .querySelectorAll('.tempateManagerRow')
+                    .querySelectorAll('.templateManagerRow')
                     .forEach((el: HTMLElement, i) => {
                       var prev_i = Number.parseInt(el.dataset.id)
 
@@ -329,7 +329,7 @@ class ManageTemplates extends ComfyDialog {
                       var that = this
                       setTimeout(function () {
                         that.element
-                          .querySelectorAll('.tempateManagerRow')
+                          .querySelectorAll('.templateManagerRow')
                           .forEach((el: HTMLElement, i) => {
                             el.dataset.id = i.toString()
                           })

src/extensions/core/rerouteNode.ts

@@ -256,7 +256,7 @@ app.registerExtension({
           {
             // naming is inverted with respect to LiteGraphNode.horizontal
             // LiteGraphNode.horizontal == true means that
-            // each slot in the inputs and outputs are layed out horizontally,
+            // each slot in the inputs and outputs are laid out horizontally,
             // which is the opposite of the visual orientation of the inputs and outputs as a node
             content:
               'Set ' + (this.properties.horizontal ? 'Horizontal' : 'Vertical'),

src/extensions/core/snapToGrid.ts

@@ -130,7 +130,7 @@ app.registerExtension({
 
       // LiteGraph will call group.move both on mouse-move as well as mouse-up though we only want
       // to snap on a mouse-up which we can determine by checking if `app.canvas.last_mouse_dragging`
-      // has been set to `false`. Essentially, this check here is the equivilant to calling an
+      // has been set to `false`. Essentially, this check here is the equivalent to calling an
       // `LGraphGroup.prototype.onNodeMoved` if it had existed.
       if (app.canvas.last_mouse_dragging === false && app.shiftDown) {
         // After moving a group (while app.shiftDown), snap all the child nodes and, finally,

src/extensions/core/widgetInputs.ts

@@ -384,7 +384,7 @@ function getConfig(widgetName) {
   )
 }
 
-function isConvertableWidget(widget, config) {
+function isConvertibleWidget(widget, config) {
   return (
     (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) &&
     !widget.options?.forceInput
@@ -485,7 +485,7 @@ function isValidCombo(combo, obj) {
     console.log(`connection rejected: tried to connect combo to ${obj}`)
     return false
   }
-  // New imput combo has a different size
+  // New input combo has a different size
   if (combo.length !== obj.length) {
     console.log(`connection rejected: combo lists dont match`)
     return false
@@ -670,14 +670,14 @@ app.registerExtension({
     })
   },
   async beforeRegisterNodeDef(nodeType, nodeData, app) {
-    // Add menu options to conver to/from widgets
+    // Add menu options to convert to/from widgets
     const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions
     nodeType.prototype.convertWidgetToInput = function (widget) {
       const config = getConfig.call(this, widget.name) ?? [
         widget.type,
         widget.options || {}
       ]
-      if (!isConvertableWidget(widget, config)) return false
+      if (!isConvertibleWidget(widget, config)) return false
       convertToInput(this, widget, config)
       return true
     }
@@ -703,7 +703,7 @@ app.registerExtension({
               w.type,
               w.options || {}
             ]
-            if (isConvertableWidget(w, config)) {
+            if (isConvertibleWidget(w, config)) {
               toInput.push({
                 content: `Convert ${w.name} to input`,
                 callback: () => convertToInput(this, w, config)

src/scripts/app.ts

@@ -1724,7 +1724,7 @@ export class ComfyApp {
 
       const r = onConfigure?.apply(this, arguments)
 
-      // Fire after onConfigure, used by primitves to generate widget using input nodes config
+      // Fire after onConfigure, used by primitives to generate widget using input nodes config
       // @ts-expect-error _nodes is private.
       for (const node of app.graph._nodes) {
         node.onAfterGraphConfigured?.()

src/scripts/ui/menu/index.ts

@@ -7,7 +7,7 @@ import { ComfyButtonGroup } from '../components/buttonGroup'
 import { ComfySplitButton } from '../components/splitButton'
 import { ComfyQueueButton } from './queueButton'
 import { ComfyWorkflowsMenu } from './workflows'
-import { getInteruptButton } from './interruptButton'
+import { getInterruptButton } from './interruptButton'
 import './menu.css'
 import type { ComfySettingsDialog } from '../settings'
 
@@ -126,7 +126,9 @@ export class ComfyAppMenu {
     // Keep the settings group as there are custom scripts attaching extra
     // elements to it.
     this.settingsGroup = new ComfyButtonGroup()
-    this.viewGroup = new ComfyButtonGroup(getInteruptButton('nlg-hide').element)
+    this.viewGroup = new ComfyButtonGroup(
+      getInterruptButton('nlg-hide').element
+    )
     this.mobileMenuButton = new ComfyButton({
       icon: 'menu',
       action: (_, btn) => {
@@ -148,7 +150,7 @@ export class ComfyAppMenu {
       collapseOnMobile(this.settingsGroup).element,
       collapseOnMobile(this.viewGroup).element,
 
-      getInteruptButton('lt-lg-show').element,
+      getInterruptButton('lt-lg-show').element,
       this.queueButton.element,
       showOnMobile(this.mobileMenuButton).element
     ])

src/scripts/ui/menu/interruptButton.ts

@@ -2,7 +2,7 @@ import { StatusWsMessageStatus } from '@/types/apiTypes'
 import { api } from '../../api'
 import { ComfyButton } from '../components/button'
 
-export function getInteruptButton(visibility: string) {
+export function getInterruptButton(visibility: string) {
   const btn = new ComfyButton({
     icon: 'close',
     tooltip: 'Cancel current generation',

src/types/comfy.d.ts

@@ -12,7 +12,7 @@ export interface ComfyExtension {
    */
   init?(app: ComfyApp): Promise<void>
   /**
-   * Allows any additonal setup, called after the application is fully set up and running
+   * Allows any additional setup, called after the application is fully set up and running
    * @param app The ComfyUI app instance
    */
   setup?(app: ComfyApp): Promise<void>

tests-ui/tests/groupNode.test.ts

@@ -950,7 +950,7 @@ describe('group node', () => {
     expect(group.outputs[0].connections.length).toBe(1)
     expect(group.outputs[0].connections[0].targetNode.id).toBe(preview2.id)
 
-    // Convert back and ensure bothe previews are still connected
+    // Convert back and ensure both previews are still connected
     group.menu['Convert to nodes'].call()
     decode = graph.find(decode)
     expect(decode.outputs[0].connections.length).toBe(2)