Container Test

Test container classes with canvas
Instructions Claude
Prompt utilisé pour régénérer cette page :
Page "Container Test" du theme-debugger de web-cylian-laboratory.
Catégorie : Theme Debugger — test des classes CSS container avec canvas interactif.

=== FRONT MATTER (index.md) ===
title: "Container Test"
description: "Test container classes with canvas"
icon: "shape-outline"
tags: ["theme", "css", "testing", "canvas"]
js: default

=== CONTENU HTML (index.md) ===
Le body contient une seule section :
<section id="playground-container" class="container visual">
<canvas id="playground-canvas" width="1000" height="1000"></canvas>
</section>
Pas de texte, pas de titre — juste un canvas 1000x1000 dans un container.

=== FRAGMENT LEFT (_fragment.left.md) ===
Fichier widget de navigation partagé par toutes les pages du theme-debugger.
Front matter : title "Navigation", weight 100, _build render/list: never.
Contenu : titre h5 "Theme Components" suivi d'une liste de liens :
- [Buttons](/theme-debugger/theme-button/)
- [Container](/theme-debugger/theme-container/)
- [Forms](/theme-debugger/theme-form/)
- [Headers](/theme-debugger/theme-header/)
- [Panic](/theme-debugger/theme-panic/)
- [Tables](/theme-debugger/theme-table/)
- [Tags](/theme-debugger/theme-tag/)
- [Typography](/theme-debugger/theme-typography/)
- [Variables](/theme-debugger/theme-variables/)

=== WIDGET LEFT (_options.left.md) ===
Front matter : title "Options", weight 150. Pas de _build restrictions.
Contenu : titre h5 "Container Options" puis un div.container-options contenant :
1. Label "Ratio" + <select id="select-ratio"> avec options :
   - "ratio-1-1" (selected, texte "1:1")
   - "ratio-4-3" (texte "4:3")
   - "ratio-16-9" (texte "16:9")
2. Label "Size" + <select id="select-size"> avec options :
   - "size-600" (texte "600")
   - "size-800" (selected, texte "800")
   - "size-1000" (texte "1000")
3. Label "Canvas" + <select id="select-canvas"> avec options :
   - "canvas-center" (selected, texte "Center")
   - "canvas-contain" (texte "Contain")
   - "canvas-scroll" (texte "Scroll")
4. <button id="btn-apply" class="button">Apply</button>

=== JAVASCRIPT (default.js) ===
Import : Panic depuis /_lib/panic_v3.js
Constante : STORAGE_KEY = 'org.cylian.section'

Fonction initCanvas(containerId, canvasId) :
- Récupère container et canvas par ID, obtient le contexte 2D
- Calcule dimensions (w, h) et centre (cx=w/2, cy=h/2)
- Dessine un gradient linéaire diagonal (0,0)→(w,h) avec 3 stops :
  0='#a8d8ea', 0.5='#aa96da', 1='#fcbad3'
- Remplit tout le canvas avec ce gradient
- Dessine une grille tous les 50px :
  - Lignes verticales et horizontales (strokeStyle 'rgba(0,0,0,0.1)', lineWidth 1)
  - Labels de coordonnées en '10px monospace' (fillStyle 'rgba(0,0,0,0.5)')
  - Labels X positionnés à (i+2, cy+12), labels Y à (cx+4, i-2)
  - Labels affichés uniquement si i>0 && i<w
- Dessine les axes centraux (strokeStyle '#333', lineWidth 2) :
  horizontal de (0,cy) à (w,cy), vertical de (cx,0) à (cx,h)
- Dessine 4 flèches directionnelles (fillStyle '#333') :
  droite (w-10,cy-8)→(w,cy)→(w-10,cy+8), haut (cx-8,10)→(cx,0)→(cx+8,10),
  gauche (10,cy-8)→(0,cy)→(10,cy+8), bas (cx-8,h-10)→(cx,h)→(cx+8,h-10)
- Bordure rouge pointillée (strokeStyle 'red', lineWidth 3, setLineDash [3,3])
  strokeRect(1.5, 1.5, w-3, h-3)

Fonction loadSettings() :
- Lit localStorage avec clé STORAGE_KEY, parse JSON
- Retourne l'objet {ratio, size, canvas} ou null
- Utilise Panic.warning en cas d'erreur

Fonction saveSettings(ratio, size, canvas) :
- Sérialise et sauvegarde dans localStorage
- Panic.info pour succès, Panic.error pour échec

Section Init :
- Appelle initCanvas('playground-container', 'playground-canvas')
- Récupère les éléments DOM : btn-apply, playground-container, select-ratio,
  select-size, select-canvas
- Si tous existent, définit applyClasses() qui :
  1. Supprime les anciennes classes (ratio-1-1, ratio-4-3, ratio-16-9,
     size-600, size-800, size-1000, canvas-center, canvas-contain, canvas-scroll)
  2. Ajoute les classes sélectionnées depuis les 3 dropdowns
  3. Appelle saveSettings()
- Attache l'event listener click sur btn-apply → applyClasses
- Charge les settings sauvegardés, restaure les valeurs des selects,
  log Panic.debug pour la restauration
- Appelle applyClasses() au démarrage
- Log console '[Container Test] Ready'

=== PAS DE CSS CUSTOM ===
Aucun fichier default.scss — la page utilise uniquement les classes
CSS du thème (container, visual, ratio-*, size-*, canvas-*).

=== OBJECTIF DE LA PAGE ===
Tester visuellement comment les classes CSS ratio, size et canvas
affectent le rendu d'un canvas dans un container. Le canvas dessine
un repère orthonormé avec grille pour faciliter l'évaluation visuelle.
Les settings sont persistés en localStorage pour survivre aux rechargements.
Page entièrement générée et maintenue par IA, sans intervention humaine.