LegbaWhiteboard

expérimentaldepuis 0.1.0@legba-core/ui
Aperçu en direct — vrai composant, pas une image

LegbaWhiteboard

Ce que ça fait

Tableau blanc partagé (<legba-whiteboard for="id">) qui réutilise la connexion RTC d’un <legba-call> référencé par id — jamais sa propre connexion, même patron que <legba-chat>. Chaque trait dessiné est envoyé segment par segment via sendData() de la connexion partagée et rendu chez tous les autres participants au fil de l’eau via dataReceived. Un participant qui rejoint en cours d’appel demande l’état actuel du tableau (traits et couleur de fond) ; seul l’hôte de la salle y répond (avec l’historique des traits qu’il a vus). Chaque participant qui peut dessiner choisit sa propre couleur et épaisseur de trait, et dispose d’une gomme (LGB-061). Seul l’hôte peut tout effacer ou changer la couleur de fond du tableau (partagée par toute la salle).

Signature

class LegbaWhiteboard extends LegbaElement {
  for: string;
}

Tag : legba-whiteboard.

Paramètres

PropriétéTypeRequisDéfautDescription
forstringoui""id de l’élément <legba-call> référencé, dont la connexion est réutilisée

Retour

N/A — un élément DOM. Aucun événement propre émis.

Erreurs

Aucune exception : un for invalide produit un console.error explicite (comme <legba-chat>) ; un message reçu via dataReceived qui n’est pas une enveloppe de tableau blanc reconnue (type inconnu, coordonnées hors de [0, 1], JSON malformé) est ignoré silencieusement, jamais une exception qui casse la boucle d’écouteurs de LegbaClientRoom.

Exemple minimal

<legba-call id="salle-1" room="salle-demo" token-endpoint="/api/token"></legba-call>
<legba-call-button for="salle-1"></legba-call-button>
<legba-whiteboard for="salle-1"></legba-whiteboard>

Exemple complet

import type { LegbaWhiteboard } from "@legba-core/ui";

// Le rôle "hôte" (qui contrôle qui peut effacer et qui répond aux
// demandes d'état) vient des métadonnées RÉELLES du participant, posées
// côté serveur (jeton ou changeParticipantRole) — jamais d'un attribut à
// régler soi-même sur ce composant.
function mountBoard(): void {
  const board = document.querySelector<LegbaWhiteboard>("#tableau")!;
  board.for = "salle-1";
}

Pièges

  • Ne réutilise QUE la connexion, pas l’identité ni l’UI de <legba-call> : lit LegbaCall.clientRoom à chaque changement de legba-call-phase-change de la cible, exactement comme <legba-chat>.
  • Le rôle hôte n’est jamais transmis par le message lui-même : un legba-whiteboard-clear reçu n’est appliqué que si les VRAIES métadonnées du participant expéditeur (room.raw.remoteParticipants, posées uniquement par un appel serveur de confiance) portent role: "host" — défense en profondeur, un client modifié qui forgerait ce message est sans effet chez les autres.
  • Aucune persistance, aucun rejeu. Un participant qui rejoint après qu’un dessin a eu lieu ne le voit que si un hôte est présent pour répondre à sa demande d’état (legba-whiteboard-request-state) — sans hôte connecté à ce moment, il repart d’un tableau vide. Ce n’est pas une limite de sendData/dataReceived (voir LGB-013/015) réinterprétée à tort comme un bug.
  • Coordonnées en fractions [0, 1], jamais en pixels bruts : deux participants avec des fenêtres de tailles différentes voient le même dessin aligné.
  • La gomme n’efface rien au sens vectoriel (LGB-061) : elle dessine un trait de la couleur de fond courante, redessiné par-dessus les traits existants — cohérent tant que la couleur de fond ne change pas ensuite. Un trait de gomme déjà posé garde la couleur de fond qu’il avait au moment où il a été tracé, même si la couleur de fond change plus tard ; documenté, pas un vrai effaçage.
  • La couleur du tableau est partagée par toute la salle, comme l’effacement complet : même défense en profondeur que legba-whiteboard-clear (rôle réel de l’expéditeur vérifié via ses métadonnées, jamais un champ du message).
  • Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi