canvasframework 0.5.16 → 0.5.18

package/components/Dialog.js

@@ -1,337 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Dialog Material (Android) & Cupertino (iOS)
- */
-class Dialog extends Component {
-  constructor(framework, options = {}) {
-    super(framework, {
-      x: 0,
-      y: 0,
-      width: framework.width,
-      height: framework.height,
-      visible: false
-    });
-
-    this.platform = framework.platform;
-
-    this.title = options.title || '';
-    this.message = options.message || '';
-    this.buttons = options.buttons || ['OK'];
-    this.onButtonClick = options.onButtonClick;
-
-    this.dialogWidth = Math.min(320, framework.width - 40);
-    this.dialogHeight = 160;
-    this.opacity = 0;
-
-    this.isVisible = false;
-    this.buttonRects = [];
-
-    /* Ripple Android uniquement */
-    this.ripples = [];
-    this._animating = false;
-
-    this.onPress = this.handlePress.bind(this);
-
-    this.messageLines = this.wrapText(
-      this.message,
-      this.dialogWidth - 48,
-      '16px -apple-system, Roboto, sans-serif'
-    );
-
-    if (this.messageLines.length > 2) {
-      this.dialogHeight += (this.messageLines.length - 2) * 22;
-    }
-  }
-
-  /* ---------------- DRAW ---------------- */
-
-  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);
-
-    if (this.platform === 'material') {
-      this.drawMaterial(ctx);
-    } else {
-      this.drawCupertino(ctx); // 👈 TON DESIGN INITIAL
-    }
-
-    ctx.restore();
-  }
-
-  /* ---------------- MATERIAL (ANDROID) ---------------- */
-
-  drawMaterial(ctx) {
-    const x = (this.framework.width - this.dialogWidth) / 2;
-    const y = (this.framework.height - this.dialogHeight) / 2;
-
-    // Card
-    ctx.fillStyle = '#FFF';
-    ctx.shadowColor = 'rgba(0,0,0,0.25)';
-    ctx.shadowBlur = 12;
-    this.roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 6);
-    ctx.fill();
-    ctx.shadowColor = 'transparent';
-
-    // Title
-    ctx.fillStyle = '#000';
-    ctx.font = '500 20px Roboto, sans-serif';
-    ctx.textAlign = 'left';
-    ctx.fillText(this.title, x + 24, y + 36);
-
-    // Message
-    ctx.fillStyle = '#444';
-    ctx.font = '16px Roboto, sans-serif';
-    for (let i = 0; i < this.messageLines.length; i++) {
-      ctx.fillText(this.messageLines[i], x + 24, y + 70 + i * 22);
-    }
-
-    // Buttons
-    this.buttonRects = [];
-    let btnX = x + this.dialogWidth - 16;
-    const btnY = y + this.dialogHeight - 28;
-
-    ctx.font = '500 14px Roboto, sans-serif';
-
-    for (let i = this.buttons.length - 1; i >= 0; i--) {
-      const text = this.buttons[i];
-      const w = ctx.measureText(text).width + 24;
-
-      btnX -= w;
-
-      const rect = {
-        x: btnX,
-        y: btnY - 18,
-        width: w,
-        height: 36,
-        index: i
-      };
-      this.buttonRects[i] = rect;
-
-      // Ripple
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(rect.x, rect.y, rect.width, rect.height);
-      ctx.clip();
-
-      for (const r of this.ripples) {
-        if (r.index === i) {
-          ctx.globalAlpha = r.alpha;
-          ctx.fillStyle = 'rgba(98,0,238,0.25)';
-          ctx.beginPath();
-          ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
-          ctx.fill();
-        }
-      }
-      ctx.restore();
-
-      ctx.fillStyle = '#6200EE';
-      ctx.textAlign = 'center';
-      ctx.fillText(text, btnX + w / 2, btnY);
-
-      btnX -= 8;
-    }
-  }
-
-  /* ---------------- CUPERTINO (iOS) — DESIGN ORIGINAL ---------------- */
-
-  drawCupertino(ctx) {
-    const x = (this.framework.width - this.dialogWidth) / 2;
-    const y = (this.framework.height - this.dialogHeight) / 2;
-
-    // Dialog
-    ctx.fillStyle = '#FFF';
-    ctx.shadowColor = 'rgba(0,0,0,0.3)';
-    ctx.shadowBlur = 20;
-    this.roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 12);
-    ctx.fill();
-    ctx.shadowColor = 'transparent';
-
-    // Title
-    ctx.fillStyle = '#000';
-    ctx.font = '600 18px -apple-system, sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText(this.title, x + this.dialogWidth / 2, y + 38);
-
-    // Message
-    ctx.fillStyle = '#666';
-    ctx.font = '16px -apple-system, sans-serif';
-    for (let i = 0; i < this.messageLines.length; i++) {
-      ctx.fillText(
-        this.messageLines[i],
-        x + this.dialogWidth / 2,
-        y + 72 + i * 22
-      );
-    }
-
-    // Divider
-    const dividerY = y + this.dialogHeight - 54;
-    ctx.strokeStyle = '#E5E5EA';
-    ctx.beginPath();
-    ctx.moveTo(x, dividerY);
-    ctx.lineTo(x + this.dialogWidth, dividerY);
-    ctx.stroke();
-
-    // Buttons
-    this.buttonRects = [];
-    const btnW = this.dialogWidth / this.buttons.length;
-    const btnH = 54;
-
-    for (let i = 0; i < this.buttons.length; i++) {
-      const bx = x + i * btnW;
-      const by = dividerY;
-
-      this.buttonRects.push({
-        x: bx,
-        y: by,
-        width: btnW,
-        height: btnH
-      });
-
-      ctx.fillStyle =
-        i === this.buttons.length - 1 ? '#007AFF' : '#8E8E93';
-
-      ctx.font = '600 17px -apple-system, sans-serif';
-      ctx.textAlign = 'center';
-      ctx.fillText(this.buttons[i], bx + btnW / 2, by + btnH / 2);
-
-      if (i < this.buttons.length - 1) {
-        ctx.strokeStyle = '#E5E5EA';
-        ctx.beginPath();
-        ctx.moveTo(bx + btnW, by);
-        ctx.lineTo(bx + btnW, by + btnH);
-        ctx.stroke();
-      }
-    }
-  }
-
-  /* ---------------- INTERACTION ---------------- */
-
-  handlePress(x, y) {
-    for (let i = 0; i < this.buttonRects.length; i++) {
-      const r = this.buttonRects[i];
-      if (
-        x >= r.x && x <= r.x + r.width &&
-        y >= r.y && y <= r.y + r.height
-      ) {
-        if (this.platform === 'material') {
-          const max = Math.max(r.width, r.height) * 1.4;
-          this.ripples.push({
-            index: i,
-            x,
-            y,
-            radius: 0,
-            alpha: 0.35,
-            max
-          });
-          this.animateRipples();
-        }
-
-        setTimeout(() => {
-          this.onButtonClick?.(i, this.buttons[i]);
-          this.hide();
-        }, 120);
-        return;
-      }
-    }
-
-    this.hide();
-  }
-
-  animateRipples() {
-    if (this._animating) return;
-    this._animating = true;
-
-    const step = () => {
-      let active = false;
-
-      for (const r of this.ripples) {
-        r.radius += r.max * 0.12;
-        r.alpha -= 0.04;
-        if (r.alpha > 0) active = true;
-      }
-
-      this.ripples = this.ripples.filter(r => r.alpha > 0);
-
-      if (active) requestAnimationFrame(step);
-      else this._animating = false;
-    };
-
-    requestAnimationFrame(step);
-  }
-
-  /* ---------------- SHOW / HIDE ---------------- */
-
-  show() {
-    this.isVisible = true;
-    this.visible = true;
-    this.opacity = 0;
-
-    const fade = () => {
-      this.opacity += 0.1;
-      if (this.opacity < 1) requestAnimationFrame(fade);
-    };
-    fade();
-  }
-
-  hide() {
-    const fade = () => {
-      this.opacity -= 0.1;
-      if (this.opacity > 0) requestAnimationFrame(fade);
-      else {
-        this.isVisible = false;
-        this.visible = false;
-        this.framework.remove(this);
-      }
-    };
-    fade();
-  }
-
-  /* ---------------- UTILS ---------------- */
-
-  wrapText(text, maxWidth, font) {
-    const ctx = this.framework.ctx;
-    ctx.font = font;
-
-    const words = text.split(' ');
-    const lines = [];
-    let line = words[0];
-
-    for (let i = 1; i < words.length; i++) {
-      const test = line + ' ' + words[i];
-      if (ctx.measureText(test).width < maxWidth) line = test;
-      else {
-        lines.push(line);
-        line = words[i];
-      }
-    }
-    lines.push(line);
-    return lines;
-  }
-
-  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() {
-    return this.isVisible;
-  }
-}
-
-export default Dialog;

