canvasframework 0.5.16 → 0.5.18

package/features/Column.js

@@ -1,43 +0,0 @@
-import LayoutComponent from './LayoutComponent.js';
-
-class Column extends LayoutComponent {
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.align = options.align || 'start'; // start | center | end | stretch
-  }
-
-  layout() {
-    let y = this.y;
-    let maxWidth = 0;
-
-    for (const child of this.children) {
-      child.y = y;
-
-      if (this.align === 'center') {
-        child.x = this.x + (this.width - child.width) / 2;
-      } else if (this.align === 'end') {
-        child.x = this.x + this.width - child.width;
-      } else if (this.align === 'stretch') {
-        child.x = this.x;
-        child.width = this.width;
-      } else {
-        child.x = this.x;
-      }
-
-      y += child.height + this.spacing;
-      maxWidth = Math.max(maxWidth, child.width);
-    }
-
-    this.height = y - this.y - this.spacing;
-    if (!this.width) this.width = maxWidth;
-
-    // Layout récursif automatique des enfants
-    for (const child of this.children) {
-      if (typeof child.layoutRecursive === 'function') {
-        child.layoutRecursive();
-      }
-    }
-  }
-}
-
-export default Column;

package/features/Grid.js

@@ -1,47 +0,0 @@
-import LayoutComponent from './LayoutComponent.js';
-
-class Grid extends LayoutComponent {
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.columns = options.columns || 2;
-  }
-
-  layout() {
-    const cellWidth =
-      (this.width - this.spacing * (this.columns - 1)) / this.columns;
-
-    let x = this.x;
-    let y = this.y;
-    let col = 0;
-    let rowHeight = 0;
-
-    for (const child of this.children) {
-      child.x = x;
-      child.y = y;
-      child.width = cellWidth;
-
-      rowHeight = Math.max(rowHeight, child.height);
-
-      col++;
-      if (col === this.columns) {
-        col = 0;
-        x = this.x;
-        y += rowHeight + this.spacing;
-        rowHeight = 0;
-      } else {
-        x += cellWidth + this.spacing;
-      }
-    }
-
-    this.height = y - this.y + rowHeight;
-
-    // Layout récursif automatique des enfants
-    for (const child of this.children) {
-      if (typeof child.layoutRecursive === 'function') {
-        child.layoutRecursive();
-      }
-    }
-  }
-}
-
-export default Grid;

package/features/LayoutComponent.js

@@ -1,43 +0,0 @@
-import Component from '../core/Component.js';
-
-export function makeConstraints(component) {
-  return {
-    minWidth: 0,
-    minHeight: 0,
-    maxWidth: component.width || Infinity,
-    maxHeight: component.height || Infinity
-  };
-}
-
-class LayoutComponent extends Component {
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.children = options.children || [];
-    this.spacing = options.spacing || 0;
-  }
-
-  add(child) {
-    this.children.push(child);
-    return child;
-  }
-
-  layout() {
-    // À implémenter par Grid / Row / Column
-  }
-
-  // Layout récursif automatique
-  layoutRecursive() {
-    this.layout(); // calcul des positions/taille des enfants directs
-    for (const child of this.children) {
-      if (typeof child.layoutRecursive === 'function') {
-        child.layoutRecursive(); // appel récursif
-      }
-    }
-  }
-
-  draw(ctx) {
-    // Ne dessine rien par défaut, chaque enfant dessinera le sien
-  }
-}
-
-export default LayoutComponent;

package/features/OpenStreetMap.js

