Pointeur

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

pointer(input: PointerInput): Promise<void>

L'API pointer permet de simuler des interactions avec des dispositifs de pointage. Elle accepte une action unique ou un tableau d'actions.

type PointerInput = PointerActionInput | Array<PointerActionInput>

Notre public principal teste via jest dans un environnement jsdom et il n'y a pas de layout dans jsdom. Contrairement à votre navigateur, les éléments n'ont pas de position, couche ou taille spécifique.
Nous ne tentons pas de déterminer si l'action décrite est réalisable à cette position dans votre layout.

Action de pointeur

Il existe deux types d'actions : presser et déplacer.

Appuyer sur un bouton ou toucher l'écran

Une action de pointeur est considérée comme une pression si elle définit une touche à enfoncer, à relâcher, ou les deux.

pointer({keys: '[MouseLeft]'})

Vous pouvez déclarer plusieurs pressions (à la même position) simultanément, qui seront résolues en actions multiples en interne. Si aucune autre propriété n'est nécessaire, vous pouvez simplement fournir la chaîne keys.

pointer({keys: '[MouseLeft][MouseRight]'})
// or
pointer('[MouseLeft][MouseRight]')

Pour enfoncer un bouton sans le relâcher, suffixez son nom avec >.
Pour simplement relâcher un bouton précédemment enfoncé, faites précéder l'étiquette de /.

pointer('[MouseLeft>]') // press the left mouse button
pointer('[/MouseLeft]') // release the left mouse button

Les boutons disponibles dépendent de la pointerMap.

Déplacer un pointeur

Toute action de pointeur qui n'est pas une pression décrit un mouvement.

La propriété pointerName permet de spécifier quel pointeur déplacer. Par défaut, c'est mouse.

Notez que le pointeur mouse (pointerId: 1) est le seul à toujours exister et avoir une position. Un pointeur touch n'existe que pendant le contact avec l'écran et reçoit un nouveau pointerId à chaque fois. Pour ces pointeurs, nous utilisons le nom du "bouton" de l'action de pression comme pointerName.

pointer([
  // touch the screen at element1
  {keys: '[TouchA>]', target: element1},
  // move the touch pointer to element2
  {pointerName: 'TouchA', target: element2},
  // release the touch pointer at the last position (element2)
  {keys: '[/TouchA]'},
])

Position du pointeur

PointerTarget

interface PointerTarget {
  target: Element
  coords?: PointerCoords
}

Les propriétés PointerTarget permettent de décrire la position du pointeur dans le document.
Les coords fournies sont appliquées telles quelles au MouseEvent résultant et peuvent être omises.
Le target doit être l'élément recevant l'entrée du pointeur dans le navigateur, soit l'élément le plus haut pouvant recevoir des événements à ces coordonnées.

SelectionTarget

interface SelectionTarget {
  node?: Node
  offset?: number
}

Les actions de pointeur peuvent modifier la sélection dans le document.
Dans un navigateur, chaque position de pointeur correspond à une position DOM : un nœud DOM et un décalage correspondant généralement au caractère le plus proche.
Dans un environnement sans layout où tous les caractères ont la même position, nous supposons que la position du pointeur est la plus proche du dernier descendant du target.

Si vous fournissez offset, nous supposons que la position du pointeur est la plus proche du caractère offset-th de target.textContent.

Si vous fournissez également node, nous utilisons node et offset comme position DOM exacte pour toute sélection.

// element: <div><span>foo</span><span>bar</span></div>
// | marking the cursor.
// [ ] marking a selection.

pointer({target: element, offset: 2, keys: '[MouseLeft]'})
// => <div><span>fo|o</span><span>bar</span></div>

pointer([{target: element, offset: 2, keys: '[MouseLeft>]'}, {offset: 5}])
// => <div><span>fo[o</span><span>ba]r</span></div>

pointer({target: element, node: element, offset: 1, keys: '[MouseLeft]'})
// => <div><span>foo</span>|<span>bar</span></div>