mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
e4f72beed1
Backport of #10118 to core/1.41.
Cherry-pick of 46d8567f10.
## Original PR
https://github.com/Comfy-Org/ComfyUI_frontend/pull/10118
## Summary
Change the CURVE widget value from CurvePoint[] to CurveData ({ points,
interpolation }) to support multiple interpolation types. Add a Select
dropdown in the widget UI for switching between Smooth (monotone cubic)
and Linear interpolation, with the SVG preview updating accordingly.
## Conflict Resolution
- CurveEditor.vue, WidgetCurve.vue, curveUtils.ts: Took main version
which merges both #9896 (disabled/upstream) and #10118 (interpolation)
features
- locales/en/main.json: Auto-merged cleanly
- package.json: Kept target branch version
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10167-backport-core-1-41-feat-add-linear-interpolation-type-to-CURVE-widget-3266d73d36508161be1cec0c5622634d)
by [Unito](https://www.unito.io)
111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
|
<svg
|
|
ref="svgRef"
|
|
viewBox="-0.04 -0.04 1.08 1.08"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
class="aspect-square w-full cursor-crosshair rounded-[5px] bg-node-component-surface"
|
|
@pointerdown.stop="handleSvgPointerDown"
|
|
@contextmenu.prevent.stop
|
|
>
|
|
<line
|
|
v-for="v in [0.25, 0.5, 0.75]"
|
|
:key="'h' + v"
|
|
:x1="0"
|
|
:y1="v"
|
|
:x2="1"
|
|
:y2="v"
|
|
stroke="currentColor"
|
|
stroke-opacity="0.1"
|
|
stroke-width="0.003"
|
|
/>
|
|
<line
|
|
v-for="v in [0.25, 0.5, 0.75]"
|
|
:key="'v' + v"
|
|
:x1="v"
|
|
:y1="0"
|
|
:x2="v"
|
|
:y2="1"
|
|
stroke="currentColor"
|
|
stroke-opacity="0.1"
|
|
stroke-width="0.003"
|
|
/>
|
|
|
|
<line
|
|
x1="0"
|
|
y1="1"
|
|
x2="1"
|
|
y2="0"
|
|
stroke="currentColor"
|
|
stroke-opacity="0.15"
|
|
stroke-width="0.003"
|
|
/>
|
|
|
|
<path
|
|
v-if="histogramPath"
|
|
data-testid="histogram-path"
|
|
:d="histogramPath"
|
|
:fill="curveColor"
|
|
fill-opacity="0.15"
|
|
stroke="none"
|
|
/>
|
|
|
|
<path
|
|
data-testid="curve-path"
|
|
:d="curvePath"
|
|
fill="none"
|
|
:stroke="curveColor"
|
|
stroke-width="0.008"
|
|
stroke-linecap="round"
|
|
/>
|
|
|
|
<circle
|
|
v-for="(point, i) in modelValue"
|
|
:key="i"
|
|
:cx="point[0]"
|
|
:cy="1 - point[1]"
|
|
r="0.02"
|
|
:fill="curveColor"
|
|
stroke="white"
|
|
stroke-width="0.004"
|
|
class="cursor-grab"
|
|
@pointerdown.stop="startDrag(i, $event)"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, toRef, useTemplateRef } from 'vue'
|
|
|
|
import { useCurveEditor } from '@/composables/useCurveEditor'
|
|
|
|
import type { CurveInterpolation, CurvePoint } from './types'
|
|
|
|
import { histogramToPath } from './curveUtils'
|
|
|
|
const {
|
|
curveColor = 'white',
|
|
histogram,
|
|
interpolation = 'monotone_cubic'
|
|
} = defineProps<{
|
|
curveColor?: string
|
|
histogram?: Uint32Array | null
|
|
interpolation?: CurveInterpolation
|
|
}>()
|
|
|
|
const modelValue = defineModel<CurvePoint[]>({
|
|
required: true
|
|
})
|
|
|
|
const svgRef = useTemplateRef<SVGSVGElement>('svgRef')
|
|
|
|
const { curvePath, handleSvgPointerDown, startDrag } = useCurveEditor({
|
|
svgRef,
|
|
modelValue,
|
|
interpolation: toRef(() => interpolation)
|
|
})
|
|
|
|
const histogramPath = computed(() =>
|
|
histogram ? histogramToPath(histogram) : ''
|
|
)
|
|
</script>
|