canvasframework 0.3.6

package/components/SearchInput.js

@@ -0,0 +1,315 @@
+import Input from './Input.js';
+
+/**
+ * Champ de saisie pour la recherche
+ * @class
+ * @extends Input
+ * @property {Function} onSearch - Callback lors de la recherche
+ * @property {Function} onClear - Callback lors de l'effacement
+ * @property {boolean} showClearButton - Afficher le bouton d'effacement
+ */
+class SearchInput extends Input {
+  /**
+   * Crée une instance de SearchInput
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Function} [options.onSearch] - Callback lors de la recherche
+   * @param {Function} [options.onClear] - Callback lors de l'effacement
+   * @param {string} [options.searchIcon] - Icône de recherche
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      placeholder: options.placeholder || 'Rechercher...',
+      ...options
+    });
+    
+    this.onSearch = options.onSearch;
+    this.onClear = options.onClear;
+    this.searchIcon = options.searchIcon || '🔍';
+    this.clearIcon = '×';
+    this.showClearButton = false;
+    
+    // Bind des méthodes supplémentaires
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+
+  /**
+   * Configure l'input HTML caché (surcharge)
+   */
+  setupHiddenInput() {
+    if (this.hiddenInput) return;
+    
+    // Appeler la méthode parent
+    super.setupHiddenInput();
+    
+    if (this.hiddenInput) {
+      // Ajouter l'événement keydown pour la touche Entrée
+      this.hiddenInput.addEventListener('keydown', this.handleKeyDown);
+    }
+  }
+
+  /**
+   * Gère la pression des touches
+   * @param {KeyboardEvent} e - Événement clavier
+   * @private
+   */
+  handleKeyDown(e) {
+    if (e.key === 'Enter' && this.onSearch) {
+      this.onSearch(this.value);
+    }
+  }
+
+  /**
+   * Gère le clic sur le bouton d'effacement
+   * @private
+   */
+  handleClearClick() {
+    const hadValue = this.value.length > 0;
+    this.value = '';
+    
+    if (this.hiddenInput) {
+      this.hiddenInput.value = '';
+    }
+    
+    // Appeler les callbacks
+    if (hadValue && this.onClear) {
+      this.onClear();
+    }
+    
+    // Mettre à jour l'affichage
+    this.showClearButton = false;
+    
+    // Redonner le focus
+    this.onFocus();
+  }
+
+  /**
+   * Gère la saisie (surcharge)
+   */
+  onInputUpdate() {
+    // Mettre à jour l'affichage du bouton d'effacement
+    this.showClearButton = this.value.length > 0;
+    
+    // Appeler le callback de recherche au fur et à mesure (optionnel)
+    if (this.value.length > 0 && this.onSearch) {
+      // Délai pour éviter de déclencher à chaque frappe
+      clearTimeout(this._searchTimeout);
+      this._searchTimeout = setTimeout(() => {
+        if (this.onSearch) {
+          this.onSearch(this.value);
+        }
+      }, 300);
+    }
+  }
+
+  /**
+   * Gère le clic (surcharge)
+   */
+  onClick() {
+    // Vérifier si on a cliqué sur le bouton d'effacement
+    if (this.showClearButton && this.isPointInClearButton(this.lastClickX, this.lastClickY)) {
+      this.handleClearClick();
+      return;
+    }
+    
+    // Sinon, focus normal
+    super.onFocus();
+  }
+
+  /**
+   * Gère le focus (surcharge)
+   */
+  onFocus() {
+    super.onFocus();
+    
+    // Mettre à jour l'état du bouton d'effacement
+    this.showClearButton = this.value.length > 0;
+  }
+
+  /**
+   * Gère la pression (surcharge pour capturer les coordonnées)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  onPress(x, y) {
+    // Stocker les coordonnées du dernier clic
+    this.lastClickX = x;
+    this.lastClickY = y;
+    
+    // Appeler la méthode parent
+    super.onPress(x, y);
+  }
+
+  /**
+   * Vérifie si un point est dans le bouton d'effacement
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le bouton
+   */
+  isPointInClearButton(x, y) {
+    if (!this.showClearButton) return false;
+    
+    // Position du bouton d'effacement (à droite)
+    const clearButtonSize = this.height * 0.6;
+    const clearButtonX = this.x + this.width - clearButtonSize - 10;
+    const clearButtonY = this.y + (this.height - clearButtonSize) / 2;
+    
+    return x >= clearButtonX && 
+           x <= clearButtonX + clearButtonSize && 
+           y >= clearButtonY && 
+           y <= clearButtonY + clearButtonSize;
+  }
+
+  /**
+   * Dessine le champ de recherche (surcharge)
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Style selon la plateforme
+    if (this.platform === 'material') {
+      ctx.strokeStyle = this.focused ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = this.focused ? 2 : 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y + this.height);
+      ctx.lineTo(this.x + this.width, this.y + this.height);
+      ctx.stroke();
+    } else {
+      // iOS style avec coins arrondis
+      ctx.fillStyle = this.focused ? '#FFFFFF' : '#F2F2F7';
+      ctx.strokeStyle = this.focused ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 1;
+      
+      // Fond
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 10);
+      ctx.fill();
+      
+      // Bordure
+      ctx.stroke();
+    }
+    
+    // Icône de recherche (à gauche)
+    ctx.fillStyle = '#999999';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.searchIcon, this.x + 25, this.y + this.height / 2);
+    
+    // Texte
+    ctx.fillStyle = this.value ? '#000000' : '#999999';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    
+    // Calculer la largeur disponible pour le texte
+    const leftPadding = 50; // Pour l'icône de recherche
+    const rightPadding = this.showClearButton ? 50 : 20; // Pour le bouton d'effacement
+    const maxTextWidth = this.width - leftPadding - rightPadding;
+    
+    const displayText = this.value || this.placeholder;
+    
+    // Tronquer le texte si nécessaire
+    let textToShow = displayText;
+    let textWidth = ctx.measureText(textToShow).width;
+    
+    if (textWidth > maxTextWidth) {
+      // Ajouter "..." à la fin
+      while (textWidth > maxTextWidth && textToShow.length > 0) {
+        textToShow = textToShow.substring(0, textToShow.length - 1);
+        textWidth = ctx.measureText(textToShow + '...').width;
+      }
+      if (textToShow.length > 0) {
+        textToShow += '...';
+      }
+    }
+    
+    // Couleur différente pour le placeholder
+    if (!this.value) {
+      ctx.fillStyle = '#999999';
+    }
+    
+    ctx.fillText(textToShow, this.x + leftPadding, this.y + this.height / 2);
+    
+    // Bouton d'effacement (si il y a du texte)
+    if (this.showClearButton) {
+      const clearButtonSize = this.height * 0.6;
+      const clearButtonX = this.x + this.width - clearButtonSize - 15;
+      const clearButtonY = this.y + (this.height - clearButtonSize) / 2;
+      
+      // Cercle de fond
+      ctx.fillStyle = '#E0E0E0';
+      ctx.beginPath();
+      ctx.arc(
+        clearButtonX + clearButtonSize / 2,
+        clearButtonY + clearButtonSize / 2,
+        clearButtonSize / 2,
+        0,
+        Math.PI * 2
+      );
+      ctx.fill();
+      
+      // Croix
+      ctx.fillStyle = '#666666';
+      ctx.font = `bold ${clearButtonSize * 0.6}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(
+        this.clearIcon,
+        clearButtonX + clearButtonSize / 2,
+        clearButtonY + clearButtonSize / 2
+      );
+    }
+    
+    // Curseur (si focus et a du texte)
+    if (this.focused && this.cursorVisible && this.value) {
+      const textWidth = ctx.measureText(this.value).width;
+      const cursorX = this.x + leftPadding + Math.min(textWidth, maxTextWidth);
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(cursorX, this.y + 10, 2, this.height - 20);
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Vérifie si un point est dans les limites (surcharge)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans l'input
+   */
+  isPointInside(x, y) {
+    // Vérifier l'input principal
+    const inInput = x >= this.x && 
+                    x <= this.x + this.width && 
+                    y >= this.y && 
+                    y <= this.y + this.height;
+    
+    // Vérifier aussi le bouton d'effacement
+    const inClearButton = this.isPointInClearButton(x, y);
+    
+    return inInput || inClearButton;
+  }
+
+  /**
+   * Nettoie les ressources (surcharge)
+   */
+  destroy() {
+    // Nettoyer le timeout de recherche
+    if (this._searchTimeout) {
+      clearTimeout(this._searchTimeout);
+    }
+    
+    // Retirer l'écouteur keydown
+    if (this.hiddenInput) {
+      this.hiddenInput.removeEventListener('keydown', this.handleKeyDown);
+    }
+    
+    // Appeler la méthode parent
+    super.destroy();
+  }
+}
+
+export default SearchInput;

