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

​

기본 동작

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

​

여러 항목 선택

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

​

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

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.shouldSetCursor = false
canvas.canvas.style.cursor = 'pointer'