canvasframework 0.5.16 → 0.5.18

package/components/TimePicker.js

@@ -1,934 +0,0 @@
-// TimePicker.js - Corrigé avec scroll iOS fonctionnel + Android Material
-
-import Component from '../core/Component.js';
-import Modal from '../components/Modal.js';
-import Button from '../components/Button.js';
-
-class TimePicker extends Component {
-  constructor(framework, options = {}) {
-    super(framework, options);
-
-    this.selectedTime = options.selectedTime || new Date();
-    this.selectedTime.setSeconds(0, 0);
-
-    this.minTime = options.minTime || null;
-    this.maxTime = options.maxTime || null;
-    this.onChange = options.onChange;
-    this.label = options.label || 'Sélectionner une heure';
-    this.platform = framework.platform;
-
-    // Options de style personnalisables - AJOUTEZ CECI
-    this.headerBgColor = options.headerBgColor || '#6200EE'; // Nouvelle option
-    this.inputBgColor = options.inputBgColor || null;
-    this.inputTextColor = options.inputTextColor || null;
-    this.inputBorderColor = options.inputBorderColor || null;
-    this.labelColor = options.labelColor || null;
-    this.inputHeight = options.inputHeight || 56;
-    this.inputRadius = options.inputRadius || (this.platform === 'cupertino' ? 10 : 0);
-    this.fontSize = options.fontSize || null;
-  
-    this.width = options.width || Math.min(320, framework.width - 40);
-    this.height = this.inputHeight;
-
-    this.onPress = (x, y) => {
-      if (this.isPointInside(x, y)) {
-        this.openPicker();
-        return true;
-      }
-      return false;
-    };
-  }
-
-  openPicker() {
-    if (this.platform === 'cupertino') {
-      this.openCupertinoTimePicker();
-    } else {
-      this.openMaterialTimePicker();
-    }
-  }
-
-  openCupertinoTimePicker() {
-    const modal = new Modal(this.framework, {
-      title: '',
-      width: this.framework.width,
-      height: 340,
-      showCloseButton: false,
-      closeOnOverlayClick: true,
-      bgColor: '#F9F9F9'
-    });
-
-    const picker = new CupertinoTimeWheel(this.framework, {
-      x: 20,
-      y: 20,
-      width: this.framework.width - 40,
-      selectedTime: new Date(this.selectedTime),
-      onChange: (time) => {
-        this.selectedTime = time;
-        if (this.onChange) this.onChange(time);
-      },
-      minTime: this.minTime,
-      maxTime: this.maxTime
-    });
-
-    modal.add(picker);
-
-    const btnOK = new Button(this.framework, {
-      x: (this.framework.width - 200) / 2,
-      y: 250,
-      width: 200,
-      height: 44,
-      text: 'Valider',
-      onClick: () => modal.hide()
-    });
-    modal.add(btnOK);
-
-    this.framework.add(modal);
-    modal.show();
-  }
-
-  openMaterialTimePicker() {
-    const dialog = new MaterialTimePickerDialog(this.framework, {
-      selectedTime: new Date(this.selectedTime),
-      onChange: (time) => {
-        this.selectedTime = time;
-        if (this.onChange) this.onChange(time);
-      },
-      minTime: this.minTime,
-      maxTime: this.maxTime,
-      // Transmettre les options de style
-      headerBgColor: this.headerBgColor // Ajoutez cette ligne
-    });
-
-    this.framework.add(dialog);
-    dialog.show();
-  }
-
-  draw(ctx) {
-    ctx.save();
-
-    const timeStr = this.formatTime(this.selectedTime);
-
-    // Couleurs par défaut selon la plateforme
-    let bgColor, textColor, labelColor, borderColor, fontSize;
-    
-    if (this.platform === 'cupertino') {
-      // Style Cupertino par défaut
-      bgColor = this.inputBgColor || '#FFFFFF';
-      textColor = this.inputTextColor || '#000000';
-      labelColor = this.labelColor || '#8E8E93';
-      borderColor = this.inputBorderColor || '#C7C7CC';
-      fontSize = this.fontSize || 17;
-      
-      // Dessiner l'arrière-plan
-      ctx.fillStyle = bgColor;
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.inputRadius);
-      ctx.fill();
-
-      // Bordure
-      ctx.strokeStyle = borderColor;
-      ctx.lineWidth = 1;
-      ctx.stroke();
-
-      // Label
-      ctx.fillStyle = labelColor;
-      ctx.font = '14px -apple-system, sans-serif';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.label, this.x + 16, this.y + 18);
-
-      // Valeur (heure)
-      ctx.fillStyle = textColor;
-      ctx.font = `${fontSize}px -apple-system, sans-serif`;
-      ctx.fillText(timeStr, this.x + 16, this.y + this.height - 18);
-
-      // Chevron (flèche)
-      ctx.strokeStyle = '#C7C7CC';
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.moveTo(this.x + this.width - 28, this.y + this.height/2 - 6);
-      ctx.lineTo(this.x + this.width - 22, this.y + this.height/2);
-      ctx.lineTo(this.x + this.width - 16, this.y + this.height/2 - 6);
-      ctx.stroke();
-    } else {
-      // Style Material par défaut
-      bgColor = this.inputBgColor || (this.pressed ? '#EEEEEE' : '#FFFFFF');
-      textColor = this.inputTextColor || '#000000';
-      labelColor = this.labelColor || '#757575';
-      borderColor = this.inputBorderColor || '#E0E0E0';
-      fontSize = this.fontSize || 16;
-	  
-      
-      // Arrière-plan
-      ctx.fillStyle = bgColor;
-      if (this.inputRadius > 0) {
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.inputRadius);
-        ctx.fill();
-      } else {
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-      }
-
-      // Bordure
-      ctx.strokeStyle = borderColor;
-      ctx.lineWidth = 1;
-      if (this.inputRadius > 0) {
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.inputRadius);
-        ctx.stroke();
-      } else {
-        ctx.strokeRect(this.x, this.y, this.width, this.height);
-      }
-
-      // Icône d'horloge
-      const cx = this.x + 16 + 12;
-      const cy = this.y + this.height/2;
-      ctx.strokeStyle = labelColor;
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.arc(cx, cy, 11, 0, Math.PI * 2);
-      ctx.moveTo(cx, cy - 8);
-      ctx.lineTo(cx, cy);
-      ctx.lineTo(cx + 7, cy);
-      ctx.stroke();
-
-      // Label
-      ctx.fillStyle = labelColor;
-      ctx.font = '14px Roboto, sans-serif';
-      ctx.textAlign = 'left';
-      ctx.fillText(this.label, this.x + 48, this.y + 18);
-
-      // Valeur (heure)
-      ctx.fillStyle = textColor;
-      ctx.font = `${fontSize}px Roboto, sans-serif`;
-      ctx.fillText(timeStr, this.x + 48, this.y + this.height - 10);
-    }
-
-    ctx.restore();
-  }
-
-  formatTime(date) {
-    const h = date.getHours().toString().padStart(2, '0');
-    const m = date.getMinutes().toString().padStart(2, '0');
-    return `${h}:${m}`;
-  }
-
-  roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + h - r);
-    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-    ctx.lineTo(x + r, y + h);
-    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.closePath();
-  }
-
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
-  }
-}
-
-// ════════════════════════════════════════════════════════════
-//   iOS Cupertino Time Wheel - Inspiré de IOSDatePickerWheel
-// ════════════════════════════════════════════════════════════
-class CupertinoTimeWheel extends Component {
-  constructor(framework, options) {
-    super(framework, options);
-    
-    this.selectedTime = options.selectedTime || new Date();
-    this.onChange = options.onChange;
-
-    this.hourWheel = this.selectedTime.getHours();
-    this.minuteWheel = this.selectedTime.getMinutes();
-
-    this.minTime = options.minTime;
-    this.maxTime = options.maxTime;
-
-    this.wheelHeight = 216;
-    this.itemHeight = 44;
-
-    // État de drag
-    this.dragging = false;
-    this.dragStartY = 0;
-    this.dragWheel = null; // 0 = heures, 1 = minutes
-    this.lastY = 0;
-
-    this._setupEventHandlers();
-
-    if (!options.width) {
-      this.width = framework.width - 40;
-    }
-    if (!options.height) {
-      this.height = this.wheelHeight;
-    }
-  }
-
-  _setupEventHandlers() {
-    // Press handler - identique à IOSDatePickerWheel
-    this.onPress = (x, y) => {
-      const inside = (x >= this.x && x <= this.x + this.width && 
-                     y >= this.y && y <= this.y + this.wheelHeight);
-      
-      if (!inside) return false;
-      
-      this.dragging = true;
-      this.dragStartY = y;
-      this.lastY = y;
-      
-      // Déterminer la roue (heures ou minutes)
-      const wheelWidth = this.width / 2;
-      this.dragWheel = x < this.x + wheelWidth ? 0 : 1;
-      
-      // Prendre le contrôle
-      this.framework.activeComponent = this;
-      
-      // Ajouter listener global
-      this._addGlobalMoveListener();
-      
-      this._requestRedraw();
-      
-      return true;
-    };
-
-    // Release handler
-    this.onRelease = (x, y) => {
-      if (this.dragging) {
-        this.dragging = false;
-        this.dragWheel = null;
-        
-        this._removeGlobalMoveListener();
-        
-        if (this.framework.activeComponent === this) {
-          this.framework.activeComponent = null;
-        }
-        
-        this._requestRedraw();
-      }
-    };
-
-    this.onMove = (x, y) => {
-      // Laissé vide, on utilise l'écouteur global
-    };
-  }
-
-  _addGlobalMoveListener() {
-    const canvas = this.framework.canvas;
-    
-    this._savedMouseMove = canvas.onmousemove;
-    this._savedTouchMove = canvas.ontouchmove;
-    
-    canvas.onmousemove = (e) => {
-      if (this.dragging) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        const rect = canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        
-        this._handleGlobalMove(x, y);
-        return false;
-      }
-      
-      if (this._savedMouseMove) {
-        return this._savedMouseMove(e);
-      }
-    };
-    
-    canvas.ontouchmove = (e) => {
-      if (this.dragging && e.touches.length > 0) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        const touch = e.touches[0];
-        const rect = canvas.getBoundingClientRect();
-        const x = touch.clientX - rect.left;
-        const y = touch.clientY - rect.top;
-        
-        this._handleGlobalMove(x, y);
-        return false;
-      }
-      
-      if (this._savedTouchMove) {
-        return this._savedTouchMove(e);
-      }
-    };
-  }
-
-  _removeGlobalMoveListener() {
-    const canvas = this.framework.canvas;
-    
-    if (this._savedMouseMove) {
-      canvas.onmousemove = this._savedMouseMove;
-      this._savedMouseMove = null;
-    }
-    
-    if (this._savedTouchMove) {
-      canvas.ontouchmove = this._savedTouchMove;
-      this._savedTouchMove = null;
-    }
-  }
-
-  _handleGlobalMove(x, y) {
-    if (!this.dragging) return;
-    
-    const deltaY = y - this.lastY;
-    this.lastY = y;
-    
-    if (Math.abs(deltaY) > 0.5) {
-      const direction = deltaY > 0 ? 1 : -1;
-      
-      if (this.dragWheel === 0) {
-        // Heures - avec bouclage
-        let newHour = this.hourWheel - direction;
-        if (newHour < 0) newHour = 23;
-        if (newHour > 23) newHour = 0;
-        this.hourWheel = newHour;
-      } else if (this.dragWheel === 1) {
-        // Minutes - avec bouclage
-        let newMinute = this.minuteWheel - direction;
-        if (newMinute < 0) newMinute = 59;
-        if (newMinute > 59) newMinute = 0;
-        this.minuteWheel = newMinute;
-      }
-      
-      this._updateSelectedTime();
-      this._requestRedraw();
-    }
-  }
-
-  _updateSelectedTime() {
-    const newTime = new Date();
-    newTime.setHours(this.hourWheel, this.minuteWheel, 0, 0);
-    
-    // Vérifier les limites min/max
-    if (this.minTime && newTime < this.minTime) {
-      this.hourWheel = this.minTime.getHours();
-      this.minuteWheel = this.minTime.getMinutes();
-      newTime.setHours(this.hourWheel, this.minuteWheel, 0, 0);
-    }
-    if (this.maxTime && newTime > this.maxTime) {
-      this.hourWheel = this.maxTime.getHours();
-      this.minuteWheel = this.maxTime.getMinutes();
-      newTime.setHours(this.hourWheel, this.minuteWheel, 0, 0);
-    }
-    
-    if (newTime.getTime() !== this.selectedTime.getTime()) {
-      this.selectedTime = newTime;
-      if (this.onChange) {
-        this.onChange(this.selectedTime);
-      }
-    }
-  }
-
-  _requestRedraw() {
-    if (this.framework.markComponentDirty) {
-      this.framework.markComponentDirty(this);
-    }
-  }
-
-  draw(ctx) {
-    ctx.save();
-
-    const wheelWidth = this.width / 2;
-    
-    // Fond
-    ctx.fillStyle = '#F9F9F9';
-    ctx.fillRect(this.x, this.y, this.width, this.wheelHeight);
-
-    // Bande de sélection
-    const selectionY = this.y + this.wheelHeight / 2 - this.itemHeight / 2;
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
-    ctx.fillRect(this.x, selectionY, this.width, this.itemHeight);
-
-    // Lignes de séparation
-    ctx.strokeStyle = '#C7C7CC';
-    ctx.lineWidth = 0.5;
-    ctx.beginPath();
-    ctx.moveTo(this.x, selectionY);
-    ctx.lineTo(this.x + this.width, selectionY);
-    ctx.moveTo(this.x, selectionY + this.itemHeight);
-    ctx.lineTo(this.x + this.width, selectionY + this.itemHeight);
-    ctx.stroke();
-
-    // Divider vertical
-    ctx.beginPath();
-    ctx.moveTo(this.x + wheelWidth, this.y);
-    ctx.lineTo(this.x + wheelWidth, this.y + this.wheelHeight);
-    ctx.stroke();
-
-    // Heures (0-23)
-    const hours = Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0'));
-    this._drawWheel(ctx, this.x, hours, this.hourWheel, 0, 23);
-
-    // Minutes (0-59)
-    const minutes = Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0'));
-    this._drawWheel(ctx, this.x + wheelWidth, minutes, this.minuteWheel, 0, 59);
-
-    ctx.restore();
-  }
-
-  _drawWheel(ctx, x, items, selectedIndex, minIndex = 0, maxIndex = items.length - 1) {
-    const wheelWidth = this.width / 2;
-    const centerY = this.y + this.wheelHeight / 2;
-    
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(x, this.y, wheelWidth, this.wheelHeight);
-    ctx.clip();
-    
-    for (let i = -2; i <= 2; i++) {
-      const index = selectedIndex + i;
-      if (index >= minIndex && index <= maxIndex) {
-        const itemY = centerY + i * this.itemHeight;
-        const distance = Math.abs(itemY - centerY);
-        const scale = 1 - (distance / this.wheelHeight);
-        const opacity = Math.max(0.3, scale);
-        
-        ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
-        ctx.font = `${i === 0 ? 'bold ' : ''}${18 + scale * 2}px -apple-system, sans-serif`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(items[index], x + wheelWidth / 2, itemY);
-      }
-    }
-    
-    ctx.restore();
-  }
-
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.wheelHeight;
-  }
-
-  _unmount() {
-    this._removeGlobalMoveListener();
-    super._unmount();
-  }
-}
-
-// ════════════════════════════════════════════════════════════
-//   Android Material Time Picker - Style horloge analogique
-//   FIX: Problème de clics résolu + Amélioration visibilité
-// ════════════════════════════════════════════════════════════
-class MaterialTimePickerDialog extends Component {
-  constructor(framework, options) {
-    super(framework, {
-      x: 0, 
-      y: 0,
-      width: framework.width,
-      height: framework.height,
-      visible: false,
-      captureEvents: true
-    });
-
-    this.selectedTime = options.selectedTime || new Date();
-    this.hour = this.selectedTime.getHours() % 12 || 12;
-    this.minute = this.selectedTime.getMinutes();
-    this.isPM = this.selectedTime.getHours() >= 12;
-
-    this.onChange = options.onChange;
-    this.opacity = 0;
-    this.isVisible = false;
-
-    // Options de style Material
-    this.headerBgColor = options.headerBgColor || '#6200EE';
-    this.clockBgColor = options.clockBgColor || '#F8F8F8';
-    this.selectedColor = options.selectedColor || '#6200EE';
-    this.clockHandColor = options.clockHandColor || '#6200EE';
-    this.buttonColor = options.buttonColor || '#6200EE';
-    this.selectedTextColor = options.selectedTextColor || '#FFFFFF';
-    this.unselectedTextColor = options.unselectedTextColor || '#424242';
-
-    this.dialogWidth = Math.min(340, framework.width - 48);
-    this.dialogHeight = 520;
-
-    this.mode = 'hours';
-    this.dragging = false;
-
-    this._setupEventHandlers();
-  }
-
-  _setupEventHandlers() {
-    // S'assurer que le composant intercepte les événements
-    this.onPress = (x, y) => this.handlePress(x, y);
-    this.onMove = (x, y) => this.handleMove(x, y);
-    this.onRelease = (x, y) => this.handleRelease(x, y);
-  }
-
-  show() {
-    this.isVisible = true;
-    this.visible = true;
-    this.opacity = 0;
-    
-    // FIX: Forcer un redraw complet
-    if (this.framework.requestRedraw) {
-      this.framework.requestRedraw();
-    }
-    
-    const fade = () => {
-      this.opacity += 0.1;
-      if (this.opacity < 1) {
-        requestAnimationFrame(fade);
-      }
-      if (this.framework.requestRedraw) {
-        this.framework.requestRedraw();
-      }
-    };
-    fade();
-  }
-
-  hide() {
-    const fade = () => {
-      this.opacity -= 0.1;
-      if (this.opacity > 0) {
-        requestAnimationFrame(fade);
-        if (this.framework.requestRedraw) {
-          this.framework.requestRedraw();
-        }
-      } else {
-        this.isVisible = false;
-        this.visible = false;
-        this.framework.remove(this);
-      }
-    };
-    fade();
-  }
-
-  // Renommer les handlers pour éviter les conflits
-  handlePress(x, y) {
-    if (!this.isVisible || this.opacity <= 0) return false;
-
-    const dx = (this.framework.width - this.dialogWidth) / 2;
-    const dy = (this.framework.height - this.dialogHeight) / 2;
-
-    // Click on time display to switch mode
-    const timeY = dy + 50;
-    if (y > dy + 20 && y < dy + 80 && x > dx + 40 && x < dx + this.dialogWidth - 60) {
-      if (x < dx + this.dialogWidth/2) {
-        this.mode = 'hours';
-        this._requestRedraw();
-        return true;
-      } else {
-        this.mode = 'minutes';
-        this._requestRedraw();
-        return true;
-      }
-    }
-
-    // AM/PM toggle
-    const pmY = dy + 30;
-    if (x > dx + this.dialogWidth - 60 && x < dx + this.dialogWidth - 20) {
-      if (y > pmY - 10 && y < pmY + 10) {
-        this.isPM = false;
-        this._updateTime();
-        return true;
-      }
-      if (y > pmY + 15 && y < pmY + 35) {
-        this.isPM = true;
-        this._updateTime();
-        return true;
-      }
-    }
-
-    // Clock interaction - check if click is on clock area
-    const clockCenterX = dx + this.dialogWidth / 2;
-    const clockCenterY = dy + 280;
-    const clockRadius = 120;
-    
-    const distX = x - clockCenterX;
-    const distY = y - clockCenterY;
-    const dist = Math.sqrt(distX * distX + distY * distY);
-    
-    // Accept clicks within and slightly outside the clock
-    if (dist < clockRadius + 20) {
-      this._handleClockClick(x, y, clockCenterX, clockCenterY);
-      this.dragging = true;
-      return true;
-    }
-
-    // Buttons
-    const btnY = dy + this.dialogHeight - 40;
-    if (Math.abs(y - btnY) < 20) {
-      if (x > dx + this.dialogWidth - 200 && x < dx + this.dialogWidth - 100) {
-        this.hide();
-        return true;
-      }
-      if (x > dx + this.dialogWidth - 80) {
-        this._updateTime();
-        this.hide();
-        return true;
-      }
-    }
-
-    // Click outside - close dialog
-    if (x < dx || x > dx + this.dialogWidth || y < dy || y > dy + this.dialogHeight) {
-      this.hide();
-      return true;
-    }
-
-    return true;
-  }
-
-  handleMove(x, y) {
-    if (!this.dragging || !this.isVisible) return false;
-
-    const dx = (this.framework.width - this.dialogWidth) / 2;
-    const dy = (this.framework.height - this.dialogHeight) / 2;
-    const clockCenterX = dx + this.dialogWidth / 2;
-    const clockCenterY = dy + 280;
-
-    this._handleClockClick(x, y, clockCenterX, clockCenterY);
-    return true;
-  }
-
-  handleRelease(x, y) {
-    if (this.dragging) {
-      this.dragging = false;
-      // Auto switch to minutes after selecting hour
-      if (this.mode === 'hours') {
-        this.mode = 'minutes';
-        this._requestRedraw();
-      }
-      return true;
-    }
-    return false;
-  }
-
-  _handleClockClick(x, y, cx, cy) {
-    // Calculate angle from center
-    let angle = Math.atan2(y - cy, x - cx);
-    
-    // Convert to 12-hour format (0 at top, clockwise)
-    // atan2 gives 0 at right (3 o'clock), we want 0 at top (12 o'clock)
-    angle = angle + Math.PI / 2;
-    if (angle < 0) angle += Math.PI * 2;
-    
-    if (this.mode === 'hours') {
-      // Calculate hour (1-12)
-      let value = Math.round(angle / (Math.PI * 2 / 12));
-      if (value === 0) value = 12;
-      if (value > 12) value = value % 12;
-      this.hour = value;
-    } else {
-      // Calculate minutes (0-59, in steps of 5)
-      let value = Math.round(angle / (Math.PI * 2 / 12)) * 5;
-      if (value >= 60) value = 0;
-      this.minute = value;
-    }
-    
-    this._updateTime();
-  }
-
-  _updateTime() {
-    let hour24 = this.hour;
-    if (this.isPM && hour24 !== 12) hour24 += 12;
-    if (!this.isPM && hour24 === 12) hour24 = 0;
-    
-    this.selectedTime.setHours(hour24, this.minute, 0, 0);
-    if (this.onChange) this.onChange(this.selectedTime);
-    this._requestRedraw();
-  }
-
-  _requestRedraw() {
-    if (this.framework.requestRedraw) {
-      this.framework.requestRedraw();
-    }
-  }
-
-  draw(ctx) {
-    if (!this.isVisible || this.opacity <= 0) return;
-    
-    ctx.save();
-    ctx.globalAlpha = this.opacity;
-
-    // Overlay
-    ctx.fillStyle = 'rgba(0,0,0,0.5)';
-    ctx.fillRect(0, 0, this.framework.width, this.framework.height);
-
-    const dx = (this.framework.width - this.dialogWidth) / 2;
-    const dy = (this.framework.height - this.dialogHeight) / 2;
-
-    // Card shadow
-    ctx.shadowColor = 'rgba(0,0,0,0.3)';
-    ctx.shadowBlur = 16;
-    ctx.shadowOffsetY = 8;
-    
-    ctx.fillStyle = '#FFFFFF';
-    this.roundRect(ctx, dx, dy, this.dialogWidth, this.dialogHeight, 8);
-    ctx.fill();
-    
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetY = 0;
-
-    // Header
-    ctx.fillStyle = this.headerBgColor;
-    this.roundRect(ctx, dx, dy, this.dialogWidth, 100, 8);
-    ctx.fill();
-
-    // Time display avec mode actif
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    
-    const timeY = dy + 50;
-    
-    // Heures
-    ctx.fillStyle = this.mode === 'hours' ? '#FFFFFF' : 'rgba(255,255,255,0.6)';
-    ctx.font = 'bold 48px Roboto,sans-serif';
-    ctx.fillText(this.hour.toString().padStart(2, '0'), dx + this.dialogWidth/2 - 40, timeY);
-    
-    // Deux points
-    ctx.fillStyle = '#FFFFFF';
-    ctx.fillText(':', dx + this.dialogWidth/2, timeY);
-    
-    // Minutes
-    ctx.fillStyle = this.mode === 'minutes' ? '#FFFFFF' : 'rgba(255,255,255,0.6)';
-    ctx.fillText(this.minute.toString().padStart(2, '0'), dx + this.dialogWidth/2 + 40, timeY);
-
-    // AM/PM
-    const pmY = dy + 30;
-    ctx.font = 'bold 14px Roboto,sans-serif';
-    ctx.fillStyle = this.isPM ? 'rgba(255,255,255,0.6)' : '#FFFFFF';
-    ctx.fillText('AM', dx + this.dialogWidth - 40, pmY);
-    ctx.fillStyle = this.isPM ? '#FFFFFF' : 'rgba(255,255,255,0.6)';
-    ctx.fillText('PM', dx + this.dialogWidth - 40, pmY + 25);
-
-    // Clock face
-    const clockCenterX = dx + this.dialogWidth / 2;
-    const clockCenterY = dy + 280;
-    const clockRadius = 120;
-
-    // Clock circle - FIX: Changé en gris plus clair pour contraste
-    ctx.fillStyle = '#F8F8F8';
-    ctx.beginPath();
-    ctx.arc(clockCenterX, clockCenterY, clockRadius, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Draw numbers
-    if (this.mode === 'hours') {
-      this._drawClockNumbers(ctx, clockCenterX, clockCenterY, clockRadius, 12, this.hour);
-    } else {
-      this._drawClockMinutes(ctx, clockCenterX, clockCenterY, clockRadius, this.minute);
-    }
-
-    // Clock hand
-    this._drawClockHand(ctx, clockCenterX, clockCenterY, clockRadius);
-
-    // Actions buttons
-    const btnY = dy + this.dialogHeight - 40;
-    ctx.fillStyle = '#6200EE';
-    ctx.font = 'bold 14px Roboto,sans-serif';
-    ctx.textAlign = 'right';
-    ctx.fillText('ANNULER', dx + this.dialogWidth - 140, btnY);
-    ctx.fillText('OK', dx + this.dialogWidth - 30, btnY);
-
-    ctx.restore();
-  }
-
-  _drawClockNumbers(ctx, cx, cy, radius, count, selected) {
-    for (let i = 1; i <= count; i++) {
-      const angle = (i - 3) * (Math.PI * 2 / count);
-      const x = cx + Math.cos(angle) * (radius - 30);
-      const y = cy + Math.sin(angle) * (radius - 30);
-      
-      const isSelected = i === selected;
-      
-      if (isSelected) {
-        // Numéro sélectionné : fond violet, texte blanc
-        ctx.fillStyle = '#6200EE';
-        ctx.beginPath();
-        ctx.arc(x, y, 20, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.fillStyle = '#FFFFFF';
-      } else {
-        // Numéros non sélectionnés : texte gris foncé pour contraste
-        ctx.fillStyle = '#424242';
-      }
-      
-      ctx.font = 'bold 16px Roboto,sans-serif';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(i.toString(), x, y);
-    }
-  }
-
-  _drawClockMinutes(ctx, cx, cy, radius, selected) {
-    // Afficher les minutes par pas de 5
-    for (let i = 0; i < 60; i += 5) {
-      const angle = (i / 5 - 3) * (Math.PI * 2 / 12);
-      const x = cx + Math.cos(angle) * (radius - 30);
-      const y = cy + Math.sin(angle) * (radius - 30);
-      
-      const isSelected = i === selected;
-      
-      if (isSelected) {
-        // Minute sélectionnée : fond violet, texte blanc
-        ctx.fillStyle = '#6200EE';
-        ctx.beginPath();
-        ctx.arc(x, y, 20, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.fillStyle = '#FFFFFF';
-      } else {
-        // Minutes non sélectionnées : texte gris foncé
-        ctx.fillStyle = '#424242';
-      }
-      
-      ctx.font = 'bold 16px Roboto,sans-serif';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(i.toString().padStart(2, '0'), x, y);
-    }
-  }
-
-  _drawClockHand(ctx, cx, cy, radius) {
-    const value = this.mode === 'hours' ? this.hour : this.minute / 5;
-    const total = this.mode === 'hours' ? 12 : 12;
-    const angle = (value - 3) * (Math.PI * 2 / total);
-    
-    const handLength = radius - 50;
-    const x = cx + Math.cos(angle) * handLength;
-    const y = cy + Math.sin(angle) * handLength;
-    
-    // Line
-    ctx.strokeStyle = '#6200EE';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(cx, cy);
-    ctx.lineTo(x, y);
-    ctx.stroke();
-    
-    // Center dot
-    ctx.fillStyle = '#6200EE';
-    ctx.beginPath();
-    ctx.arc(cx, cy, 6, 0, Math.PI * 2);
-    ctx.fill();
-    
-    // End dot
-    ctx.beginPath();
-    ctx.arc(x, y, 4, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  // IMPORTANT: S'assurer que le composant est clickable
-  isPointInside(x, y) {
-    return this.isVisible && this.opacity > 0;
-  }
-
-  roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x+r,y); 
-    ctx.lineTo(x+w-r,y);
-    ctx.quadraticCurveTo(x+w,y,x+w,y+r);
-    ctx.lineTo(x+w,y+h-r); 
-    ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
-    ctx.lineTo(x+r,y+h); 
-    ctx.quadraticCurveTo(x,y+h,x,y+h-r);
-    ctx.lineTo(x,y+r); 
-    ctx.quadraticCurveTo(x,y,x+r,y);
-    ctx.closePath();
-  }
-}
-
-export default TimePicker;