package/components/SegmentedControl.js

@@ -0,0 +1,202 @@
+import Component from '../core/Component.js';
+
+/**
+ * Segmented Control (Material + Cupertino)
+ * @class
+ * @extends Component
+ * @param {CanvasFramework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {Array<{text: string, onClick?: Function}>} [options.buttons] - Liste des segments
+ * @param {number} [options.selectedIndex=0] - Segment sélectionné par défaut
+ * @param {number} [options.height=40] - Hauteur du contrôle
+ * @param {number} [options.spacing=1] - Espacement entre les segments
+ */
+class SegmentedControl extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /**
+     * Plateforme : "material" ou "cupertino"
+     * @type {string}
+     */
+    this.platform = framework.platform;
+
+    /**
+     * Liste des boutons
+     * @type {Array<{text: string, onClick?: Function}>}
+     */
+    this.buttons = options.buttons || [{ text: 'One' }, { text: 'Two' }, { text: 'Three' }];
+
+    /**
+     * Index du segment sélectionné
+     * @type {number}
+     */
+    this.selectedIndex = options.selectedIndex || 0;
+
+    /**
+     * Hauteur du contrôle
+     * @type {number}
+     */
+    this.height = options.height || 40;
+
+    /**
+     * Espacement entre segments
+     * @type {number}
+     */
+    this.spacing = options.spacing || 1;
+
+    /**
+     * Ripples Material
+     * @type {Array<{x: number, y: number, index: number, radius: number, maxRadius: number, opacity: number}>}
+     */
+    this.ripples = [];
+
+    /**
+     * Index temporaire pressé pour Cupertino
+     * @type {number|null}
+     */
+    this.pressedIndex = null;
+  }
+
+  /**
+   * Gère la pression sur un segment
+   * @param {number} x - Coordonnée X du clic
+   * @param {number} y - Coordonnée Y du clic
+   */
+  handlePress(x, y) {
+    const index = this.getButtonIndexAt(x, y);
+    if (index !== null) {
+      if (this.platform === 'material') {
+        const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+        const btnX = this.x + index * (btnWidth + this.spacing);
+        this.ripples.push({
+          x: x - btnX,
+          y: y - this.y,
+          index: index,
+          radius: 0,
+          maxRadius: Math.max(btnWidth, this.height) * 1.5,
+          opacity: 1
+        });
+        this.animateRipple();
+      } else {
+        this.pressedIndex = index;
+        setTimeout(() => this.pressedIndex = null, 150);
+      }
+
+      this.selectedIndex = index;
+      if (this.buttons[index].onClick) this.buttons[index].onClick(index);
+    }
+  }
+
+  /**
+   * Anime les ripples Material
+   * @private
+   */
+  animateRipple() {
+    const animate = () => {
+      let active = false;
+      for (let ripple of this.ripples) {
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += ripple.maxRadius / 15;
+          active = true;
+        }
+        if (ripple.radius >= ripple.maxRadius * 0.5) ripple.opacity -= 0.05;
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (active) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  /**
+   * Retourne l'index du bouton sous un point donné
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {number|null} Index du segment ou null
+   * @private
+   */
+  getButtonIndexAt(x, y) {
+    const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+    if (y < this.y || y > this.y + this.height) return null;
+    for (let i = 0; i < this.buttons.length; i++) {
+      const btnX = this.x + i * (btnWidth + this.spacing);
+      if (x >= btnX && x <= btnX + btnWidth) return i;
+    }
+    return null;
+  }
+
+  /**
+   * Dessine le SegmentedControl
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+
+    this.buttons.forEach((btn, i) => {
+      const btnX = this.x + i * (btnWidth + this.spacing);
+
+      // Background
+      if (this.platform === 'material') {
+        ctx.fillStyle = this.selectedIndex === i ? '#6200EE' : '#E0E0E0';
+      } else {
+        ctx.fillStyle = this.selectedIndex === i ? '#007AFF' : '#F0F0F0';
+        if (this.pressedIndex === i) ctx.fillStyle = '#D9D9D9';
+      }
+
+      const radius = this.height / 2;
+      ctx.beginPath();
+      if (i === 0) {
+        ctx.moveTo(btnX + radius, this.y);
+        ctx.lineTo(btnX + btnWidth, this.y);
+        ctx.lineTo(btnX + btnWidth, this.y + this.height);
+        ctx.lineTo(btnX + radius, this.y + this.height);
+        ctx.quadraticCurveTo(btnX, this.y + this.height, btnX, this.y + this.height - radius);
+        ctx.lineTo(btnX, this.y + radius);
+        ctx.quadraticCurveTo(btnX, this.y, btnX + radius, this.y);
+      } else if (i === this.buttons.length - 1) {
+        ctx.moveTo(btnX, this.y);
+        ctx.lineTo(btnX + btnWidth - radius, this.y);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y, btnX + btnWidth, this.y + radius);
+        ctx.lineTo(btnX + btnWidth, this.y + this.height - radius);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y + this.height, btnX + btnWidth - radius, this.y + this.height);
+        ctx.lineTo(btnX, this.y + this.height);
+      } else {
+        ctx.rect(btnX, this.y, btnWidth, this.height);
+      }
+      ctx.fill();
+
+      // Texte
+      ctx.fillStyle = this.platform === 'material'
+        ? (this.selectedIndex === i ? '#FFF' : '#000')
+        : (this.selectedIndex === i ? '#FFF' : '#000');
+      ctx.font = `${this.height / 2}px -apple-system, Roboto, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(btn.text || `Button ${i + 1}`, btnX + btnWidth / 2, this.y + this.height / 2);
+    });
+
+    // Ripples Material
+    if (this.platform === 'material' && this.ripples.length) {
+      ctx.save();
+      this.ripples.forEach(r => {
+        const btnX = this.x + r.index * (btnWidth + this.spacing);
+        ctx.beginPath();
+        ctx.arc(btnX + r.x, this.y + r.y, r.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255,255,255,${r.opacity})`;
+        ctx.fill();
+      });
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Vérifie si un point est dans le contrôle
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si un segment est touché
+   */
+  isPointInside(x, y) {
+    return this.getButtonIndexAt(x, y) !== null;
+  }
+}
+
+export default SegmentedControl;

package/components/Select.js

@@ -0,0 +1,199 @@
+import Component from '../core/Component.js';
+import SelectDialog from '../components/SelectDialog.js';
+
+/**
+ * Composant de sélection déroulante (dropdown)
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {string[]} [options.options=[]] - Liste des options
+ * @param {number} [options.selectedIndex=0] - Index de l'option sélectionnée
+ * @param {string} [options.placeholder='Select...'] - Texte par défaut
+ * @param {number} [options.fontSize=16] - Taille de police
+ * @param {Function} [options.onChange] - Callback lors du changement de sélection
+ * @example
+ * const select = new Select(framework, {
+ *   options: ['Option 1', 'Option 2', 'Option 3'],
+ *   placeholder: 'Choisissez une option',
+ *   onChange: (value, index) => console.log('Selected:', value)
+ * });
+ */
+class Select extends Component {
+  /**
+   * @constructs Select
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /** @type {string[]} */
+    this.options = options.options || [];
+    /** @type {number} */
+    this.selectedIndex = options.selectedIndex || 0;
+    /** @type {string} */
+    this.placeholder = options.placeholder || 'Select...';
+    /** @type {string} */
+    this.platform = framework.platform;
+    /** @type {number} */
+    this.fontSize = options.fontSize || 16;
+    /** @type {Function|undefined} */
+    this.onChange = options.onChange;
+    /** @type {boolean} */
+    this.isOpen = false;
+    /** @type {SelectDialog|null} */
+    this.dialog = null;
+    
+    // Définir onClick pour le Select
+    this.onClick = this.toggleMenu.bind(this);
+  }
+  
+  /**
+   * Ouvre ou ferme le menu de sélection
+   */
+  toggleMenu() {
+    if (this.isOpen && this.dialog) {
+      this.closeMenu();
+      return;
+    }
+    
+    this.openMenu();
+  }
+  
+  /**
+   * Ouvre le menu de sélection (affiche le modal)
+   */
+  openMenu() {
+    if (this.isOpen) return;
+    
+    this.dialog = new SelectDialog(this.framework, {
+      title: this.placeholder,
+      options: this.options,
+      selectedIndex: this.selectedIndex,
+      onSelect: (index, value) => {
+        this.selectedIndex = index;
+        if (this.onChange) {
+          this.onChange(value, index);
+        }
+        this.closeMenu();
+      }
+    });
+    
+    this.framework.add(this.dialog);
+    this.isOpen = true;
+  }
+  
+  /**
+   * Ferme le menu de sélection
+   */
+  closeMenu() {
+    if (this.dialog) {
+      this.dialog.hide();
+      this.dialog = null;
+    }
+    this.isOpen = false;
+  }
+  
+  /**
+   * Dessine le composant Select
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const selectedValue = this.options[this.selectedIndex] || this.placeholder;
+    
+    if (this.platform === 'material') {
+      // Material Design Select
+      ctx.fillStyle = this.pressed ? '#F5F5F5' : '#FFFFFF';
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      
+      ctx.strokeStyle = this.isOpen ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = this.isOpen ? 2 : 1;
+      ctx.strokeRect(this.x, this.y, this.width, this.height);
+      
+      // Texte
+      ctx.fillStyle = selectedValue === this.placeholder ? '#999999' : '#000000';
+      ctx.font = `${this.fontSize}px Roboto, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(selectedValue, this.x + 15, this.y + this.height / 2);
+      
+      // Flèche
+      ctx.fillStyle = '#666666';
+      const arrowX = this.x + this.width - 20;
+      const arrowY = this.y + this.height / 2;
+      ctx.beginPath();
+      ctx.moveTo(arrowX - 5, arrowY - 3);
+      ctx.lineTo(arrowX + 5, arrowY - 3);
+      ctx.lineTo(arrowX, arrowY + 3);
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      // Cupertino Select
+      ctx.fillStyle = '#FFFFFF';
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 8);
+      ctx.fill();
+      
+      ctx.strokeStyle = this.isOpen ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      
+      // Texte
+      ctx.fillStyle = selectedValue === this.placeholder ? '#999999' : '#000000';
+      ctx.font = `${this.fontSize}px -apple-system, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(selectedValue, this.x + 15, this.y + this.height / 2);
+      
+      // Chevron
+      ctx.strokeStyle = '#007AFF';
+      ctx.lineWidth = 2;
+      const chevronX = this.x + this.width - 20;
+      const chevronY = this.y + this.height / 2;
+      ctx.beginPath();
+      ctx.moveTo(chevronX - 5, chevronY - 3);
+      ctx.lineTo(chevronX, chevronY + 2);
+      ctx.lineTo(chevronX + 5, chevronY - 3);
+      ctx.stroke();
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Dessine un rectangle avec des coins arrondis
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @param {number} width - Largeur
+   * @param {number} height - Hauteur
+   * @param {number} radius - Rayon des coins
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+  }
+  
+  /**
+   * Vérifie si un point est à l'intérieur du composant
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @returns {boolean} True si le point est à l'intérieur
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default Select;