canvasframework 0.3.26 → 0.3.28

package/components/AndroidDatePickerDialog.js

@@ -31,21 +31,29 @@ class AndroidDatePickerDialog extends Component {
       height: framework.height,
       visible: false
     });
-    
+  
     this.selectedDate = options.selectedDate || new Date();
     this.onChange = options.onChange;
     this.currentMonth = this.selectedDate.getMonth();
     this.currentYear = this.selectedDate.getFullYear();
     this.hoveredDay = null;
-    
+  
+    // Options de personnalisation
+    this.headerBgColor = options.headerBgColor || '#6200EE';
+    this.selectedColor = options.selectedColor || '#6200EE';
+    this.buttonColor = options.buttonColor || '#6200EE';
+    this.todayColor = options.todayColor || '#6200EE';
+    this.textColor = options.textColor || '#000000';
+    this.dayNamesColor = options.dayNamesColor || '#666666';
+  
     this.dialogWidth = Math.min(320, framework.width - 40);
     this.dialogHeight = 420;
     this.headerHeight = 100;
     this.daySize = (this.dialogWidth - 40) / 7;
-    
+  
     this.opacity = 0;
     this.isVisible = false;
-    
+  
     this.onPress = this.handlePress.bind(this);
   }
   
@@ -183,7 +191,7 @@ class AndroidDatePickerDialog extends Component {
     const selectedMonth = monthNames[this.selectedDate.getMonth()];
     const selectedDayNum = this.selectedDate.getDate();
     
-    ctx.fillStyle = '#FFFFFF';
+    ctx.fillStyle = '#000000';
     ctx.font = 'bold 32px Roboto, sans-serif';
     ctx.textBaseline = 'middle';
     ctx.fillText(`${selectedDay}, ${selectedMonth} ${selectedDayNum}`, 
@@ -263,7 +271,7 @@ class AndroidDatePickerDialog extends Component {
           }
           
           // Numéro
-          ctx.fillStyle = isSelected ? '#FFFFFF' : '#000000';
+          ctx.fillStyle = isSelected ? '#FFFFFF' : '#212121';
           ctx.font = '14px Roboto, sans-serif';
           ctx.textAlign = 'center';
           ctx.textBaseline = 'middle';

package/components/Camera.js

@@ -280,6 +280,218 @@ class Camera extends Component {
     }
   }
 
+  drawContainIcon(ctx, x, y, size) {
+    // Icône "contain" : rectangle avec flèches vers l'intérieur
+    const pad = size * 0.2;
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    
+    // Rectangle extérieur
+    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
+    
+    // Flèches pointant vers l'intérieur
+    const arrowSize = size * 0.15;
+    ctx.fillStyle = '#000';
+    
+    // Flèche haut
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + pad - 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + pad + arrowSize);
+    ctx.lineTo(x + size/2 + arrowSize, y + pad + arrowSize);
+    ctx.fill();
+    
+    // Flèche bas
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + size - pad + 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + size - pad - arrowSize);
+    ctx.lineTo(x + size/2 + arrowSize, y + size - pad - arrowSize);
+    ctx.fill();
+    
+    // Flèche gauche
+    ctx.beginPath();
+    ctx.moveTo(x + pad - 2, y + size/2);
+    ctx.lineTo(x + pad + arrowSize, y + size/2 - arrowSize);
+    ctx.lineTo(x + pad + arrowSize, y + size/2 + arrowSize);
+    ctx.fill();
+    
+    // Flèche droite
+    ctx.beginPath();
+    ctx.moveTo(x + size - pad + 2, y + size/2);
+    ctx.lineTo(x + size - pad - arrowSize, y + size/2 - arrowSize);
+    ctx.lineTo(x + size - pad - arrowSize, y + size/2 + arrowSize);
+    ctx.fill();
+  }
+
+  drawCoverIcon(ctx, x, y, size) {
+    // Icône "cover" : rectangle avec flèches vers l'extérieur
+    const pad = size * 0.2;
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    
+    // Rectangle intérieur
+    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
+    
+    // Flèches pointant vers l'extérieur
+    const arrowSize = size * 0.15;
+    ctx.fillStyle = '#000';
+    
+    // Flèche haut
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + arrowSize + 2);
+    ctx.lineTo(x + size/2 + arrowSize, y + arrowSize + 2);
+    ctx.fill();
+    
+    // Flèche bas
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + size - 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + size - arrowSize - 2);
+    ctx.lineTo(x + size/2 + arrowSize, y + size - arrowSize - 2);
+    ctx.fill();
+    
+    // Flèche gauche
+    ctx.beginPath();
+    ctx.moveTo(x + 2, y + size/2);
+    ctx.lineTo(x + arrowSize + 2, y + size/2 - arrowSize);
+    ctx.lineTo(x + arrowSize + 2, y + size/2 + arrowSize);
+    ctx.fill();
+    
+    // Flèche droite
+    ctx.beginPath();
+    ctx.moveTo(x + size - 2, y + size/2);
+    ctx.lineTo(x + size - arrowSize - 2, y + size/2 - arrowSize);
+    ctx.lineTo(x + size - arrowSize - 2, y + size/2 + arrowSize);
+    ctx.fill();
+  }
+
+    drawContainIcon(ctx, x, y, size) {
+    // Icône "contain" : rectangle avec flèches vers l'intérieur
+    const pad = size * 0.2;
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    
+    // Rectangle extérieur
+    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
+    
+    // Flèches pointant vers l'intérieur
+    const arrowSize = size * 0.15;
+    ctx.fillStyle = '#000';
+    
+    // Flèche haut
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + pad - 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + pad + arrowSize);
+    ctx.lineTo(x + size/2 + arrowSize, y + pad + arrowSize);
+    ctx.fill();
+    
+    // Flèche bas
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + size - pad + 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + size - pad - arrowSize);
+    ctx.lineTo(x + size/2 + arrowSize, y + size - pad - arrowSize);
+    ctx.fill();
+    
+    // Flèche gauche
+    ctx.beginPath();
+    ctx.moveTo(x + pad - 2, y + size/2);
+    ctx.lineTo(x + pad + arrowSize, y + size/2 - arrowSize);
+    ctx.lineTo(x + pad + arrowSize, y + size/2 + arrowSize);
+    ctx.fill();
+    
+    // Flèche droite
+    ctx.beginPath();
+    ctx.moveTo(x + size - pad + 2, y + size/2);
+    ctx.lineTo(x + size - pad - arrowSize, y + size/2 - arrowSize);
+    ctx.lineTo(x + size - pad - arrowSize, y + size/2 + arrowSize);
+    ctx.fill();
+  }
+
+  drawCoverIcon(ctx, x, y, size) {
+    // Icône "cover" : rectangle avec flèches vers l'extérieur
+    const pad = size * 0.2;
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    
+    // Rectangle intérieur
+    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
+    
+    // Flèches pointant vers l'extérieur
+    const arrowSize = size * 0.15;
+    ctx.fillStyle = '#000';
+    
+    // Flèche haut
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + arrowSize + 2);
+    ctx.lineTo(x + size/2 + arrowSize, y + arrowSize + 2);
+    ctx.fill();
+    
+    // Flèche bas
+    ctx.beginPath();
+    ctx.moveTo(x + size/2, y + size - 2);
+    ctx.lineTo(x + size/2 - arrowSize, y + size - arrowSize - 2);
+    ctx.lineTo(x + size/2 + arrowSize, y + size - arrowSize - 2);
+    ctx.fill();
+    
+    // Flèche gauche
+    ctx.beginPath();
+    ctx.moveTo(x + 2, y + size/2);
+    ctx.lineTo(x + arrowSize + 2, y + size/2 - arrowSize);
+    ctx.lineTo(x + arrowSize + 2, y + size/2 + arrowSize);
+    ctx.fill();
+    
+    // Flèche droite
+    ctx.beginPath();
+    ctx.moveTo(x + size - 2, y + size/2);
+    ctx.lineTo(x + size - arrowSize - 2, y + size/2 - arrowSize);
+    ctx.lineTo(x + size - arrowSize - 2, y + size/2 + arrowSize);
+    ctx.fill();
+  }
+
+  drawSwitchCameraIcon(ctx, x, y, size) {
+    // Icône de switch caméra : deux caméras avec flèche circulaire
+    const centerX = x + size / 2;
+    const centerY = y + size / 2;
+    const radius = size * 0.35;
+    
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 3;
+    ctx.lineCap = 'round';
+    
+    // Arc circulaire (flèche de rotation)
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, -Math.PI * 0.7, Math.PI * 0.7);
+    ctx.stroke();
+    
+    // Flèche en haut à droite
+    const arrowSize = size * 0.15;
+    const arrowAngle = Math.PI * 0.7;
+    const arrowX = centerX + radius * Math.cos(arrowAngle);
+    const arrowY = centerY + radius * Math.sin(arrowAngle);
+    
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.moveTo(arrowX, arrowY);
+    ctx.lineTo(arrowX - arrowSize, arrowY - arrowSize * 0.5);
+    ctx.lineTo(arrowX - arrowSize * 0.5, arrowY + arrowSize);
+    ctx.fill();
+    
+    // Mini caméra au centre
+    const camWidth = size * 0.25;
+    const camHeight = size * 0.18;
+    const camX = centerX - camWidth / 2;
+    const camY = centerY - camHeight / 2;
+    
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(camX, camY, camWidth, camHeight);
+    
+    // Objectif
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, size * 0.08, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
   draw(ctx) {
     ctx.save();
 
@@ -340,7 +552,9 @@ class Camera extends Component {
       // Mini preview dernière photo (bas droite, 3s)
       if (this.previewPhoto) {
         const previewSize = 80;
-        ctx.drawImage(this.previewPhoto, this.x + this.width - previewSize - 10, this.y + this.height - previewSize - 10, previewSize, previewSize);
+        const img = new Image();
+        img.src = this.previewPhoto;
+        ctx.drawImage(img, this.x + this.width - previewSize - 10, this.y + this.height - previewSize - 10, previewSize, previewSize);
         ctx.strokeStyle = '#fff';
         ctx.lineWidth = 2;
         ctx.strokeRect(this.x + this.width - previewSize - 10, this.y + this.height - previewSize - 10, previewSize, previewSize);
@@ -363,10 +577,19 @@ class Camera extends Component {
     ctx.arc(this.x + this.width/2, this.y + this.height - 50, this.captureButtonRadius + 10, 0, Math.PI * 2);
     ctx.stroke();
 
-    // Switch caméra
-    ctx.fillStyle = '#ffffff';
-    ctx.font = '28px Arial';
-    ctx.fillText('↻', this.x + 20, this.y + 45);
+    // Switch caméra avec icône
+    const switchBtnX = this.x + 20;
+    const switchBtnY = this.y + 20;
+    const switchBtnSize = 50;
+    
+    // Fond semi-transparent
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.beginPath();
+    ctx.arc(switchBtnX + switchBtnSize/2, switchBtnY + switchBtnSize/2, switchBtnSize/2, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // Icône
+    this.drawSwitchCameraIcon(ctx, switchBtnX, switchBtnY, switchBtnSize);
 
     // Torch
     if (this.torchSupported) {
@@ -374,16 +597,25 @@ class Camera extends Component {
       ctx.fillText('⚡', this.x + this.width - 50, this.y + 45);
     }
 
-    // Bouton switch mode
-    ctx.fillStyle = '#ffffff';
-    ctx.fillRect(this.x + this.width - 80, this.y + 20, this.modeButtonSize, this.modeButtonSize);
-    ctx.fillStyle = '#000';
-    ctx.font = '14px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(this.fitMode.toUpperCase().slice(0, 4), 
-                 this.x + this.width - 80 + this.modeButtonSize/2, 
-                 this.y + 20 + this.modeButtonSize/2);
+    // Bouton switch mode avec icône
+    const btnX = this.x + this.width - 80;
+    const btnY = this.y + 20;
+    
+    // Fond du bouton
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.fillRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    
+    // Bordure
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    
+    // Dessiner l'icône appropriée
+    if (this.fitMode === 'contain') {
+      this.drawContainIcon(ctx, btnX, btnY, this.modeButtonSize);
+    } else {
+      this.drawCoverIcon(ctx, btnX, btnY, this.modeButtonSize);
+    }
 
     ctx.restore();
   }

package/components/DatePicker.js

@@ -35,19 +35,29 @@ class DatePicker extends Component {
     this.onChange = options.onChange;
     this.platform = framework.platform;
     this.label = options.label || 'Sélectionner une date';
-    
-    // Pour iOS: créer un bouton qui ouvre le picker
+  
+    // Options de personnalisation
+    this.headerBgColor = options.headerBgColor || '#6200EE'; // Android dialog header
+    this.inputBgColor = options.inputBgColor || null;
+    this.inputTextColor = options.inputTextColor || null;
+    this.inputBorderColor = options.inputBorderColor || null;
+    this.labelColor = options.labelColor || null;
+    this.inputHeight = options.inputHeight || 50;
+    this.inputRadius = options.inputRadius || (this.platform === 'cupertino' ? 10 : 0);
+    this.fontSize = options.fontSize || null;
+    this.selectedColor = options.selectedColor || '#6200EE'; // Android selected items
+    this.buttonColor = options.buttonColor || '#6200EE'; // Android buttons
+  
+    // Dimensions
     if (this.platform === 'cupertino') {
       this.width = options.width || framework.width - 40;
-      this.height = 50;
       this.pickerModal = null;
-      this.onClick = this.openPicker.bind(this);
     } else {
-      // Pour Android: afficher directement le modal
       this.width = options.width || Math.min(320, framework.width - 40);
-      this.height = 50;
-      this.onClick = this.openPicker.bind(this);
     }
+  
+    this.height = this.inputHeight;
+    this.onClick = this.openPicker.bind(this);
   }
   
   /**
@@ -69,7 +79,6 @@ class DatePicker extends Component {
    
  
   openIOSPicker() {
-    // Créer un modal avec le picker iOS
     const modal = new Modal(this.framework, {
       title: '',
       width: this.framework.width,
@@ -78,8 +87,7 @@ class DatePicker extends Component {
       closeOnOverlayClick: true,
       bgColor: '#F9F9F9'
     });
-    
-    // Créer le picker de date iOS style
+  
     const picker = new IOSDatePickerWheel(this.framework, {
       x: 0,
       y: 20,
@@ -89,22 +97,23 @@ class DatePicker extends Component {
         this.selectedDate = date;
         if (this.onChange) this.onChange(date);
       }
+      // Ajoutez ici d'autres options si IOSDatePickerWheel en supporte
     });
     modal.add(picker);
-    
-    // Bouton Valider
+  
     const btnOK = new Button(this.framework, {
       x: (this.framework.width - 200) / 2,
       y: 230,
       width: 200,
       height: 44,
       text: 'Valider',
-      onClick: () => {
-        modal.hide();
-      }
+      // Personnalisation du bouton si nécessaire
+      bgColor: this.buttonColor,
+      textColor: '#FFFFFF',
+      onClick: () => modal.hide()
     });
     modal.add(btnOK);
-    
+  
     this.framework.add(modal);
     modal.show();
     this.pickerModal = modal;
@@ -115,15 +124,18 @@ class DatePicker extends Component {
    * @private
    */
   openAndroidDialog() {
-    // Créer un dialog Material Design avec calendrier
     const dialog = new AndroidDatePickerDialog(this.framework, {
       selectedDate: this.selectedDate,
       onChange: (date) => {
         this.selectedDate = date;
         if (this.onChange) this.onChange(date);
-      }
+      },
+      // Transmettre toutes les options de couleur
+      headerBgColor: this.headerBgColor,
+      selectedColor: this.selectedColor,
+      buttonColor: this.buttonColor
     });
-    
+  
     this.framework.add(dialog);
     dialog.show();
   }
@@ -134,34 +146,39 @@ class DatePicker extends Component {
    */
   draw(ctx) {
     if (this.platform === 'cupertino') {
-      // Dessiner un bouton iOS
+      // Styles Cupertino
+      const bgColor = this.inputBgColor || '#FFFFFF';
+      const textColor = this.inputTextColor || '#000000';
+      const labelColor = this.labelColor || '#8E8E93';
+      const borderColor = this.inputBorderColor || '#C7C7CC';
+      const fontSize = this.fontSize || 16;
+    
       ctx.save();
-      
+    
       // Background
-      ctx.fillStyle = '#FFFFFF';
-      ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, 10);
+      ctx.fillStyle = bgColor;
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.inputRadius);
       ctx.fill();
-      
-      // Bordure
-      ctx.strokeStyle = '#C7C7CC';
+    
+      // Border
+      ctx.strokeStyle = borderColor;
       ctx.lineWidth = 1;
       ctx.stroke();
-      
+    
       // Label
-      ctx.fillStyle = '#8E8E93';
+      ctx.fillStyle = labelColor;
       ctx.font = '14px -apple-system, sans-serif';
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
       ctx.fillText(this.label, this.x + 15, this.y + this.height / 2 - 10);
-      
-      // Date sélectionnée
-      ctx.fillStyle = '#000000';
-      ctx.font = '16px -apple-system, sans-serif';
+    
+      // Selected date
+      ctx.fillStyle = textColor;
+      ctx.font = `${fontSize}px -apple-system, sans-serif`;
       ctx.fillText(this.formatDate(this.selectedDate), this.x + 15, this.y + this.height / 2 + 10);
-      
+    
       // Chevron
-      ctx.strokeStyle = '#C7C7CC';
+      ctx.strokeStyle = borderColor;
       ctx.lineWidth = 2;
       ctx.lineCap = 'round';
       ctx.beginPath();
@@ -169,23 +186,40 @@ class DatePicker extends Component {
       ctx.lineTo(this.x + this.width - 20, this.y + this.height / 2);
       ctx.lineTo(this.x + this.width - 15, this.y + this.height / 2 - 5);
       ctx.stroke();
-      
+    
       ctx.restore();
     } else {
-      // Dessiner un bouton Material
+      // Styles Material
+      const bgColor = this.inputBgColor || (this.pressed ? '#F5F5F5' : '#FFFFFF');
+      const textColor = this.inputTextColor || '#000000';
+      const labelColor = this.labelColor || '#666666';
+      const borderColor = this.inputBorderColor || '#E0E0E0';
+      const fontSize = this.fontSize || 16;
+      const iconColor = labelColor;
+    
       ctx.save();
-      
+    
       // Background
-      ctx.fillStyle = this.pressed ? '#F5F5F5' : '#FFFFFF';
-      ctx.fillRect(this.x, this.y, this.width, this.height);
-      
-      // Bordure
-      ctx.strokeStyle = '#E0E0E0';
+      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);
+      }
+    
+      // Border
+      ctx.strokeStyle = borderColor;
       ctx.lineWidth = 1;
-      ctx.strokeRect(this.x, this.y, this.width, this.height);
-      
-      // Icône calendrier
-      ctx.strokeStyle = '#666666';
+      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);
+      }
+    
+      // Calendar icon
+      ctx.strokeStyle = iconColor;
       ctx.lineWidth = 2;
       ctx.strokeRect(this.x + 15, this.y + 15, 20, 20);
       ctx.beginPath();
@@ -194,20 +228,20 @@ class DatePicker extends Component {
       ctx.moveTo(this.x + 32, this.y + 12);
       ctx.lineTo(this.x + 32, this.y + 18);
       ctx.stroke();
-      
+    
       // Label
-      ctx.fillStyle = '#666666';
+      ctx.fillStyle = labelColor;
       ctx.font = '12px Roboto, sans-serif';
       ctx.textAlign = 'left';
       ctx.textBaseline = 'top';
       ctx.fillText(this.label, this.x + 45, this.y + 8);
-      
+    
       // Date
-      ctx.fillStyle = '#000000';
-      ctx.font = '16px Roboto, sans-serif';
+      ctx.fillStyle = textColor;
+      ctx.font = `${fontSize}px Roboto, sans-serif`;
       ctx.textBaseline = 'bottom';
       ctx.fillText(this.formatDate(this.selectedDate), this.x + 45, this.y + this.height - 8);
-      
+    
       ctx.restore();
     }
   }