> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 위젯과 커서를 위한 캔버스 포인터 API

> onPointerDown으로 사용자 정의 캔버스 위젯의 클릭, 더블클릭, 드래그를 처리하고, ComfyUI 프런트엔드 확장에서 캔버스 커서를 제어하는 방법을 설명합니다.

캔버스는 포인터 입력을 `CanvasPointer`를 통해 라우팅합니다. `CanvasPointer`는 누름이 클릭, 더블 클릭 또는 드래그가 되는지를 결정하고, 해당 누름에 대해 할당한 콜백을 실행합니다. 캔버스에 그려진 위젯은 `onPointerDown`을 통해 이를 사용합니다.

## 기본 동작

* 선택된 항목이 여러 개일 때 더 이상 Shift를 누른 채 드래그할 필요가 없습니다. 여러 항목이 선택된 상태에서 하나를 클릭하면 나머지는 여전히 선택 해제됩니다.
* 입력에 연결된 링크를 클릭해도 더 이상 연결이 끊겼다가 다시 연결되지 않습니다.
* 포인터 다운과 포인터 업 사이의 약간의 움직임은 여전히 클릭으로 간주됩니다. 포인터가 클릭 드리프트 한도를 넘어 이동하면 해당 누름은 드래그가 됩니다. 시간은 이 판단에 영향을 주지 않습니다.
* 더블 클릭은 더블 클릭 시간 내에 두 번의 누름이 필요하며, 두 누름은 클릭 드리프트의 최대 세 배 이내로 떨어져 있어야 합니다. `onDoubleClick`을 할당하는 누름만이 더블 클릭을 완료할 수 있습니다.

사용자는 설정에서 클릭 드리프트와 더블 클릭 시간을 지정합니다
(`Comfy.Pointer.ClickDrift` 및 `Comfy.Pointer.DoubleClickTime`).

### 여러 항목 선택

* `Ctrl` + 드래그: 다중 선택 시작
* `Ctrl` + `Shift` + 드래그: 선택 항목에 추가
* `Ctrl` + 드래그 후 `Shift`: 선택 항목에 추가
* `Ctrl` + 드래그 후 `Alt`: 선택 항목에서 제거

## 위젯에서 포인터 입력 처리하기

위젯에 `onPointerDown`을 지정합니다. 이 함수는 포인터를 누를 때 실행되며 포인터, 노드, 캔버스를 인자로 받습니다. 필요한 콜백을 포인터에 지정하면 누름이 확정될 때 캔버스가 알맞은 콜백을 실행합니다.

```js theme={null}
widget.onPointerDown = function (pointer, node, canvas) {
  const e = pointer.eDown
  const offsetFromNode = [e.canvasX - node.pos[0], e.canvasY - node.pos[1]]

  pointer.onClick = (upEvent) => {
    console.log(pointer.eDown, pointer.eMove, pointer.eUp)
  }
  pointer.onDoubleClick = (upEvent) => this.customFunction(upEvent)

  pointer.onDragStart = () => {}
  pointer.onDrag = (moveEvent) => {}
  pointer.onDragEnd = (upEvent) => {}
  pointer.onDragCancel = () => {}

  pointer.finally = () => {}

  return true
}
```

* `onClick`과 `onDoubleClick`은 `onDragStart`, `onDragEnd`, `onDragCancel`과 같은 누름에서 실행되지 않습니다. `onDrag`는 클릭으로 끝나는 누름에서도 실행될 수 있습니다. 클릭 드리프트 범위 안의 이동도 전달받기 때문입니다.
* `onDragStart`는 드래그마다 한 번, 포인터가 처음으로 클릭 드리프트 범위를 넘어설 때 실행됩니다. 이동 이벤트가 보고되기 전에 포인터가 범위를 넘어선 상태로 놓이면 `onDragStart`는 놓는 시점에 실행되고 `onDragEnd`가 바로 이어서 실행되며 `onDrag`는 실행되지 않습니다.
* 한 번의 누름에 `onClick`과 `onDoubleClick`을 모두 지정한 경우, 더블클릭의 첫 번째 누름을 놓으면 `onClick`이 실행됩니다. 두 번째 누름에서는 `onClick` 대신 `onDoubleClick`이 실행되므로 `onClick`은 먼저 실행되어도 안전해야 합니다. 첫 번째 클릭이 위젯이 아닌 근처 항목에 떨어질 수도 있으므로 `onClick`이 실행되지 않은 채로 `onDoubleClick`이 실행될 수 있습니다.
* `onDragEnd`는 드래그의 포인터 업 이벤트를 받습니다. 드래그가 중단되면(예: 포인터 캡처 상실) 대신 `onDragCancel`이 실행됩니다.
* `finally`는 누름이 끝날 때 한 번 실행됩니다. `pointer.finally`를 지정하면 교체되는 콜백이 즉시 실행됩니다. `onPointerDown`이 `true`를 반환하지 않으면 캔버스가 자체 `finally`를 지정하므로, 지정한 콜백은 포인터를 누르는 동안 실행됩니다. 정리에 `finally`를 사용한다면 `true`를 반환하세요.
* `pointer.eDown`, `pointer.eMove`, `pointer.eUp`을 통해 모든 콜백이 이벤트 흐름 전체에 접근할 수 있습니다.
* 캔버스가 누름을 직접 처리하지 않게 하려면 `true`를 반환합니다.
* `onPointerDown`을 추가할 때는 기존 `widget.mouse` 핸들러를 제거하세요. `onPointerDown`이 `true`를 반환하면 캔버스는 놓은 뒤에도 위젯을 계속 추적하며 포인터가 이동할 때마다 `widget.mouse`를 계속 호출합니다.

캔버스가 더블클릭과 드래그를 대신 판정하므로 위젯이 개별 포인터 이벤트의 시간이나 거리를 측정할 필요가 없습니다. 사용자의 클릭 드리프트와 더블클릭 설정도 그대로 따릅니다.

## 캔버스 커서 제어

`canvas.state.hoveringOver`에는 포인터 아래에 있는 항목 유형(예: 노드, 그룹, 경유점, 링크)에 대한 비트 플래그가 저장됩니다. 캔버스가 커서 스타일을 설정하지 않도록 하려면 `canvas.state.shouldSetCursor`를 `false`로 설정한 다음, 직접 커서를 설정하세요:

```js theme={null}
canvas.state.shouldSetCursor = false
canvas.canvas.style.cursor = 'pointer'
```

노드 크기 조정을 시작하면 `shouldSetCursor`가 `false`인 상태에서도 여전히 크기 조정 커서가 설정됩니다. 크기 조정이 끝난 이후에 커서를 다시 설정하세요.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.