mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-23 07:50:15 +00:00
e333ad459e
## Summary Prerequisite for upcoming native color correction nodes (ColorCurves). Reusable curve editor with monotone cubic Hermite interpolation, drag-to-add/move/delete control points, and SVG-based rendering. Includes CurvePoint type, LUT generation utility, and useCurveEditor composable for interaction logic. ## Screenshots (if applicable) https://github.com/user-attachments/assets/948352c7-bdf2-40f9-a8f0-35bc2b2f3202 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8860-feat-add-CurveEditor-component-and-d3-shape-dependency-3076d73d3650817f8421f98e349569d0) by [Unito](https://www.unito.io)
104 lines
2.1 KiB
Vue
104 lines
2.1 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, useTemplateRef } from 'vue'
|
|
|
|
import { useCurveEditor } from '@/composables/useCurveEditor'
|
|
import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
|
|
|
|
import { histogramToPath } from './curveUtils'
|
|
|
|
const { curveColor = 'white', histogram } = defineProps<{
|
|
curveColor?: string
|
|
histogram?: Uint32Array | null
|
|
}>()
|
|
|
|
const modelValue = defineModel<CurvePoint[]>({
|
|
required: true
|
|
})
|
|
|
|
const svgRef = useTemplateRef<SVGSVGElement>('svgRef')
|
|
|
|
const { curvePath, handleSvgPointerDown, startDrag } = useCurveEditor({
|
|
svgRef,
|
|
modelValue
|
|
})
|
|
|
|
const histogramPath = computed(() =>
|
|
histogram ? histogramToPath(histogram) : ''
|
|
)
|
|
</script>
|