@guinetik/gcanvas 1.0.4 → 2.0.0

package/src/game/objects/layoutscene.js

@@ -431,6 +431,63 @@ export class LayoutScene extends Scene {
     this._scrollOffset = { x: 0, y: 0 };
     this._scrollVelocity = { x: 0, y: 0 };
   }
+
+  /**
+   * Returns scroll offset for hit testing coordinate transformation.
+   * @returns {{x: number, y: number}} Scroll offset to apply
+   */
+  getHitTestOffset() {
+    if (!this.scrollable) {
+      return { x: 0, y: 0 };
+    }
+    return {
+      x: this._scrollOffset?.x || 0,
+      y: this._scrollOffset?.y || 0,
+    };
+  }
+
+  /**
+   * Checks if a child is within the visible viewport and should be hittable.
+   * @param {GameObject} child - The child to check
+   * @returns {boolean} True if child is within viewport
+   */
+  isChildHittable(child) {
+    // If not scrollable or doesn't need scrolling, all children are hittable
+    if (!this.scrollable || !this._needsScrolling()) {
+      return true;
+    }
+
+    const axis = this.getScrollAxis();
+    const vpW = this._viewportWidth ?? this.width;
+    const vpH = this._viewportHeight ?? this.height;
+    const scrollX = this._scrollOffset?.x || 0;
+    const scrollY = this._scrollOffset?.y || 0;
+
+    // Child position with scroll applied (relative to viewport center)
+    const childScrolledX = child.x + scrollX;
+    const childScrolledY = child.y + scrollY;
+
+    // Get child dimensions (use half for centered bounds check)
+    const childHalfW = (child.width || 0) / 2;
+    const childHalfH = (child.height || 0) / 2;
+
+    // Check if child overlaps with viewport
+    if (axis.horizontal) {
+      // Child right edge must be past viewport left, child left edge must be before viewport right
+      if (childScrolledX + childHalfW < -vpW / 2 || childScrolledX - childHalfW > vpW / 2) {
+        return false;
+      }
+    }
+
+    if (axis.vertical) {
+      // Child bottom edge must be past viewport top, child top edge must be before viewport bottom
+      if (childScrolledY + childHalfH < -vpH / 2 || childScrolledY - childHalfH > vpH / 2) {
+        return false;
+      }
+    }
+
+    return true;
+  }
 }
 
 // HorizontalLayout with clean implementation

package/src/game/objects/mask.js

