canvasframework 0.5.23 → 0.5.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/components/Card.js +101 -119
  2. package/package.json +1 -1
package/components/Card.js CHANGED
@@ -1,15 +1,18 @@
1
1
  import Component from '../core/Component.js';
2
+
2
3
  /**
3
- * Carte avec ombre et contenu
4
+ * Carte avec système de layout, ombre et bordures arrondies
4
5
  * @class
5
6
  * @extends Component
6
- * @property {Component[]} children - Enfants de la carte
7
+ * @property {Component[]} children - Enfants
7
8
  * @property {number} padding - Padding interne
9
+ * @property {number} gap - Espacement entre enfants
10
+ * @property {string} direction - Direction ('column' ou 'row')
11
+ * @property {string} align - Alignement ('start', 'center', 'end')
8
12
  * @property {string} bgColor - Couleur de fond
9
- * @property {number} elevation - Élévation (ombre)
10
13
  * @property {number} borderRadius - Rayon des coins
11
- * @property {boolean} clipContent - Clip le contenu
12
- * @property {boolean} clickableChildren - Active les clics sur les enfants
14
+ * @property {number} elevation - Élévation (ombre)
15
+ * @property {boolean} clipContent - Clip le contenu aux bordures
13
16
  */
14
17
  class Card extends Component {
15
18
  /**
@@ -17,134 +20,122 @@ class Card extends Component {
17
20
  * @param {CanvasFramework} framework - Framework parent
18
21
  * @param {Object} [options={}] - Options de configuration
19
22
  * @param {number} [options.padding=16] - Padding interne
23
+ * @param {number} [options.gap=0] - Espacement entre enfants
24
+ * @param {string} [options.direction='column'] - Direction
25
+ * @param {string} [options.align='start'] - Alignement
20
26
  * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
21
- * @param {number} [options.elevation=2] - Élévation (ombre)
22
27
  * @param {number} [options.borderRadius] - Rayon des coins (auto selon platform)
28
+ * @param {number} [options.elevation=2] - Élévation (ombre)
23
29
  * @param {boolean} [options.clipContent=true] - Clip le contenu
24
- * @param {boolean} [options.clickableChildren=true] - Active les clics enfants
25
30
  */
26
31
  constructor(framework, options = {}) {
27
32
  super(framework, options);
28
33
  this.children = [];
29
- this.padding = options.padding || 16;
34
+ this.padding = options.padding !== undefined ? options.padding : 16;
35
+ this.gap = options.gap || 0;
36
+ this.direction = options.direction || 'column'; // 'column' ou 'row'
37
+ this.align = options.align || 'start'; // 'start', 'center', 'end'
30
38
  this.bgColor = options.bgColor || '#FFFFFF';
31
- this.elevation = options.elevation || 2;
32
- this.borderRadius = options.borderRadius || (framework.platform === 'material' ? 4 : 12);
39
+ this.borderRadius = options.borderRadius !== undefined
40
+ ? options.borderRadius
41
+ : (framework.platform === 'material' ? 4 : 12);
42
+ this.elevation = options.elevation !== undefined ? options.elevation : 2;
33
43
  this.clipContent = options.clipContent !== false;
34
- this.clickableChildren = options.clickableChildren !== false; // NOUVEAU: activer/désactiver les enfants cliquables
35
44
  }
36
45
 
37
46
  /**
38
- * Ajoute un enfant à la carte
47
+ * Ajoute un enfant
39
48
  * @param {Component} child - Composant enfant
40
49
  * @returns {Component} L'enfant ajouté
41
50
  */
42
51
  add(child) {
43
- // Ajuster les coordonnées de l'enfant pour qu'elles soient relatives à la Card
44
- child.x = child.x || 0;
45
- child.y = child.y || 0;
46
52
  this.children.push(child);
47
-
48
- // Marquer l'enfant comme appartenant à cette Card
49
- child.parentCard = this;
50
-
53
+ this.layout();
51
54
  return child;
52
55
  }
53
56
 
54
57
  /**
55
- * Dessine la carte et ses enfants
56
- * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
58
+ * Organise les enfants selon le layout
59
+ * @private
57
60
  */
58
- /**
59
- * Dessine la carte et ses enfants
60
- * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
61
- */
62
- draw(ctx) {
63
- ctx.save();
64
-
65
- // Ombre
66
- if (this.elevation > 0) {
67
- ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
68
- ctx.shadowBlur = this.elevation * 3;
69
- ctx.shadowOffsetY = this.elevation;
70
- }
71
-
72
- // Background
73
- ctx.fillStyle = this.bgColor;
74
- ctx.beginPath();
75
- this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
76
- ctx.fill();
77
-
78
- ctx.shadowColor = 'transparent';
79
-
80
- // Clipping pour empêcher le contenu de déborder
81
- if (this.clipContent) {
82
- ctx.beginPath();
83
- this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
84
- ctx.clip();
85
- }
86
-
87
- // Children - dessinés relativement à la Card
88
- for (let child of this.children) {
89
- if (child.visible) {
90
- // *** FIX : Utiliser ctx.translate au lieu de modifier child.x/y ***
91
- ctx.save();
92
- ctx.translate(this.x + this.padding, this.y + this.padding);
93
-
94
- // Dessiner l'enfant (ses coordonnées sont déjà relatives)
95
- child.draw(ctx);
96
-
97
- ctx.restore();
98
- }
99
- }
100
-
101
- ctx.restore();
102
- }
61
+ layout() {
62
+ let currentX = this.padding;
63
+ let currentY = this.padding;
64
+
65
+ for (let child of this.children) {
66
+ if (this.direction === 'column') {
67
+ child.x = currentX;
68
+ child.y = currentY;
69
+ if (this.align === 'center') {
70
+ child.x = (this.width - child.width) / 2;
71
+ } else if (this.align === 'end') {
72
+ child.x = this.width - child.width - this.padding;
73
+ }
74
+ currentY += child.height + this.gap;
75
+ } else {
76
+ child.x = currentX;
77
+ child.y = currentY;
78
+ if (this.align === 'center') {
79
+ child.y = (this.height - child.height) / 2;
80
+ } else if (this.align === 'end') {
81
+ child.y = this.height - child.height - this.padding;
82
+ }
83
+ currentX += child.width + this.gap;
84
+ }
85
+ }
86
+ }
103
87
 
104
88
  /**
105
- * Vérifie les clics sur les enfants
106
- * @param {number} x - Coordonnée X
107
- * @param {number} y - Coordonnée Y
108
- * @returns {boolean} True si un enfant a été cliqué
109
- * @private
110
- */
111
- checkChildClick(x, y) {
112
- // Ajuster y avec le scrollOffset
113
- const adjustedY = y - (this.framework.scrollOffset || 0);
114
-
115
- // Calculer les coordonnées de base de la Card
116
- const baseX = this.x + this.padding;
117
- const baseY = this.y + this.padding;
118
-
119
- // Vérifier chaque enfant (du dernier au premier pour respecter z-index)
120
- for (let i = this.children.length - 1; i >= 0; i--) {
121
- const child = this.children[i];
122
-
123
- if (!child.visible) continue;
124
-
125
- // Coordonnées absolues de l'enfant
126
- const childAbsX = baseX + child.x;
127
- const childAbsY = baseY + child.y;
128
-
129
- // Vérifier si le clic est dans l'enfant
130
- if (adjustedY >= childAbsY &&
131
- adjustedY <= childAbsY + child.height &&
132
- x >= childAbsX &&
133
- x <= childAbsX + child.width) {
134
-
135
- // Déclencher onClick ou onPress
136
- if (child.onClick) {
137
- child.onClick();
138
- return true;
139
- } else if (child.onPress) {
140
- child.onPress(x, adjustedY);
141
- return true;
142
- }
143
- }
144
- }
145
-
146
- return false;
147
- }
89
+ * Dessine la carte et ses enfants
90
+ * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
91
+ */
92
+ draw(ctx) {
93
+ ctx.save();
94
+
95
+ // Ombre (elevation)
96
+ if (this.elevation > 0) {
97
+ ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
98
+ ctx.shadowBlur = this.elevation * 3;
99
+ ctx.shadowOffsetY = this.elevation;
100
+ }
101
+
102
+ // Background
103
+ if (this.bgColor !== 'transparent') {
104
+ ctx.fillStyle = this.bgColor;
105
+ if (this.borderRadius > 0) {
106
+ ctx.beginPath();
107
+ this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
108
+ ctx.fill();
109
+ } else {
110
+ ctx.fillRect(this.x, this.y, this.width, this.height);
111
+ }
112
+ }
113
+
114
+ // Réinitialiser l'ombre
115
+ ctx.shadowColor = 'transparent';
116
+ ctx.shadowBlur = 0;
117
+ ctx.shadowOffsetY = 0;
118
+
119
+ // Clipping (optionnel)
120
+ if (this.clipContent && this.borderRadius > 0) {
121
+ ctx.beginPath();
122
+ this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
123
+ ctx.clip();
124
+ }
125
+
126
+ // Children - coordonnées relatives à la Card
127
+ ctx.save();
128
+ ctx.translate(this.x, this.y);
129
+
130
+ for (let child of this.children) {
131
+ if (child.visible) {
132
+ child.draw(ctx);
133
+ }
134
+ }
135
+
136
+ ctx.restore();
137
+ ctx.restore();
138
+ }
148
139
 
149
140
  /**
150
141
  * Dessine un rectangle avec coins arrondis
@@ -169,7 +160,7 @@ class Card extends Component {
169
160
  ctx.quadraticCurveTo(x, y, x + radius, y);
170
161
  ctx.closePath();
171
162
  }
172
-
163
+
173
164
  /**
174
165
  * Vérifie si un point est dans les limites
175
166
  * @param {number} x - Coordonnée X
@@ -182,15 +173,6 @@ class Card extends Component {
182
173
  y >= this.y &&
183
174
  y <= this.y + this.height;
184
175
  }
185
-
186
- /**
187
- * Gère le clic sur la carte
188
- * @private
189
- */
190
- onClick() {
191
- // La Card elle-même peut avoir un onClick, mais on veut aussi vérifier les enfants
192
- // Cette logique est gérée dans le CanvasFramework modifié ci-dessous
193
- }
194
176
  }
195
177
 
196
178
  export default Card;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvasframework",
3
- "version": "0.5.23",
3
+ "version": "0.5.24",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/beyons/CanvasFramework.git"