Drawer Plugin v1.0

Intégrer le plugin de dessin dans vos pages HTML

Zéro dépendance, plusieurs niveaux d'intégration selon vos besoins — du plus simple au plus personnalisé.

Raccourcis clavier à tester sur cette page

SActiver le stylo

TAfficher / masquer

1 – 4Changer la couleur

Ctrl ZAnnuler le trait

SupprTout effacer

ⓘ

Les raccourcis sont ignorés quand le focus est dans un champ texte (input, textarea, select). Personnalisez-les via DrawerConfig.toggleDrawKey et toggleBoardKey.

Structure des fichiers

votre-projet/

├── drawer.js ← le plugin

├── drawer.css ← chargé automatiquement

├── page1.html

├── page2.html

└── ...

ⓘ

Placez drawer.js et drawer.css dans le même dossier. Le CSS est injecté automatiquement — aucune balise <link> à ajouter.

Télécharger drawer.js Télécharger drawer.css

Méthodes d'intégration

Intégration minimale

Une seule ligne à ajouter — config par défaut

Recommandé

Ajoutez cette unique balise avant la fermeture de </body> dans chaque page. C'est tout.

HTML

Le plugin s'initialise seul et expose les raccourcis clavier par défaut : S pour le stylo, T pour le tableau.

Avec configuration personnalisée

Couleurs, épaisseur, raccourcis — via window.DrawerConfig

Déclarez window.DrawerConfig avant le script pour surcharger les valeurs par défaut.

HTML

<script>
  window.DrawerConfig = {
    colors:         ['#e63946', '#457b9d', '#2a9d8f', '#e9c46a'],
    pathSize:       10,
    toggleDrawKey:  's',
    toggleBoardKey: 't',
  };
</script>
<script src="drawer.js"></script>

Propriété	Type	Défaut	Description
colors	string[]	4 couleurs	Palette de l'interface
pathSize	number	12	Épaisseur en pixels
toggleDrawKey	string	's'	Touche du stylo
toggleBoardKey	string	't'	Touche du tableau

Via l'API programmatique

Piloter le plugin depuis votre propre interface

Après le chargement du script, window.Drawer est disponible. Connectez-le à vos propres boutons ou déclencheurs.

HTML

<!-- Vos propres boutons -->
<button onclick="Drawer.togglePen()">Stylo</button>
<button onclick="Drawer.selectColor('#e63946')">Rouge</button>
<button onclick="Drawer.clear()">Effacer</button>

Méthodes disponibles

Drawer.show()Affiche le tableau

Drawer.hide()Masque le tableau

Drawer.toggle()Bascule l'affichage

Drawer.enablePen()Active le stylo

Drawer.disablePen()Désactive le stylo

Drawer.togglePen()Bascule le stylo

Drawer.selectColor(css)Change la couleur active

Drawer.undo()Annule le dernier trait

Drawer.clear()Efface tout le canvas

Via les événements DOM

Réagir aux actions du plugin dans votre code existant

Le plugin émet des CustomEvent sur document pour chaque action. Écoutez-les depuis n'importe où dans votre code.

JavaScript

document.addEventListener('drawer:colorChange', e => {
  console.log('Couleur :', e.detail.color);
});

document.addEventListener('drawer:penEnable', () => {
  // ex: masquer une barre d'outils
  toolbar.classList.add('hidden');
});

Événements disponibles

Événement	`event.detail`	Déclenchement
drawer:show	—	Tableau affiché
drawer:hide	—	Tableau masqué
drawer:penEnable	{ color }	Stylo activé
drawer:penDisable	—	Stylo désactivé
drawer:colorChange	{ color }	Couleur changée
drawer:undo	—	Trait annulé
drawer:clear	—	Canvas effacé