@@ -0,0 +1,241 @@
+/**
+ * Mask - Clipping mask for scenes and game objects
+ *
+ * Supports multiple shapes with animatable properties:
+ * - circle: radius
+ * - rectangle: width, height, cornerRadius
+ * - ellipse: radiusX, radiusY
+ * - path: custom path function
+ *
+ * @example
+ * // Create a circular mask that grows
+ * const mask = new Mask({
+ *   shape: 'circle',
+ *   x: game.width / 2,
+ *   y: game.height / 2,
+ *   radius: 0,
+ * });
+ *
+ * // Animate the radius
+ * mask.radius = 100;
+ *
+ * // Apply to context
+ * mask.apply(ctx);
+ * // ... render masked content ...
+ * mask.remove(ctx);
+ */
+export class Mask {
+  constructor(options = {}) {
+    // Shape type
+    this.shape = options.shape || 'circle';
+
+    // Position (center point)
+    this.x = options.x ?? 0;
+    this.y = options.y ?? 0;
+
+    // Scale (multiplies dimensions)
+    this.scaleX = options.scaleX ?? 1;
+    this.scaleY = options.scaleY ?? 1;
+
+    // Circle properties
+    this.radius = options.radius ?? 100;
+
+    // Rectangle properties
+    this.width = options.width ?? 200;
+    this.height = options.height ?? 200;
+    this.cornerRadius = options.cornerRadius ?? 0;
+
+    // Ellipse properties
+    this.radiusX = options.radiusX ?? 100;
+    this.radiusY = options.radiusY ?? 100;
+
+    // Custom path function: (ctx, mask) => void
+    this.pathFn = options.pathFn ?? null;
+
+    // Invert the mask (show outside, hide inside)
+    this.invert = options.invert ?? false;
+
+    // Track if currently applied (for safety)
+    this._applied = false;
+  }
+
+  /**
+   * Apply the mask to a canvas context
+   * @param {CanvasRenderingContext2D} ctx - The canvas context
+   */
+  apply(ctx) {
+    if (this._applied) {
+      console.warn('Mask already applied. Call remove() first.');
+      return;
+    }
+
+    ctx.save();
+    ctx.beginPath();
+
+    if (this.invert) {
+      // For inverted mask, draw full canvas then cut out the shape
+      // This requires knowing the canvas size, so we use a large rect
+      ctx.rect(-10000, -10000, 20000, 20000);
+      this._drawPath(ctx);
+      // evenodd fill rule creates the "hole"
+      ctx.clip('evenodd');
+    } else {
+      this._drawPath(ctx);
+      ctx.clip();
+    }
+
+    this._applied = true;
+  }
+
+  /**
+   * Remove the mask (restore context)
+   * @param {CanvasRenderingContext2D} ctx - The canvas context
+   */
+  remove(ctx) {
+    if (!this._applied) {
+      return;
+    }
+    ctx.restore();
+    this._applied = false;
+  }
+
+  /**
+   * Draw the mask path (internal)
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  _drawPath(ctx) {
+    const sx = this.scaleX;
+    const sy = this.scaleY;
+
+    switch (this.shape) {
+      case 'circle':
+        // Use average scale for circle
+        const scale = (sx + sy) / 2;
+        ctx.arc(this.x, this.y, this.radius * scale, 0, Math.PI * 2);
+        break;
+
+      case 'rectangle':
+        const w = this.width * sx;
+        const h = this.height * sy;
+        const cr = this.cornerRadius * Math.min(sx, sy);
+
+        if (cr > 0) {
+          // Rounded rectangle
+          this._roundedRect(ctx, this.x - w/2, this.y - h/2, w, h, cr);
+        } else {
+          // Simple rectangle
+          ctx.rect(this.x - w/2, this.y - h/2, w, h);
+        }
+        break;
+
+      case 'ellipse':
+        ctx.ellipse(this.x, this.y, this.radiusX * sx, this.radiusY * sy, 0, 0, Math.PI * 2);
+        break;
+
+      case 'path':
+        if (this.pathFn) {
+          this.pathFn(ctx, this);
+        }
+        break;
+
+      default:
+        console.warn(`Unknown mask shape: ${this.shape}`);
+    }
+  }
+
+  /**
+   * Draw a rounded rectangle path
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x
+   * @param {number} y
+   * @param {number} w
+   * @param {number} h
+   * @param {number} r - Corner radius
+   */
+  _roundedRect(ctx, x, y, w, h, r) {
+    // Clamp corner radius to half of smallest dimension
+    r = Math.min(r, w / 2, h / 2);
+
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+  }
+
+  /**
+   * Set position
+   * @param {number} x
+   * @param {number} y
+   * @returns {Mask} this for chaining
+   */
+  setPosition(x, y) {
+    this.x = x;
+    this.y = y;
+    return this;
+  }
+
+  /**
+   * Set uniform scale
+   * @param {number} scale
+   * @returns {Mask} this for chaining
+   */
+  setScale(scale) {
+    this.scaleX = scale;
+    this.scaleY = scale;
+    return this;
+  }
+
+  /**
+   * Set non-uniform scale
+   * @param {number} sx
+   * @param {number} sy
+   * @returns {Mask} this for chaining
+   */
+  setScaleXY(sx, sy) {
+    this.scaleX = sx;
+    this.scaleY = sy;
+    return this;
+  }
+
+  /**
+   * Create a circle mask
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} radius
+   * @returns {Mask}
+   */
+  static circle(x, y, radius) {
+    return new Mask({ shape: 'circle', x, y, radius });
+  }
+
+  /**
+   * Create a rectangle mask
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} width
+   * @param {number} height
+   * @param {number} cornerRadius - Optional rounded corners
+   * @returns {Mask}
+   */
+  static rectangle(x, y, width, height, cornerRadius = 0) {
+    return new Mask({ shape: 'rectangle', x, y, width, height, cornerRadius });
+  }
+
+  /**
+   * Create an ellipse mask
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} radiusX
+   * @param {number} radiusY
+   * @returns {Mask}
+   */
+  static ellipse(x, y, radiusX, radiusY) {
+    return new Mask({ shape: 'ellipse', x, y, radiusX, radiusY });
+  }
+}

