API de puntero del lienzo para widgets y cursores

​

Comportamiento predeterminado

• Arrastrar varios elementos seleccionados ya no requiere mantener presionada Shift. Hacer clic en un elemento mientras varios están seleccionados sigue deseleccionando los demás.
• Hacer clic en un enlace conectado de una entrada ya no lo desconecta y lo vuelve a conectar.
• Una pequeña cantidad de movimiento entre presionar y soltar el puntero sigue contando como un clic. Una vez que el puntero supera el límite de deriva del clic, la pulsación se convierte en un arrastre. El tiempo no afecta la decisión.
• Un doble clic requiere dos pulsaciones dentro del tiempo de doble clic, separadas como máximo por tres veces la deriva del clic. Solo una pulsación que asigne onDoubleClick puede completar un doble clic.

​

Seleccionar varios elementos

• Ctrl + arrastrar: inicia una selección múltiple
• Ctrl + Shift + arrastrar: agrega a la selección
• Ctrl + arrastrar, luego Shift: agrega a la selección
• Ctrl + arrastrar, luego Alt: elimina de la selección

​

Manejar la entrada de puntero en un widget

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 y onDoubleClick nunca se ejecutan en la misma pulsación que onDragStart, onDragEnd u onDragCancel. onDrag sí puede ejecutarse en una pulsación que termina como clic, porque también recibe el movimiento dentro del límite de deriva del clic.
• onDragStart se ejecuta una vez por arrastre, cuando el puntero supera por primera vez el límite de deriva del clic. Si el puntero se suelta más allá del límite antes de que se informe de algún evento de movimiento, onDragStart se ejecuta al soltar, onDragEnd se ejecuta justo después y onDrag no se ejecuta.
• Cuando una pulsación asigna onClick y onDoubleClick, al soltar la primera pulsación de un doble clic se ejecuta onClick. La segunda pulsación ejecuta onDoubleClick en lugar de onClick, así que haz que onClick sea seguro si se ejecuta primero. Además, el primer clic puede caer en un elemento cercano en lugar de tu widget, por lo que onDoubleClick puede ejecutarse sin que se haya ejecutado tu onClick.
• onDragEnd recibe el evento de subida del puntero de un arrastre. onDragCancel se ejecuta en su lugar cuando el arrastre se interrumpe, por ejemplo cuando se pierde la captura del puntero.
• finally se ejecuta una vez al terminar la pulsación. Asignar pointer.finally ejecuta de inmediato la devolución de llamada a la que reemplaza. Si onPointerDown no devuelve true, el lienzo asigna su propio finally, así que el tuyo se ejecuta durante la pulsación. Devuelve true cuando dependas de finally para limpiar.
• pointer.eDown, pointer.eMove y pointer.eUp dan a cada devolución de llamada acceso a toda la secuencia de eventos.
• Devuelve true para impedir que el lienzo maneje la pulsación por su cuenta.
• Elimina cualquier manejador widget.mouse heredado cuando añadas onPointerDown. Si onPointerDown devuelve true, el lienzo sigue rastreando el widget después de soltar y sigue llamando a widget.mouse en cada movimiento del puntero.

​

Controlar el cursor del lienzo

canvas.state.shouldSetCursor = false
canvas.canvas.style.cursor = 'pointer'