canvasframework 0.5.28 → 0.5.30

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 (4) hide show
  1. package/README.md +66 -27
  2. package/components/Card.js +23 -23
  3. package/index.js +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  # Installation
12
12
  - npm install canvasframework
13
- - npm install -D vite
13
+ - npm install vite --save-dev
14
14
 
15
15
  # add in package.json
16
16
  "scripts": {
@@ -18,40 +18,79 @@
18
18
  "build": "vite build"
19
19
  }
20
20
 
21
- # Configure webpack and babel
21
+ # Configure with Vite and Capacitor or cordova
22
22
 
23
- add your app.js in src folder and index.html in www folder
24
- in index.html add script src bundle.js
23
+ - add your app.js in src folder "src/main.js"
24
+ - add your index.html in the root of your project
25
+ - add this to your index.html <script type="module" src="/src/main.js"></script>
26
+ - you didn't add canvas or other html tags to your index.html
25
27
 
26
28
  ```
27
- // webpack.config.cjs
28
- const path = require('path');
29
-
30
- module.exports = {
31
- entry: './src/main.js',
32
- output: {
33
- filename: 'bundle.js',
34
- path: path.resolve(__dirname, 'www')
35
- },
36
- mode: 'development',
37
- module: {
38
- rules: [
39
- {
40
- test: /\.js$/,
41
- exclude: /node_modules/,
42
- use: 'babel-loader'
43
- }
44
- ]
45
- },
46
- devServer: {
47
- static: './www',
48
- hot: true
29
+ <!DOCTYPE html>
30
+ <html lang="en">
31
+ <head>
32
+ <meta charset="UTF-8">
33
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
34
+ <title>My App</title>
35
+ <style>
36
+ * {
37
+ margin: 0;
38
+ padding: 0;
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ body {
43
+ font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
44
+ overflow: hidden;
45
+ background-color: #f5f5f5;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <script type="module" src="/src/app.js"></script>
51
+ </body>
52
+ </html>
53
+ ```
54
+
55
+ - Add vite.config.js to the root of the project
56
+
57
+ ```
58
+ import { defineConfig } from 'vite';
59
+
60
+ export default defineConfig({
61
+ base: './', // IMPORTANT pour Android
62
+ build: {
63
+ outDir: 'www',
64
+ emptyOutDir: true
49
65
  }
66
+ });
67
+ ```
68
+
69
+ - add this to our package.json
70
+
71
+ ```
72
+ "scripts": {
73
+ "dev": "vite",
74
+ "build": "vite build"
75
+ }
76
+ ```
77
+
78
+ - into your capacitor.config.ts specify this webDir
79
+
80
+ ```
81
+ const config = {
82
+ appId: 'com.test.app',
83
+ appName: 'CanvasApp',
84
+ webDir: 'www'
50
85
  };
51
86
  ```
52
87
 
88
+ - And finally you can build your app
89
+
53
90
  ```
54
- webpack.config.js → webpack.config.cjs
91
+ npm run build
92
+ npx cap sync
93
+ npx cap run android
55
94
  ```
56
95
 
57
96
  ---
package/components/Card.js CHANGED
@@ -8,12 +8,11 @@ import Component from '../core/Component.js';
8
8
  * @property {number} padding - Padding interne
9
9
  * @property {number} gap - Espacement constant entre enfants
10
10
  * @property {string} direction - Direction ('column' ou 'row')
11
- * @property {string} align - Alignement ('start', 'center', 'end')
11
+ * @property {string} align - Alignement ('start', 'center', 'end', 'stretch')
12
12
  * @property {string} bgColor - Couleur de fond
13
13
  * @property {number} borderRadius - Rayon des coins
14
14
  * @property {number} elevation - Niveau d'élévation (ombres)
15
15
  * @property {boolean} autoLayout - Active le layout automatique
16
- * @property {Map} childPositions - Positions relatives des enfants
17
16
  */