package/src/game/objects/scene.js

@@ -186,4 +186,23 @@ export class Scene extends GameObject {
   get children() {
     return this._collection.children;
   }
+
+  /**
+   * Returns additional offset to apply during hit testing.
+   * Override in subclasses (e.g., LayoutScene) to account for scroll offset.
+   * @returns {{x: number, y: number}} Additional offset for hit test coordinate transform
+   */
+  getHitTestOffset() {
+    return { x: 0, y: 0 };
+  }
+
+  /**
+   * Checks if a child should be hittable (receive input events).
+   * Override in subclasses (e.g., LayoutScene) to implement viewport culling.
+   * @param {GameObject} child - The child to check
+   * @returns {boolean} True if child should be hittable
+   */
+  isChildHittable(child) {
+    return true;
+  }
 }

package/src/game/objects/wrapper.js

@@ -68,7 +68,13 @@ export class GameObjectShapeWrapper extends GameObject {
    * @param {Object} options - Configuration options
    */
   constructor(game, shape, options = {}) {
-    super(game, options);
+    // IMPORTANT: Strip 'anchor' from options passed to GameObject
+    // In shape context, 'anchor' means "image rendering anchor" (center, top-left, etc.)
+    // In GameObject, 'anchor' triggers applyAnchor mixin for auto-positioning
+    // These are different concepts - don't let shape anchor trigger positioning
+    const { anchor: _shapeAnchor, ...goOptions } = options;
+
+    super(game, goOptions);
 
     // Validate shape
     if (!shape || shape == null || shape == undefined) {
@@ -224,9 +230,15 @@ export class GameObjectShapeWrapper extends GameObject {
 
   /**
    * Draw method to render the shape
+   *
+   * IMPORTANT: Call shape.draw() NOT shape.render()!
+   * The wrapper's render() has already translated to (this.x, this.y).
+   * Calling shape.render() would call Painter.translateTo(shape.x, shape.y)
+   * which OVERWRITES (not adds to) the current translation.
+   * By calling shape.draw() directly, we render at the wrapper's position.
    */
   draw() {
     super.draw();
-    this.shape.render();
+    this.shape.draw();
   }
 }

package/src/game/pipeline.js

@@ -78,6 +78,17 @@ export class Pipeline extends Loggable {
     if (scene.children && scene.children.length > 0) {
       for (let i = scene.children.length - 1; i >= 0; i--) {
         const child = scene.children[i];
+
+        // Check if child is hittable (e.g., within viewport for scrollable layouts)
+        if (scene.isChildHittable && !scene.isChildHittable(child)) {
+          // Force mouseout if child was hovered but is now outside viewport
+          if (child._hovered) {
+            child._hovered = false;
+            child.events.emit("mouseout", e);
+          }
+          continue;
+        }
+
         if (child instanceof Scene) {
           this._hoverScene(child, e); // recurse into nested scenes
         } else {
@@ -152,6 +163,12 @@ export class Pipeline extends Loggable {
     // First check children (they render on top, so should get priority)
     for (let i = scene.children.length - 1; i >= 0; i--) {
       const child = scene.children[i];
+
+      // Check if child is hittable (e.g., within viewport for scrollable layouts)
+      if (scene.isChildHittable && !scene.isChildHittable(child)) {
+        continue;
+      }
+
       if (child instanceof Scene) {
         // Recurse deeper if child is also a Scene
         const hit = this._dispatchToScene(child, type, e);

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";