Merge branch 'main' into fix-ogg-syntax-9256

Author: xeinherjer-dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.9",
+  "version": "1.41.10",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

src/components/builder/BuilderMenu.vue

@@ -32,7 +32,7 @@
         @click="onSave(close)"
       >
         <i class="icon-[lucide--save] size-4" />
-        {{ t('builderMenu.saveApp') }}
+        {{ t('g.save') }}
       </button>
       <div class="my-1 border-t border-border-default" />
       <button

src/components/common/BackgroundImageUpload.vue

@@ -40,6 +40,7 @@ import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 
@@ -88,6 +89,7 @@ const handleFileUpload = async (event: Event) => {
           type: 'input',
           subfolder: 'backgrounds'
         })
+        appendCloudResParam(params, file.name)
         modelValue.value = `/api/view?${params.toString()}`
       }
     } catch (error) {

src/components/common/WorkflowActionsList.test.ts

@@ -70,6 +70,24 @@ describe('WorkflowActionsList', () => {
     expect(wrapper.text()).toContain('NEW')
   })
 
+  it('does not render items with visible set to false', () => {
+    const items: WorkflowMenuItem[] = [
+      {
+        id: 'hidden',
+        label: 'Hidden Item',
+        icon: 'pi pi-eye-slash',
+        command: vi.fn(),
+        visible: false
+      },
+      { id: 'shown', label: 'Shown Item', icon: 'pi pi-eye', command: vi.fn() }
+    ]
+
+    const wrapper = createWrapper(items)
+
+    expect(wrapper.text()).not.toContain('Hidden Item')
+    expect(wrapper.text()).toContain('Shown Item')
+  })
+
   it('does not render badge when absent', () => {
     const items: WorkflowMenuAction[] = [
       { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }

src/components/common/WorkflowActionsList.vue

@@ -26,7 +26,7 @@ const {
     />
     <component
       :is="itemComponent"
-      v-else
+      v-else-if="item.visible !== false"
       :disabled="item.disabled"
       :class="
         cn(

src/components/painter/WidgetPainter.vue

@@ -28,8 +28,9 @@
         />
         <div
           v-show="cursorVisible"
-          class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)]"
-          :style="cursorStyle"
+          ref="cursorEl"
+          class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)] will-change-transform"
+          :style="cursorSizeStyle"
         />
       </div>
     </div>
@@ -141,7 +142,7 @@
               max="100"
               step="1"
               class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
-              @click.prevent
+              @click.stop
               @change="
                 (e) => {
                   const val = Math.min(
@@ -281,6 +282,7 @@ const { nodeId } = defineProps<{
 const modelValue = defineModel<string>({ default: '' })
 
 const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
+const cursorEl = useTemplateRef<HTMLElement>('cursorEl')
 const controlsEl = useTemplateRef<HTMLDivElement>('controlsEl')
 const { width: controlsWidth } = useElementSize(controlsEl)
 const compact = computed(
@@ -296,8 +298,6 @@ const {
   backgroundColor,
   canvasWidth,
   canvasHeight,
-  cursorX,
-  cursorY,
   cursorVisible,
   displayBrushSize,
   inputImageUrl,
@@ -309,7 +309,7 @@ const {
   handlePointerLeave,
   handleInputImageLoad,
   handleClear
-} = usePainter(nodeId, { canvasEl, modelValue })
+} = usePainter(nodeId, { canvasEl, cursorEl, modelValue })
 
 const canvasContainerStyle = computed(() => ({
   aspectRatio: `${canvasWidth.value} / ${canvasHeight.value}`,
@@ -318,16 +318,10 @@ const canvasContainerStyle = computed(() => ({
     : backgroundColor.value
 }))
 
-const cursorStyle = computed(() => {
-  const size = displayBrushSize.value
-  const x = cursorX.value - size / 2
-  const y = cursorY.value - size / 2
-  return {
-    width: `${size}px`,
-    height: `${size}px`,
-    transform: `translate(${x}px, ${y}px)`
-  }
-})
+const cursorSizeStyle = computed(() => ({
+  width: `${displayBrushSize.value}px`,
+  height: `${displayBrushSize.value}px`
+}))
 
 const brushOpacityPercent = computed({
   get: () => Math.round(brushOpacity.value * 100),

src/components/ui/TypeformPopoverButton.vue

@@ -5,8 +5,9 @@ import { useTemplateRef } from 'vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 
-defineProps<{
+const { active = true } = defineProps<{
   dataTfWidget: string
+  active?: boolean
 }>()
 
 const feedbackRef = useTemplateRef('feedbackRef')
@@ -40,6 +41,6 @@ whenever(feedbackRef, () => {
         <i class="icon-[lucide--circle-help] size-4" />
       </Button>
     </template>
-    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+    <div v-if="active" ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
   </Popover>
 </template>

src/composables/painter/usePainter.ts

@@ -27,11 +27,12 @@ export const PAINTER_TOOLS: Record<string, PainterTool> = {
 
 interface UsePainterOptions {
   canvasEl: Ref<HTMLCanvasElement | null>
+  cursorEl: Ref<HTMLElement | null>
   modelValue: Ref<string>
 }
 
 export function usePainter(nodeId: string, options: UsePainterOptions) {
-  const { canvasEl, modelValue } = options
+  const { canvasEl, cursorEl, modelValue } = options
   const { t } = useI18n()
   const nodeOutputStore = useNodeOutputStore()
   const toastStore = useToastStore()
@@ -41,8 +42,6 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
   const canvasWidth = ref(512)
   const canvasHeight = ref(512)
 
-  const cursorX = ref(0)
-  const cursorY = ref(0)
   const cursorVisible = ref(false)
 
   const inputImageUrl = ref<string | null>(null)
@@ -518,8 +517,10 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
   }
 
   function updateCursorPos(e: PointerEvent) {
-    cursorX.value = e.offsetX
-    cursorY.value = e.offsetY
+    const el = cursorEl.value
+    if (!el) return
+    const size = displayBrushSize.value
+    el.style.transform = `translate(${e.offsetX - size / 2}px, ${e.offsetY - size / 2}px)`
   }
 
   function handlePointerDown(e: PointerEvent) {
@@ -760,8 +761,6 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
     canvasWidth,
     canvasHeight,
 
-    cursorX,
-    cursorY,
     cursorVisible,
     displayBrushSize,
 

src/composables/useNewMenuItemIndicator.test.ts

@@ -98,6 +98,80 @@ describe('useNewMenuItemIndicator', () => {
     )
   })
 
+  it('does not count hidden items as unseen', () => {
+    const items: WorkflowMenuItem[] = [
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { hasUnseenItems } = useNewMenuItemIndicator(() => items)
+
+    expect(hasUnseenItems.value).toBe(false)
+  })
+
+  it('markAsSeen does not include never-seen hidden items', () => {
+    const items: WorkflowMenuItem[] = [
+      ...createItems('feature-a'),
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).toHaveBeenCalledWith(
+      'Comfy.WorkflowActions.SeenItems',
+      ['feature-a']
+    )
+  })
+
+  it('markAsSeen retains previously-seen hidden items', () => {
+    mockSettingStore.get.mockReturnValue(['hidden-feature'])
+    const items: WorkflowMenuItem[] = [
+      ...createItems('feature-a'),
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).toHaveBeenCalledWith(
+      'Comfy.WorkflowActions.SeenItems',
+      ['feature-a', 'hidden-feature']
+    )
+  })
+
+  it('markAsSeen skips write when stored list already matches', () => {
+    mockSettingStore.get.mockReturnValue(['feature-a', 'feature-b'])
+    const items = createItems('feature-a', 'feature-b')
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).not.toHaveBeenCalled()
+  })
+
   it('markAsSeen does nothing when there are no new items', () => {
     const items: WorkflowMenuItem[] = [
       { id: 'regular', label: 'Regular', icon: 'pi pi-test', command: vi.fn() }

src/composables/useNewMenuItemIndicator.ts

@@ -7,34 +7,47 @@ import type {
   WorkflowMenuItem
 } from '@/types/workflowMenuItem'
 
-function getNewItemIds(items: WorkflowMenuItem[]): string[] {
+function getNewActions(items: WorkflowMenuItem[]): WorkflowMenuAction[] {
   return items
     .filter((i): i is WorkflowMenuAction => !('separator' in i && i.separator))
     .filter((i) => i.isNew)
-    .map((i) => i.id)
 }
 
 export function useNewMenuItemIndicator(
   menuItems: MaybeRefOrGetter<WorkflowMenuItem[]>
 ) {
   const settingStore = useSettingStore()
 
-  const newItemIds = computed(() => getNewItemIds(toValue(menuItems)))
+  const newActions = computed(() => getNewActions(toValue(menuItems)))
 
   const seenItems = computed<string[]>(
     () => settingStore.get('Comfy.WorkflowActions.SeenItems') ?? []
   )
 
   const hasUnseenItems = computed(() => {
     const seen = new Set(seenItems.value)
-    return newItemIds.value.some((id) => !seen.has(id))
+    return newActions.value
+      .filter((i) => i.visible !== false)
+      .some((i) => !seen.has(i.id))
   })
 
   function markAsSeen() {
-    if (!newItemIds.value.length) return
-    void settingStore.set('Comfy.WorkflowActions.SeenItems', [
-      ...newItemIds.value
-    ])
+    const actions = newActions.value
+    if (!actions.length) return
+
+    const seen = new Set(seenItems.value)
+    const visibleIds = actions
+      .filter((i) => i.visible !== false)
+      .map((i) => i.id)
+    const retainedIds = actions
+      .filter((i) => i.visible === false && seen.has(i.id))
+      .map((i) => i.id)
+
+    const nextSeen = [...visibleIds, ...retainedIds]
+    if (nextSeen.length === seen.size && nextSeen.every((id) => seen.has(id)))
+      return
+
+    void settingStore.set('Comfy.WorkflowActions.SeenItems', nextSeen)
   }
 
   return { hasUnseenItems, markAsSeen }