package/components/Divider.js

@@ -1,125 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Séparateur visuel horizontal ou vertical
- * @class
- * @extends Component
- * @property {string} orientation - 'horizontal' ou 'vertical'
- * @property {number} thickness - Épaisseur du divider
- * @property {string} color - Couleur du divider
- * @property {number} margin - Marge autour du divider
- * @property {string} style - 'solid', 'dashed', ou 'dotted'
- * @property {boolean} hasInset - Si true, ajoute un inset pour les listes
- * @property {number} insetStart - Début de l'inset (px)
- * @property {string} variant - 'full', 'inset', 'middle'
- */
-class Divider extends Component {
-  /**
-   * Crée une instance de Divider
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.orientation='horizontal'] - Orientation
-   * @param {number} [options.thickness] - Épaisseur (auto selon platform)
-   * @param {string} [options.color] - Couleur (auto selon platform)
-   * @param {number} [options.margin=0] - Marge
-   * @param {string} [options.style='solid'] - Style de ligne
-   * @param {string} [options.variant='full'] - Variante
-   * @param {number} [options.insetStart=16] - Début de l'inset
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-    
-    this.orientation = options.orientation || 'horizontal';
-    this.margin = options.margin || 0;
-    this.style = options.style || 'solid';
-    this.variant = options.variant || 'full';
-    this.insetStart = options.insetStart || 16;
-    
-    const platform = framework.platform;
-    
-    // Styles selon la plateforme
-    if (platform === 'material') {
-      this.thickness = options.thickness || 1;
-      this.color = options.color || 'rgba(0, 0, 0, 0.12)';
-    } else {
-      this.thickness = options.thickness || 0.5;
-      this.color = options.color || 'rgba(60, 60, 67, 0.29)';
-    }
-    
-    // Ajuster les dimensions selon l'orientation
-    if (this.orientation === 'horizontal') {
-      this.height = this.thickness + (this.margin * 2);
-    } else {
-      this.width = this.thickness + (this.margin * 2);
-    }
-  }
-
-  /**
-   * Dessine le divider
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    let startX = this.x;
-    let startY = this.y;
-    let endX = this.x;
-    let endY = this.y;
-    
-    if (this.orientation === 'horizontal') {
-      startX = this.x;
-      endX = this.x + this.width;
-      startY = endY = this.y + this.margin + this.thickness / 2;
-      
-      // Variantes
-      if (this.variant === 'inset') {
-        startX += this.insetStart;
-      } else if (this.variant === 'middle') {
-        const inset = this.width * 0.1;
-        startX += inset;
-        endX -= inset;
-      }
-    } else {
-      startY = this.y;
-      endY = this.y + this.height;
-      startX = endX = this.x + this.margin + this.thickness / 2;
-      
-      // Variantes
-      if (this.variant === 'inset') {
-        startY += this.insetStart;
-      } else if (this.variant === 'middle') {
-        const inset = this.height * 0.1;
-        startY += inset;
-        endY -= inset;
-      }
-    }
-    
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = this.thickness;
-    
-    // Styles de ligne
-    if (this.style === 'dashed') {
-      ctx.setLineDash([8, 4]);
-    } else if (this.style === 'dotted') {
-      ctx.setLineDash([2, 4]);
-    }
-    
-    ctx.beginPath();
-    ctx.moveTo(startX, startY);
-    ctx.lineTo(endX, endY);
-    ctx.stroke();
-    
-    ctx.setLineDash([]);
-    ctx.restore();
-  }
-
-  /**
-   * Vérifie si un point est dans les limites (non cliquable)
-   * @returns {boolean} Toujours false
-   */
-  isPointInside() {
-    return false;
-  }
-}
-
-export default Divider;