diff --git a/src/composables/node/usePriceBadge.ts b/src/composables/node/usePriceBadge.ts index 6908f4591f..17ce3bc235 100644 --- a/src/composables/node/usePriceBadge.ts +++ b/src/composables/node/usePriceBadge.ts @@ -1,8 +1,10 @@ -import { computed, toValue } from 'vue' +import { createSharedComposable } from '@vueuse/core' +import { computed, ref, toValue } from 'vue' import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph' import { LGraphBadge } from '@/lib/litegraph/src/litegraph' +import { useChainCallback } from '@/composables/functional/useChainCallback' import { useNodePricing } from '@/composables/node/useNodePricing' import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces' import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput' @@ -149,8 +151,26 @@ export const usePriceBadge = () => { : '#8D6932' }) } - const creditsBadges = computed(() => - mapAllNodes(app.graph, (node) => { + return { + getCreditsBadge, + isCreditsBadge, + updateSubgraphCredits + } +} +export const useCreditsBadgesInGraph = createSharedComposable(() => { + const { isCreditsBadge } = usePriceBadge() + const nodeTrigger = ref(0) + app.graph.onNodeAdded = useChainCallback( + app.graph.onNodeAdded, + () => nodeTrigger.value++ + ) + app.graph.onNodeRemoved = useChainCallback( + app.graph.onNodeRemoved, + () => nodeTrigger.value++ + ) + return computed(() => { + void nodeTrigger.value + return mapAllNodes(app.graph, (node) => { if (node.isSubgraphNode()) return const priceBadge = node.badges.find(isCreditsBadge) @@ -159,11 +179,5 @@ export const usePriceBadge = () => { trackNodePrice(node) return [node.title, toValue(priceBadge).text, node.id] as const }) - ) - return { - creditsBadges, - getCreditsBadge, - isCreditsBadge, - updateSubgraphCredits - } -} + }) +}) diff --git a/src/platform/cloud/subscription/components/FreeTierQuota.vue b/src/platform/cloud/subscription/components/FreeTierQuota.vue index ea3a4a8c5c..81ce0eb1f3 100644 --- a/src/platform/cloud/subscription/components/FreeTierQuota.vue +++ b/src/platform/cloud/subscription/components/FreeTierQuota.vue @@ -3,7 +3,6 @@ import { computed } from 'vue' import { useI18n } from 'vue-i18n' import { cn } from '@comfyorg/tailwind-utils' -import { usePriceBadge } from '@/composables/node/usePriceBadge' import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota' const DOT_COLORS = [ @@ -13,8 +12,8 @@ const DOT_COLORS = [ ] const { t } = useI18n() -const { creditsBadges } = usePriceBadge() -const { available, maxAvailable, quotaEnabled } = useFreeTierQuota() +const { available, hasInvalidNodes, maxAvailable, quotaEnabled } = + useFreeTierQuota() const dotColor = computed(() => { const ratio = maxAvailable.value ? available.value / maxAvailable.value : 0 @@ -37,7 +36,7 @@ const label = computed(() => class="mt-2 w-full border-t border-border-subtle bg-comfy-menu-bg px-4 pt-2" >