@guinetik/gcanvas 1.0.5 → 2.0.0

package/src/game/ui/button.js

@@ -110,8 +110,9 @@ export class Button extends GameObject {
     // Basic position and sizing
     this.x = x;
     this.y = y;
-    this.width = width;
-    this.height = height;
+    // Ensure minimum touch target size (44x44px recommended for mobile)
+    this.width = Math.max(width, 44);
+    this.height = Math.max(height, 44);
     this.padding = padding;
     this.textAlign = textAlign;
     this.textBaseline = textBaseline;
@@ -200,6 +201,10 @@ export class Button extends GameObject {
   /**
    * Update label position based on alignment and baseline settings
    * @private
+   *
+   * Note: TextShape now centers its bounding box at (x, y) regardless of textAlign.
+   * For non-center alignments, we adjust the position by half the text dimensions
+   * so that left-aligned text STARTS at the left edge, not centers there.
    */
   alignText() {
     if (!this.label) return;
@@ -207,13 +212,22 @@ export class Button extends GameObject {
     const halfWidth = this.width / 2;
     const halfHeight = this.height / 2;
 
-    // Horizontal alignment
+    // Get text dimensions (available after TextShape._calculateBounds)
+    const textHalfWidth = (this.label._width || 0) / 2;
+    const textHalfHeight = (this.label._height || 0) / 2;
+
+    // Horizontal alignment - position where text CENTER should be
+    // TextShape centers its bounding box at (x, y), so we adjust accordingly
     switch (this.textAlign) {
       case "left":
-        this.label.x = -halfWidth + this.padding;
+        // Text should START at left edge + padding
+        // So text CENTER should be at left edge + padding + half text width
+        this.label.x = -halfWidth + this.padding + textHalfWidth;
         break;
       case "right":
-        this.label.x = halfWidth - this.padding;
+        // Text should END at right edge - padding
+        // So text CENTER should be at right edge - padding - half text width
+        this.label.x = halfWidth - this.padding - textHalfWidth;
         break;
       case "center":
       default:
@@ -221,13 +235,15 @@ export class Button extends GameObject {
         break;
     }
 
-    // Vertical alignment
+    // Vertical alignment - position where text CENTER should be
     switch (this.textBaseline) {
       case "top":
-        this.label.y = -halfHeight + this.padding;
+        // Text should START at top edge + padding
+        this.label.y = -halfHeight + this.padding + textHalfHeight;
         break;
       case "bottom":
-        this.label.y = halfHeight - this.padding;
+        // Text should END at bottom edge - padding
+        this.label.y = halfHeight - this.padding - textHalfHeight;
         break;
       case "middle":
       default:
@@ -257,16 +273,85 @@ export class Button extends GameObject {
     this.onPressed = onPressed;
     this.onRelease = onRelease;
     
-    this.on("mouseover", this.setState.bind(this, "hover"));
-    this.on("mouseout", this.setState.bind(this, "default"));
-    this.on("inputdown", this.setState.bind(this, "pressed"));
-    this.on("inputup", () => {
-      // Fire onClick if user was in "pressed" state
-      if (this.state === "pressed" && typeof onClick === "function") {
+    // Track pointer state for proper hover handling
+    this._pointerOver = false;
+    this._isTouch = false;
+    
+    // Mouse hover events (desktop only)
+    this.on("mouseover", (e) => {
+      this._pointerOver = true;
+      if (!this._isTouch) {
+        this.setState("hover");
+      }
+    });
+    
+    this.on("mouseout", (e) => {
+      this._pointerOver = false;
+      if (!this._isTouch) {
+        this.setState("default");
+      }
+    });
+    
+    // Touch/pointer down - prevent default for mobile-friendly behavior
+    this.on("inputdown", (e) => {
+      // Detect touch input
+      if (e.touches || (e.nativeEvent && e.nativeEvent.type === 'touchstart')) {
+        this._isTouch = true;
+        // Prevent default touch behaviors (scrolling, zooming)
+        if (e.nativeEvent) {
+          e.nativeEvent.preventDefault();
+        }
+      }
+      this._pointerOver = true;
+      this.setState("pressed");
+    });
+    
+    // Touch/pointer up
+    this.on("inputup", (e) => {
+      const wasPressed = this.state === "pressed";
+      
+      // Prevent default touch behaviors
+      if (e.touches || (e.nativeEvent && e.nativeEvent.type === 'touchend')) {
+        if (e.nativeEvent) {
+          e.nativeEvent.preventDefault();
+        }
+        this._isTouch = true;
+      }
+      
+      // Verify pointer is still over button using hit test
+      const stillOver = this._hitTest && this._hitTest(e.x, e.y);
+      
+      // Fire onClick if user was in "pressed" state and pointer is still over
+      if (wasPressed && stillOver && typeof onClick === "function") {
         onClick();
       }
-      // Return to hover state if the pointer is still over the button
-      this.setState("hover");
+      
+      // Check if pointer is still over the button
+      // On touch devices, don't set hover state (no hover on touch)
+      if (stillOver && !this._isTouch) {
+        this.setState("hover");
+      } else {
+        this.setState("default");
+        // Reset touch flag after a delay to allow mouse hover to work
+        if (this._isTouch) {
+          setTimeout(() => {
+            this._isTouch = false;
+          }, 300);
+        }
+      }
+    });
+    
+    // Touch move - update pointer position
+    this.on("inputmove", (e) => {
+      // Check if pointer is still over button
+      if (this._hitTest && this._hitTest(e.x, e.y)) {
+        this._pointerOver = true;
+      } else {
+        this._pointerOver = false;
+        if (this.state === "hover" && !this._isTouch) {
+          this.setState("default");
+        }
+      }
     });
   }
 

package/src/game/ui/theme.js

@@ -121,9 +121,3 @@ export default UI_THEME;
 
 
 
-
-
-
-
-
-

package/src/game/ui/togglebutton.js

@@ -43,7 +43,13 @@ export class ToggleButton extends Button {
         }
 
         // Update our visual style for toggled vs. not
+        // Store current state before refresh
+        const currentState = this.state;
         this.refreshToggleVisual();
+        // Re-apply current state after refresh to ensure proper colors
+        if (currentState) {
+          this.setState(currentState);
+        }
       },
     });
     // Terminal × Vercel theme for toggled state
@@ -59,8 +65,13 @@ export class ToggleButton extends Button {
 
   toggle(v) {
     // Toggle the button state and refresh visuals
+    const currentState = this.state;
     this.toggled = v;
     this.refreshToggleVisual();
+    // Re-apply current state after refresh to ensure proper colors
+    if (currentState) {
+      this.setState(currentState);
+    }
   }
 
   /**
@@ -68,32 +79,32 @@ export class ToggleButton extends Button {
    */
   refreshToggleVisual() {
     if (this.toggled) {
-      // E.g. "active" styling
-      this.bg.fillColor = this.colorActiveBg;
-      this.bg.strokeColor = this.colorActiveStroke;
+      // Active/toggled styling - use correct property names
+      this.bg.color = this.colorActiveBg;
+      this.bg.stroke = this.colorActiveStroke;
       this.label.color = this.colorActiveText;
     } else {
-      // Revert to normal styling
-      this.bg.fillColor = this.colors.default.bg;
-      this.bg.strokeColor = this.colors.default.stroke;
+      // Revert to normal styling - use correct property names
+      this.bg.color = this.colors.default.bg;
+      this.bg.stroke = this.colors.default.stroke;
       this.label.color = this.colors.default.text;
     }
   }
 
   /**
-   * If we want ephemeral states (hover, pressed) to remain visible briefly,
-   * we can let parent setState run, then immediately re-apply toggled style
-   * so we don't lose the "toggled" color. This is optional.
+   * Override setState to properly handle toggled state.
+   * When toggled, always use active colors. When not toggled, use normal button behavior.
    */
   setState(state) {
+    // Always call parent first to handle cursor and callbacks
     super.setState(state);
-
-    // If we're toggled on, ensure it stays in the toggled visuals
-    // after the parent sets hover/pressed colors.
+    
+    // If toggled, override colors with active colors (ignore hover/pressed colors)
     if (this.toggled) {
-      this.bg.fillColor = this.colorActiveBg;
-      this.bg.strokeColor = this.colorActiveStroke;
+      this.bg.color = this.colorActiveBg;
+      this.bg.stroke = this.colorActiveStroke;
       this.label.color = this.colorActiveText;
     }
+    // If not toggled, parent's setState already set the correct colors
   }
 }

package/src/game/ui/tooltip.js

@@ -237,12 +237,20 @@ export class Tooltip extends GameObject {
     this.bg.height = textHeight + this.padding * 2;
 
     // Position each line inside bg
-    const startX = -this.bg.width / 2 + this.padding;
-    const startY = -this.bg.height / 2 + this.padding;
+    // TextShape now centers its bounding box at (x, y), so for left/top aligned text
+    // we need to position the CENTER where we want it, not the top-left corner.
+    // Text should START at the left edge + padding, so CENTER is at left edge + padding + textWidth/2
+    const bgLeft = -this.bg.width / 2;
 
     for (let i = 0; i < this.lineShapes.length; i++) {
-      this.lineShapes[i].x = startX;
-      this.lineShapes[i].y = startY + i * lineHeight;
+      const shape = this.lineShapes[i];
+      const textHalfWidth = (shape._width || 0) / 2;
+      const textHalfHeight = (shape._height || lineHeight) / 2;
+
+      // Text starts at left edge + padding, so center is at left edge + padding + halfWidth
+      shape.x = bgLeft + this.padding + textHalfWidth;
+      // Text starts at top edge + padding + i*lineHeight, so center is offset by halfHeight
+      shape.y = -this.bg.height / 2 + this.padding + i * lineHeight + textHalfHeight;
     }
   }
 

package/src/index.js

@@ -21,5 +21,8 @@ export * from "./state";
 // Particle system
 export * from "./particle";
 
+// Physics (for particle simulations)
+export * from "./physics";
+
 // WebGL (optional, for shader effects)
 export * from "./webgl";

package/src/io/gesture.js

@@ -0,0 +1,409 @@
+/**
+ * @module io/gesture
+ * @description High-level gesture recognition for zoom, pan, and tap across mouse and touch.
+ * 
+ * Provides unified gesture handling that works seamlessly on both desktop and mobile:
+ * - Mouse wheel → zoom
+ * - Pinch (two fingers) → zoom
+ * - Mouse drag → pan
+ * - Single finger drag → pan
+ * - Quick tap/click → tap event
+ * 
+ * @example
+ * // Basic usage
+ * import { Gesture } from '@guinetik/gcanvas';
+ * 
+ * const gesture = new Gesture(canvas, {
+ *   onZoom: (delta, center) => {
+ *     this.zoom *= delta > 0 ? 1.1 : 0.9;
+ *   },
+ *   onPan: (dx, dy) => {
+ *     this.offsetX += dx;
+ *     this.offsetY += dy;
+ *   },
+ *   onTap: (x, y) => {
+ *     this.handleClick(x, y);
+ *   }
+ * });
+ * 
+ * // Cleanup when done
+ * gesture.destroy();
+ */
+
+/**
+ * Gesture class for handling zoom, pan, and tap gestures
+ */
+export class Gesture {
+  /**
+   * Create a new Gesture handler
+   * @param {HTMLCanvasElement} canvas - The canvas element to attach gestures to
+   * @param {Object} options - Configuration options
+   * @param {Function} [options.onZoom] - Callback for zoom: (delta, centerX, centerY) => void
+   *                                       delta > 0 = zoom in, delta < 0 = zoom out
+   * @param {Function} [options.onPan] - Callback for pan: (dx, dy) => void
+   * @param {Function} [options.onTap] - Callback for tap/click: (x, y) => void
+   * @param {Function} [options.onDragStart] - Callback when drag starts: (x, y) => void
+   * @param {Function} [options.onDragEnd] - Callback when drag ends: () => void
+   * @param {number} [options.wheelZoomFactor=0.1] - Zoom sensitivity for mouse wheel
+   * @param {number} [options.pinchZoomFactor=1] - Zoom sensitivity for pinch
+   * @param {number} [options.panScale=1] - Scale factor for pan deltas
+   * @param {number} [options.tapThreshold=10] - Max movement (px) to still count as tap
+   * @param {number} [options.tapTimeout=300] - Max duration (ms) for tap
+   * @param {boolean} [options.preventDefault=true] - Prevent default browser behavior
+   */
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    
+    // Callbacks
+    this.onZoom = options.onZoom || null;
+    this.onPan = options.onPan || null;
+    this.onTap = options.onTap || null;
+    this.onDragStart = options.onDragStart || null;
+    this.onDragEnd = options.onDragEnd || null;
+    
+    // Config
+    this.wheelZoomFactor = options.wheelZoomFactor ?? 0.1;
+    this.pinchZoomFactor = options.pinchZoomFactor ?? 1;
+    this.panScale = options.panScale ?? 1;
+    this.tapThreshold = options.tapThreshold ?? 10;
+    this.tapTimeout = options.tapTimeout ?? 300;
+    this.preventDefault = options.preventDefault ?? true;
+    
+    // State
+    this._isDragging = false;
+    this._hasMoved = false;
+    this._startTime = 0;
+    this._startX = 0;
+    this._startY = 0;
+    this._lastX = 0;
+    this._lastY = 0;
+    
+    // Touch state
+    this._touches = new Map();
+    this._lastPinchDist = 0;
+    this._lastPinchCenterX = 0;
+    this._lastPinchCenterY = 0;
+    
+    // Bind handlers
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._onMouseLeave = this._onMouseLeave.bind(this);
+    this._onWheel = this._onWheel.bind(this);
+    this._onTouchStart = this._onTouchStart.bind(this);
+    this._onTouchMove = this._onTouchMove.bind(this);
+    this._onTouchEnd = this._onTouchEnd.bind(this);
+    this._onTouchCancel = this._onTouchCancel.bind(this);
+    
+    // Attach listeners
+    this._attachListeners();
+  }
+  
+  /**
+   * Check if currently dragging
+   * @returns {boolean}
+   */
+  get isDragging() {
+    return this._isDragging;
+  }
+  
+  /**
+   * Attach all event listeners
+   * @private
+   */
+  _attachListeners() {
+    const canvas = this.canvas;
+    const passive = !this.preventDefault;
+    
+    // Mouse
+    canvas.addEventListener('mousedown', this._onMouseDown);
+    canvas.addEventListener('mousemove', this._onMouseMove);
+    canvas.addEventListener('mouseup', this._onMouseUp);
+    canvas.addEventListener('mouseleave', this._onMouseLeave);
+    canvas.addEventListener('wheel', this._onWheel, { passive });
+    
+    // Touch
+    canvas.addEventListener('touchstart', this._onTouchStart, { passive });
+    canvas.addEventListener('touchmove', this._onTouchMove, { passive });
+    canvas.addEventListener('touchend', this._onTouchEnd, { passive });
+    canvas.addEventListener('touchcancel', this._onTouchCancel);
+  }
+  
+  /**
+   * Remove all event listeners
+   */
+  destroy() {
+    const canvas = this.canvas;
+    
+    canvas.removeEventListener('mousedown', this._onMouseDown);
+    canvas.removeEventListener('mousemove', this._onMouseMove);
+    canvas.removeEventListener('mouseup', this._onMouseUp);
+    canvas.removeEventListener('mouseleave', this._onMouseLeave);
+    canvas.removeEventListener('wheel', this._onWheel);
+    
+    canvas.removeEventListener('touchstart', this._onTouchStart);
+    canvas.removeEventListener('touchmove', this._onTouchMove);
+    canvas.removeEventListener('touchend', this._onTouchEnd);
+    canvas.removeEventListener('touchcancel', this._onTouchCancel);
+    
+    this._touches.clear();
+  }
+  
+  /**
+   * Get canvas-relative coordinates from a mouse event
+   * @private
+   */
+  _getMousePos(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  }
+  
+  /**
+   * Get canvas-relative coordinates from a touch
+   * @private
+   */
+  _getTouchPos(touch) {
+    const rect = this.canvas.getBoundingClientRect();
+    return {
+      x: touch.clientX - rect.left,
+      y: touch.clientY - rect.top
+    };
+  }
+  
+  // ─────────────────────────────────────────────────────────────────────────
+  // MOUSE HANDLERS
+  // ─────────────────────────────────────────────────────────────────────────
+  
+  _onMouseDown(e) {
+    const pos = this._getMousePos(e);
+    this._isDragging = true;
+    this._hasMoved = false;
+    this._startTime = Date.now();
+    this._startX = pos.x;
+    this._startY = pos.y;
+    this._lastX = pos.x;
+    this._lastY = pos.y;
+    
+    if (this.onDragStart) {
+      this.onDragStart(pos.x, pos.y);
+    }
+  }
+  
+  _onMouseMove(e) {
+    if (!this._isDragging) return;
+    
+    const pos = this._getMousePos(e);
+    const dx = pos.x - this._lastX;
+    const dy = pos.y - this._lastY;
+    
+    // Check if moved enough to count as drag
+    const totalDx = Math.abs(pos.x - this._startX);
+    const totalDy = Math.abs(pos.y - this._startY);
+    if (totalDx > this.tapThreshold || totalDy > this.tapThreshold) {
+      this._hasMoved = true;
+    }
+    
+    if (this.onPan && this._hasMoved) {
+      this.onPan(dx * this.panScale, dy * this.panScale);
+    }
+    
+    this._lastX = pos.x;
+    this._lastY = pos.y;
+  }
+  
+  _onMouseUp(e) {
+    if (!this._isDragging) return;
+    
+    const now = Date.now();
+    const duration = now - this._startTime;
+    
+    // Check for tap (quick, no movement)
+    if (!this._hasMoved && duration < this.tapTimeout && this.onTap) {
+      const pos = this._getMousePos(e);
+      this.onTap(pos.x, pos.y);
+    }
+    
+    this._isDragging = false;
+    
+    if (this.onDragEnd) {
+      this.onDragEnd();
+    }
+  }
+  
+  _onMouseLeave() {
+    if (this._isDragging) {
+      this._isDragging = false;
+      if (this.onDragEnd) {
+        this.onDragEnd();
+      }
+    }
+  }
+  
+  _onWheel(e) {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+    
+    if (this.onZoom) {
+      const pos = this._getMousePos(e);
+      const delta = e.deltaY > 0 ? -this.wheelZoomFactor : this.wheelZoomFactor;
+      this.onZoom(delta, pos.x, pos.y);
+    }
+  }
+  
+  // ─────────────────────────────────────────────────────────────────────────
+  // TOUCH HANDLERS
+  // ─────────────────────────────────────────────────────────────────────────
+  
+  _onTouchStart(e) {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+    
+    this._startTime = Date.now();
+    this._hasMoved = false;
+    
+    // Track all touches
+    for (const touch of e.changedTouches) {
+      const pos = this._getTouchPos(touch);
+      this._touches.set(touch.identifier, { x: pos.x, y: pos.y });
+    }
+    
+    // Two fingers - initialize pinch
+    if (this._touches.size === 2) {
+      const [t1, t2] = Array.from(this._touches.values());
+      this._lastPinchDist = Math.hypot(t2.x - t1.x, t2.y - t1.y);
+      this._lastPinchCenterX = (t1.x + t2.x) / 2;
+      this._lastPinchCenterY = (t1.y + t2.y) / 2;
+      // Stop single-finger drag when pinching
+      this._isDragging = false;
+    }
+    
+    // Single finger - start drag
+    if (this._touches.size === 1) {
+      const touch = e.touches[0];
+      const pos = this._getTouchPos(touch);
+      this._isDragging = true;
+      this._startX = pos.x;
+      this._startY = pos.y;
+      this._lastX = pos.x;
+      this._lastY = pos.y;
+      
+      if (this.onDragStart) {
+        this.onDragStart(pos.x, pos.y);
+      }
+    }
+  }
+  
+  _onTouchMove(e) {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+    
+    // Update touch positions
+    for (const touch of e.changedTouches) {
+      if (this._touches.has(touch.identifier)) {
+        const pos = this._getTouchPos(touch);
+        this._touches.set(touch.identifier, { x: pos.x, y: pos.y });
+      }
+    }
+    
+    // Two-finger pinch zoom + pan
+    if (this._touches.size === 2) {
+      const [t1, t2] = Array.from(this._touches.values());
+      const pinchDist = Math.hypot(t2.x - t1.x, t2.y - t1.y);
+      const pinchCenterX = (t1.x + t2.x) / 2;
+      const pinchCenterY = (t1.y + t2.y) / 2;
+      
+      if (this._lastPinchDist > 0) {
+        // Zoom based on pinch distance change
+        if (this.onZoom) {
+          const pinchRatio = pinchDist / this._lastPinchDist;
+          const delta = (pinchRatio - 1) * this.pinchZoomFactor;
+          this.onZoom(delta, pinchCenterX, pinchCenterY);
+        }
+        
+        // Pan based on pinch center movement
+        if (this.onPan) {
+          const dx = pinchCenterX - this._lastPinchCenterX;
+          const dy = pinchCenterY - this._lastPinchCenterY;
+          this.onPan(dx * this.panScale, dy * this.panScale);
+        }
+        
+        this._hasMoved = true;
+      }
+      
+      this._lastPinchDist = pinchDist;
+      this._lastPinchCenterX = pinchCenterX;
+      this._lastPinchCenterY = pinchCenterY;
+    }
+    // Single finger drag (pan)
+    else if (this._touches.size === 1 && this._isDragging) {
+      const touch = e.touches[0];
+      const pos = this._getTouchPos(touch);
+      
+      const dx = pos.x - this._lastX;
+      const dy = pos.y - this._lastY;
+      
+      // Check if moved enough
+      const totalDx = Math.abs(pos.x - this._startX);
+      const totalDy = Math.abs(pos.y - this._startY);
+      if (totalDx > this.tapThreshold || totalDy > this.tapThreshold) {
+        this._hasMoved = true;
+      }
+      
+      if (this.onPan && this._hasMoved) {
+        this.onPan(dx * this.panScale, dy * this.panScale);
+      }
+      
+      this._lastX = pos.x;
+      this._lastY = pos.y;
+    }
+  }
+  
+  _onTouchEnd(e) {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+    
+    // Remove ended touches
+    for (const touch of e.changedTouches) {
+      this._touches.delete(touch.identifier);
+    }
+    
+    // Reset pinch if no longer two fingers
+    if (this._touches.size < 2) {
+      this._lastPinchDist = 0;
+    }
+    
+    // All touches released
+    if (this._touches.size === 0) {
+      // Check for tap
+      const now = Date.now();
+      const duration = now - this._startTime;
+      
+      if (!this._hasMoved && duration < this.tapTimeout && this.onTap) {
+        this.onTap(this._startX, this._startY);
+      }
+      
+      this._isDragging = false;
+      
+      if (this.onDragEnd) {
+        this.onDragEnd();
+      }
+    }
+  }
+  
+  _onTouchCancel() {
+    this._touches.clear();
+    this._lastPinchDist = 0;
+    this._isDragging = false;
+    
+    if (this.onDragEnd) {
+      this.onDragEnd();
+    }
+  }
+}