@@ -1,310 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Composant OpenStreetMap pour Canvas avec pan, zoom, multi-touch et markers.
- * @class
- * @extends Component
- * @property {number} lat - Latitude du centre de la carte
- * @property {number} lng - Longitude du centre de la carte
- * @property {number} zoom - Niveau de zoom initial
- * @property {number} tileSize - Taille des tuiles en pixels
- * @property {Object} tiles - Cache des tuiles { "z_x_y": {img: Image, loaded: boolean} }
- * @property {number} offsetX - Décalage X pour le drag
- * @property {number} offsetY - Décalage Y pour le drag
- * @property {boolean} dragging - Si le drag est actif
- * @property {Object|null} lastTouch - Dernier point de touch/mouse {x, y}
- * @property {number} velocityX - Vitesse de glissement X pour inertie
- * @property {number} velocityY - Vitesse de glissement Y pour inertie
- * @property {number} friction - Friction pour inertie
- * @property {number} inertiaThreshold - Seuil minimal pour l'inertie
- * @property {Array} markers - Liste des markers {lat, lng, icon}
- * @property {number} maxZoom - Zoom max
- * @property {number} minZoom - Zoom min
- * @property {number|null} lastTouchDistance - Distance entre deux touches pour pinch zoom
- */
-class OpenStreetMap extends Component {
-  /**
-   * Crée une instance de OpenStreetMap
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {number} [options.lat=0] - Latitude initiale
-   * @param {number} [options.lng=0] - Longitude initiale
-   * @param {number} [options.zoom=2] - Niveau de zoom initial
-   * @param {number} [options.tileSize=256] - Taille des tuiles
-   * @param {Array} [options.markers=[]] - Liste de markers {lat, lng, icon}
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-
-	this.x = options.x || 0;
-	this.y = options.y || 0;
-	this.width = options.width || framework.canvas.width;
-	this.height = options.height || framework.canvas.height;
-  
-    this.lat = options.lat || 0;
-    this.lng = options.lng || 0;
-    this.zoom = options.zoom || 2;
-    this.tileSize = options.tileSize || 256;
-    this.tiles = {};
-
-    this.offsetX = 0;
-    this.offsetY = 0;
-    this.dragging = false;
-    this.lastTouch = null;
-
-    this.velocityX = 0;
-    this.velocityY = 0;
-    this.friction = 0.92;
-    this.inertiaThreshold = 0.1;
-
-    this.markers = options.markers || [];
-    this.maxZoom = 19;
-    this.minZoom = 1;
-
-    this.lastTouchDistance = null;
-
-    // Événements souris
-    framework.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
-    framework.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
-    framework.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
-
-    // Événements tactiles
-    framework.canvas.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: false });
-    framework.canvas.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: false });
-    framework.canvas.addEventListener('touchend', this.onTouchEnd.bind(this));
-  }
-
-  /**
-   * Convertit lat/lng en coordonnées de tuiles
-   * @param {number} lat - Latitude
-   * @param {number} lng - Longitude
-   * @param {number} zoom - Niveau de zoom
-   * @returns {Object} {x, y} coordonnées de la tuile
-   */
-  latLngToTileXY(lat, lng, zoom) {
-    const n = Math.pow(2, zoom);
-    const x = n * ((lng + 180) / 360);
-    const latRad = lat * Math.PI / 180;
-    const y = n * (1 - (Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI)) / 2;
-    return { x, y };
-  }
-
-  /**
-   * Convertit coordonnées de tuiles en lat/lng
-   * @param {number} x - Coordonnée X de la tuile
-   * @param {number} y - Coordonnée Y de la tuile
-   * @param {number} zoom - Niveau de zoom
-   * @returns {Object} {lat, lng}
-   */
-  tileXYToLatLng(x, y, zoom) {
-    const n = Math.pow(2, zoom);
-    const lng = x / n * 360 - 180;
-    const latRad = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n)));
-    const lat = latRad * 180 / Math.PI;
-    return { lat, lng };
-  }
-
-  /**
-   * Charge une tuile OpenStreetMap
-   * @param {number} z - Zoom
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {Object} {img: Image, loaded: boolean}
-   */
-  loadTile(z, x, y) {
-    const key = `${z}_${x}_${y}`;
-    if (this.tiles[key]) return this.tiles[key];
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.src = `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
-    this.tiles[key] = { img, loaded: false };
-    img.onload = () => { this.tiles[key].loaded = true; this.framework.markComponentDirty(this); };
-    return this.tiles[key];
-  }
-
-  /**
-   * Dessine la carte et les markers
-   * @param {CanvasRenderingContext2D} ctx - Contexte Canvas
-   */
-   draw(ctx) {
-	  ctx.save();
-
-	  // CORRECTION : Arrondir le zoom pour les tuiles
-	  const zoomLevel = Math.floor(this.zoom);
-	  
-	  const { x: tileX, y: tileY } = this.latLngToTileXY(this.lat, this.lng, zoomLevel);
-	  const tilesX = Math.ceil(this.width / this.tileSize) + 2;
-	  const tilesY = Math.ceil(this.height / this.tileSize) + 2;
-	  const startX = Math.floor(tileX - tilesX / 2);
-	  const startY = Math.floor(tileY - tilesY / 2);
-
-	  for (let dx = 0; dx < tilesX; dx++) {
-		for (let dy = 0; dy < tilesY; dy++) {
-		  const tx = startX + dx;
-		  const ty = startY + dy;
-		  
-		  // Utiliser zoomLevel arrondi
-		  const tile = this.loadTile(zoomLevel, tx, ty);
-		  const px = (tx - tileX) * this.tileSize + this.width / 2 + this.offsetX;
-		  const py = (ty - tileY) * this.tileSize + this.height / 2 + this.offsetY;
-
-		  if (tile.loaded) {
-			ctx.drawImage(tile.img, px, py, this.tileSize, this.tileSize);
-		  } else {
-			ctx.fillStyle = '#E0E0E0';
-			ctx.fillRect(px, py, this.tileSize, this.tileSize);
-		  }
-		}
-	  }
-
-	  // Dessiner les markers avec le zoom arrondi aussi
-	  for (let marker of this.markers) {
-		const { x, y } = this.latLngToTileXY(marker.lat, marker.lng, zoomLevel);
-		const screenX = (x - tileX) * this.tileSize + this.width / 2 + this.offsetX;
-		const screenY = (y - tileY) * this.tileSize + this.height / 2 + this.offsetY;
-
-		if (marker.icon) {
-		  ctx.drawImage(marker.icon, screenX - marker.icon.width / 2, screenY - marker.icon.height, marker.icon.width, marker.icon.height);
-		} else {
-		  ctx.fillStyle = 'red';
-		  ctx.beginPath();
-		  ctx.arc(screenX, screenY, 6, 0, 2 * Math.PI);
-		  ctx.fill();
-		}
-	  }
-
-	  ctx.restore();
-	  this.updateInertia();
-  }
-
-  /** @private */
-  handleDragStart(x, y) {
-    this.dragging = true;
-    this.lastTouch = { x, y };
-    this.velocityX = 0;
-    this.velocityY = 0;
-  }
-
-  /** @private */
-  handleDragMove(x, y) {
-    if (!this.dragging) return;
-    const dx = x - this.lastTouch.x;
-    const dy = y - this.lastTouch.y;
-    this.offsetX += dx;
-    this.offsetY += dy;
-    this.velocityX = dx;
-    this.velocityY = dy;
-    this.lastTouch = { x, y };
-    this.framework.markComponentDirty(this);
-  }
-
-  /** @private */
-  handleDragEnd() {
-    this.dragging = false;
-  }
-
-  /** @private */
-  updateInertia() {
-    if (!this.dragging && (Math.abs(this.velocityX) > this.inertiaThreshold || Math.abs(this.velocityY) > this.inertiaThreshold)) {
-      this.offsetX += this.velocityX;
-      this.offsetY += this.velocityY;
-      this.velocityX *= this.friction;
-      this.velocityY *= this.friction;
-      this.framework.markComponentDirty(this);
-    } else {
-      this.velocityX = 0;
-      this.velocityY = 0;
-    }
-  }
-
-  /** @private */
-  updateCenter() {
-    const { x: tileX, y: tileY } = this.latLngToTileXY(this.lat, this.lng, this.zoom);
-    const newTileX = tileX - this.offsetX / this.tileSize;
-    const newTileY = tileY - this.offsetY / this.tileSize;
-    const { lat, lng } = this.tileXYToLatLng(newTileX, newTileY, this.zoom);
-    this.lat = lat;
-    this.lng = lng;
-    this.offsetX = 0;
-    this.offsetY = 0;
-  }
-
-  /** @param {MouseEvent} e */
-  onMouseDown(e) { this.handleDragStart(e.clientX, e.clientY); }
-
-  /** @param {MouseEvent} e */
-  onMouseMove(e) { this.handleDragMove(e.clientX, e.clientY); }
-
-  /** @param {MouseEvent} e */
-  onMouseUp(e) { this.handleDragEnd(); this.updateCenter(); }
-
-  /** @param {TouchEvent} e */
-  onTouchStart(e) {
-    e.preventDefault();
-    if (e.touches.length === 1) {
-      const t = e.touches[0];
-      this.handleDragStart(t.clientX, t.clientY);
-    } else if (e.touches.length === 2) {
-      this.lastTouchDistance = this.getTouchDistance(e.touches[0], e.touches[1]);
-    }
-  }
-
-  /** @param {TouchEvent} e */
-  onTouchMove(e) {
-    e.preventDefault();
-    if (e.touches.length === 1) {
-      const t = e.touches[0];
-      this.handleDragMove(t.clientX, t.clientY);
-    } else if (e.touches.length === 2) {
-      const newDistance = this.getTouchDistance(e.touches[0], e.touches[1]);
-      if (this.lastTouchDistance) {
-        const zoomChange = Math.log2(newDistance / this.lastTouchDistance);
-        this.zoom += zoomChange;
-        this.zoom = Math.min(this.maxZoom, Math.max(this.minZoom, this.zoom));
-        this.lastTouchDistance = newDistance;
-        this.framework.markComponentDirty(this);
-      }
-    }
-  }
-
-  /** @param {TouchEvent} e */
-  onTouchEnd(e) {
-    e.preventDefault();
-    this.handleDragEnd();
-    this.updateCenter();
-    this.lastTouchDistance = null;
-  }
-
-  /**
-   * Calcule la distance entre deux touches
-   * @param {Touch} t1 
-   * @param {Touch} t2 
-   * @returns {number} distance en pixels
-   */
-  getTouchDistance(t1, t2) {
-    const dx = t2.clientX - t1.clientX;
-    const dy = t2.clientY - t1.clientY;
-    return Math.sqrt(dx*dx + dy*dy);
-  }
-
-  /**
-   * Vérifie si un point est dans le composant
-   * @param {number} x 
-   * @param {number} y 
-   * @returns {boolean}
-   */
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height;
-  }
-
-  /**
-   * Ajoute un marker à la carte
-   * @param {Object} marker - {lat, lng, icon}
-   */
-  addMarker(marker) {
-    this.markers.push(marker);
-    this.framework.markComponentDirty(this);
-  }
-}
-
-export default OpenStreetMap;

package/features/Positioned.js

@@ -1,33 +0,0 @@
-import Component from '../core/Component.js';
-
-class Positioned extends Component {
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.child = options.child;
-    this.left = options.left;
-    this.top = options.top;
-    this.right = options.right;
-    this.bottom = options.bottom;
-  }
-
-  layout() {
-    if (!this.child) return;
-
-    // Position selon les contraintes
-    if (this.left !== undefined) this.child.x = this.left;
-    else if (this.right !== undefined) this.child.x = this.width - this.child.width - this.right;
-    else this.child.x = 0;
-
-    if (this.top !== undefined) this.child.y = this.top;
-    else if (this.bottom !== undefined) this.child.y = this.height - this.child.height - this.bottom;
-    else this.child.y = 0;
-
-    this.child.layout && this.child.layout();
-  }
-
-  draw(ctx) {
-    this.child && this.child.draw(ctx);
-  }
-}
-
-export default Positioned;