mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 15:10:06 +00:00
refactor: remove unused tooltip appendTo code (#5943)
## Summary Remove unused tooltip appendTo positioning code. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5943-refactor-remove-unused-tooltip-appendTo-code-2846d73d365081d99c00cd41e35eb496) by [Unito](https://www.unito.io) --------- Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com>
This commit is contained in:
@@ -27,9 +27,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
type ComponentPublicInstance,
|
||||
type Ref,
|
||||
computed,
|
||||
inject,
|
||||
onErrorCaptured,
|
||||
ref,
|
||||
watchEffect
|
||||
@@ -86,11 +84,8 @@ const labelClasses = computed(() =>
|
||||
const renderError = ref<string | null>(null)
|
||||
const { toastErrorHandler } = useErrorHandling()
|
||||
|
||||
const tooltipContainer =
|
||||
inject<Ref<HTMLElement | undefined>>('tooltipContainer')
|
||||
const { getInputSlotTooltip, createTooltipConfig } = useNodeTooltips(
|
||||
props.nodeType || '',
|
||||
tooltipContainer
|
||||
props.nodeType || ''
|
||||
)
|
||||
|
||||
const tooltipConfig = computed(() => {
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'
|
||||
import { computed, inject, onErrorCaptured, onMounted, ref } from 'vue'
|
||||
|
||||
import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
|
||||
import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
|
||||
@@ -371,5 +371,4 @@ const nodeMedia = computed(() => {
|
||||
})
|
||||
|
||||
const nodeContainerRef = ref()
|
||||
provide('tooltipContainer', nodeContainerRef)
|
||||
</script>
|
||||
|
||||
@@ -101,9 +101,6 @@ const createMountConfig = () => {
|
||||
updated: vi.fn(),
|
||||
unmounted: vi.fn()
|
||||
}
|
||||
},
|
||||
provide: {
|
||||
tooltipContainer: { value: document.createElement('div') }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
|
||||
import { computed, onErrorCaptured, ref, watch } from 'vue'
|
||||
|
||||
import IconButton from '@/components/button/IconButton.vue'
|
||||
import EditableText from '@/components/common/EditableText.vue'
|
||||
@@ -108,11 +108,8 @@ onErrorCaptured((error) => {
|
||||
// Editing state
|
||||
const isEditing = ref(false)
|
||||
|
||||
const tooltipContainer =
|
||||
inject<Ref<HTMLElement | undefined>>('tooltipContainer')
|
||||
const { getNodeDescription, createTooltipConfig } = useNodeTooltips(
|
||||
nodeData?.type || '',
|
||||
tooltipContainer
|
||||
nodeData?.type || ''
|
||||
)
|
||||
|
||||
const tooltipConfig = computed(() => {
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Ref, computed, inject, onErrorCaptured, ref } from 'vue'
|
||||
import { computed, onErrorCaptured, ref } from 'vue'
|
||||
|
||||
import type {
|
||||
SafeWidgetData,
|
||||
@@ -98,11 +98,8 @@ onErrorCaptured((error) => {
|
||||
})
|
||||
|
||||
const nodeType = computed(() => nodeData?.type || '')
|
||||
const tooltipContainer =
|
||||
inject<Ref<HTMLElement | undefined>>('tooltipContainer')
|
||||
const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(
|
||||
nodeType.value,
|
||||
tooltipContainer
|
||||
nodeType.value
|
||||
)
|
||||
|
||||
interface ProcessedWidget {
|
||||
|
||||
@@ -24,9 +24,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
type ComponentPublicInstance,
|
||||
type Ref,
|
||||
computed,
|
||||
inject,
|
||||
onErrorCaptured,
|
||||
ref,
|
||||
watchEffect
|
||||
@@ -60,11 +58,8 @@ const renderError = ref<string | null>(null)
|
||||
|
||||
const { toastErrorHandler } = useErrorHandling()
|
||||
|
||||
const tooltipContainer =
|
||||
inject<Ref<HTMLElement | undefined>>('tooltipContainer')
|
||||
const { getOutputSlotTooltip, createTooltipConfig } = useNodeTooltips(
|
||||
props.nodeType || '',
|
||||
tooltipContainer
|
||||
props.nodeType || ''
|
||||
)
|
||||
|
||||
const tooltipConfig = computed(() => {
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import type { TooltipDirectivePassThroughOptions } from 'primevue'
|
||||
import { type MaybeRef, type Ref, computed, ref, unref } from 'vue'
|
||||
import type {
|
||||
TooltipDirectivePassThroughOptions,
|
||||
TooltipPassThroughMethodOptions
|
||||
} from 'primevue/tooltip'
|
||||
import { type MaybeRef, computed, ref, unref } from 'vue'
|
||||
|
||||
import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
|
||||
import { st } from '@/i18n'
|
||||
@@ -77,10 +80,7 @@ function setupGlobalTooltipHiding() {
|
||||
* Composable for managing Vue node tooltips
|
||||
* Provides tooltip text for node headers, slots, and widgets
|
||||
*/
|
||||
export function useNodeTooltips(
|
||||
nodeType: MaybeRef<string>,
|
||||
containerRef?: Ref<HTMLElement | undefined>
|
||||
) {
|
||||
export function useNodeTooltips(nodeType: MaybeRef<string>) {
|
||||
const nodeDefStore = useNodeDefStore()
|
||||
const settingsStore = useSettingStore()
|
||||
|
||||
@@ -151,14 +151,7 @@ export function useNodeTooltips(
|
||||
const tooltipDelay = settingsStore.get('LiteGraph.Node.TooltipDelay')
|
||||
const tooltipText = text || ''
|
||||
|
||||
const config: {
|
||||
value: string
|
||||
showDelay: number
|
||||
hideDelay: number
|
||||
disabled: boolean
|
||||
appendTo?: HTMLElement
|
||||
pt?: TooltipDirectivePassThroughOptions
|
||||
} = {
|
||||
return {
|
||||
value: tooltipText,
|
||||
showDelay: tooltipDelay as number,
|
||||
hideDelay: 0, // Immediate hiding
|
||||
@@ -172,24 +165,16 @@ export function useNodeTooltips(
|
||||
class:
|
||||
'border-sand-100 bg-pure-white dark-theme:bg-charcoal-800 border dark-theme:border-slate-300 rounded-md px-4 py-2 text-charcoal-700 dark-theme:text-pure-white text-sm font-normal leading-tight max-w-75 shadow-none'
|
||||
},
|
||||
arrow: ({ context }) => ({
|
||||
arrow: ({ context }: TooltipPassThroughMethodOptions) => ({
|
||||
class: cn(
|
||||
context?.top && 'border-t-sand-100 dark-theme:border-t-slate-300',
|
||||
context?.bottom &&
|
||||
'border-b-sand-100 dark-theme:border-b-slate-300',
|
||||
context?.left && 'border-l-sand-100 dark-theme:border-l-slate-300',
|
||||
context?.right && 'border-r-sand-100 dark-theme:border-r-slate-300'
|
||||
context.top && 'border-t-sand-100 dark-theme:border-t-slate-300',
|
||||
context.bottom && 'border-b-sand-100 dark-theme:border-b-slate-300',
|
||||
context.left && 'border-l-sand-100 dark-theme:border-l-slate-300',
|
||||
context.right && 'border-r-sand-100 dark-theme:border-r-slate-300'
|
||||
)
|
||||
})
|
||||
}
|
||||
} as TooltipDirectivePassThroughOptions
|
||||
}
|
||||
|
||||
// If we have a container reference, append tooltips to it
|
||||
if (containerRef?.value) {
|
||||
config.appendTo = containerRef.value
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user