18
17
  class Card extends Component {
19
18
  /**
@@ -46,21 +45,27 @@ class Card extends Component {
46
45
  }
47
46
 
48
47
  /**
49
- * Ajoute un enfant
48
+ * Ajoute un enfant (position relative convertie en absolue)
50
49
  * @param {Component} child - Composant enfant
51
50
  * @returns {Component} L'enfant ajouté
52
51
  */
53
52
  add(child) {
54
53
  this.children.push(child);
55
54
 
55
+ // CONVERTIR les positions relatives en positions absolues
56
+ // Les x, y passés sont relatifs à la Card
57
+ child.x = this.x + child.x;
58
+ child.y = this.y + child.y;
59
+
60
+ // Stocker la position relative originale
61
+ this.childPositions.set(child, {
62
+ x: child.x - this.x,
63
+ y: child.y - this.y
64
+ });
65
+
56
66
  // Si autoLayout est activé, organiser automatiquement
57
67
  if (this.autoLayout) {
58
68
  this.layout();
59
- } else {
60
- // En mode manuel, calculer et stocker la position relative
61
- const relativeX = child.x - this.x;
62
- const relativeY = child.y - this.y;
63
- this.childPositions.set(child, { x: relativeX, y: relativeY });
64
69
  }
65
70
 
66
71
  return child;
@@ -88,7 +93,6 @@ class Card extends Component {
88
93
  clear() {
89
94
  this.children = [];
90
95
  this.childPositions.clear();
91
- if (this.autoLayout) this.layout();
92
96
  }
93
97
 
94
98
  /**
@@ -110,6 +114,9 @@ class Card extends Component {
110
114
  childX = (this.width - child.width) / 2;
111
115
  } else if (this.align === 'end') {
112
116
  childX = this.width - child.width - this.padding;
117
+ } else if (this.align === 'stretch') {
118
+ childX = this.padding;
119
+ child.width = this.width - (this.padding * 2);
113
120
  }
114
121
 
115
122
  // Positionner l'enfant RELATIVEMENT à la Card
@@ -140,6 +147,9 @@ class Card extends Component {
140
147
  childY = (this.height - child.height) / 2;
141
148
  } else if (this.align === 'end') {
142
149
  childY = this.height - child.height - this.padding;
150
+ } else if (this.align === 'stretch') {
151
+ childY = this.padding;
152
+ child.height = this.height - (this.padding * 2);
143
153
  }
144
154
 
145
155
  // Positionner l'enfant RELATIVEMENT à la Card
@@ -281,13 +291,6 @@ class Card extends Component {
281
291
  }
282
292
  }
283
293
 
284
- // Appliquer le clipping si borderRadius > 0
285
- if (this.borderRadius > 0) {
286
- ctx.beginPath();
287
- this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
288
- ctx.clip();
289
- }
290
-
291
294
  // Dessiner les enfants
292
295
  for (let child of this.children) {
293
296
  if (child.visible) child.draw(ctx);
@@ -391,10 +394,10 @@ class Card extends Component {
391
394
 
392
395
  /**
393
396
  * Définit l'alignement
394
- * @param {string} align - 'start', 'center', 'end'
397
+ * @param {string} align - 'start', 'center', 'end' ou 'stretch'
395
398
  */
396
399
  setAlign(align) {
397
- if (['start', 'center', 'end'].includes(align)) {
400
+ if (['start', 'center', 'end', 'stretch'].includes(align)) {
398
401
  this.align = align;
399
402
  if (this.autoLayout) this.layout();
400
403
  }
@@ -452,11 +455,8 @@ class Card extends Component {
452
455
  * Ajuste automatiquement les dimensions de la carte pour contenir tous les enfants
453
456
  */
454
457
  fitSize() {
455
- if (this.direction === 'column') {
456
- this.height = this.getTotalHeight();
457
- } else if (this.direction === 'row') {
458
- this.width = this.getTotalWidth();
459
- }
458
+ this.fitWidth();
459
+ this.fitHeight();
460
460
  }
461
461
 
462
462
  /**
package/index.js CHANGED
@@ -116,4 +116,4 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
116
116
 
117
117
  // Version du framework
118
118
 
119
- export const VERSION = '0.5.22';
119
+ export const VERSION = '0.5.30';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvasframework",
3
- "version": "0.5.28",
3
+ "version": "0.5.30",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/beyons/CanvasFramework.git"