@guinetik/gcanvas 1.0.0

package/src/mixins/anchor.js

@@ -0,0 +1,131 @@
+import { GameObject } from "../game/index.js";
+import { Position } from "../util/position.js";
+
+/**
+ * Applies anchor positioning to a game object
+ *
+ * @param {GameObject} go - The game object to anchor
+ * @param {Object} options - Anchor configuration options
+ * @param {string} [options.anchor] - Anchor position (use Position constants)
+ * @param {number} [options.anchorMargin=10] - Margin from the edge when anchoring
+ * @param {number} [options.anchorOffsetX=0] - Additional X offset to apply after anchoring
+ * @param {number} [options.anchorOffsetY=0] - Additional Y offset to apply after anchoring
+ * @param {GameObject|boolean} [options.anchorRelative=false] - Object to anchor relative to, or true to use parent
+ * @param {boolean} [options.anchorSetTextAlign=true] - Whether to set text alignment properties if available
+ * @returns {GameObject} The original game object for chaining
+ */
+export function applyAnchor(go, options = {}) {
+  // Ensure we're only applying anchor to GameObjects
+  if (!go || !(go instanceof GameObject)) {
+    console.warn("applyAnchor can only be applied to GameObject instances");
+    return go;
+  }
+
+  // Store anchor properties in a separate namespace to avoid conflicts
+  go._anchor = {
+    position: options.anchor ?? null,
+    margin: options.anchorMargin ?? 10,
+    offsetX: options.anchorOffsetX ?? 0,
+    offsetY: options.anchorOffsetY ?? 0,
+    relative: options.anchorRelative ?? false,
+    setTextAlign: options.anchorSetTextAlign !== false,
+    lastUpdate: 0, // Track when we last updated positioning
+  };
+
+  // Keep a reference to the original update method
+  const originalUpdate = go.update?.bind(go);
+
+  // Override the update method
+  go.update = function (dt) {
+    //console.log("Anchor.update", go.name || go.constructor.name, go.boundsDirty);
+    // Skip anchor updates if bounds aren't dirty
+    const relativeObj =
+      go._anchor.relative === true && go.parent
+        ? go.parent
+        : go._anchor.relative;
+
+    // Only update positioning when bounds are dirty (geometry changed)
+    // or when related objects have changed
+    if (
+      go._anchor.position &&
+      (go.boundsDirty ||
+        (relativeObj && relativeObj.boundsDirty) ||
+        (go.parent && go.parent.boundsDirty))
+    ) {
+      // Calculate position
+      let position;
+
+      if (relativeObj) {
+        // Position relative to another object
+        const containerObj = {
+          x: relativeObj.x,
+          y: relativeObj.y,
+          width: relativeObj.width,
+          height: relativeObj.height,
+        };
+
+        position = Position.calculate(
+          go._anchor.position,
+          go,
+          containerObj,
+          go._anchor.margin,
+          go._anchor.offsetX,
+          go._anchor.offsetY
+        );
+      } else {
+        // Position absolute to the game canvas
+        position = Position.calculateAbsolute(
+          go._anchor.position,
+          go,
+          go.game,
+          go._anchor.margin,
+          go._anchor.offsetX,
+          go._anchor.offsetY
+        );
+      }
+      // Apply the calculated position
+      if (go.parent && !isPipelineRoot(go)) {
+        // If object has a parent AND is not directly in the pipeline
+        if (relativeObj === go.parent) {
+          // If anchored relative to parent, use local coordinates
+          // (parent position is already accounted for in rendering)
+          go.x = position.x - relativeObj.x;
+          go.y = position.y - relativeObj.y;
+        } else {
+          // If anchored to something else or absolutely, convert to local coordinates
+          go.x = position.x - go.parent.x;
+          go.y = position.y - go.parent.y;
+        }
+      } else {
+        // No parent or directly in pipeline - use absolute coordinates
+        go.x = position.x;
+        go.y = position.y;
+      }
+
+      // Set text alignment if applicable and enabled
+      if (go._anchor.setTextAlign) {
+        if ("align" in go) go.align = position.align;
+        if ("baseline" in go) go.baseline = position.baseline;
+      }
+
+      // Remember the time we last updated
+      go._anchor.lastUpdate = go.game ? go.game.lastTime : Date.now();
+    }
+
+    // Call the original update method
+    if (originalUpdate) originalUpdate(dt);
+  };
+
+  // Helper function to determine if an object is directly in the pipeline
+  function isPipelineRoot(gameObject) {
+    return (
+      gameObject.game &&
+      gameObject.game.pipeline &&
+      gameObject.game.pipeline.gameObjects &&
+      gameObject.game.pipeline.gameObjects.includes(gameObject)
+    );
+  }
+
+  // Return the object for chaining
+  return go;
+}

package/src/mixins/draggable.js

@@ -0,0 +1,72 @@
+export function applyDraggable(go, options = {}) {
+  const game = go.game;
+  
+  // Clear any existing state to avoid duplicates
+  go.dragging = false;
+  go.dragOffset = { x: 0, y: 0 };
+  
+  // Clean up any existing event handlers to prevent duplicates
+  if (go._dragInputMoveHandler) {
+    game.events.off("inputmove", go._dragInputMoveHandler);
+  }
+  if (go._dragInputUpHandler) {
+    game.events.off("inputup", go._dragInputUpHandler);
+  }
+  
+  // Make sure the object is interactive
+  if (typeof go.enableInteractivity === 'function') {
+    go.enableInteractivity(go);
+  } else {
+    go.interactive = true;
+  }
+  
+  // Define the input handlers and store them on the object to allow cleanup
+  go._dragInputDownHandler = (e) => {
+//    console.log("Drag input down", go.constructor.name);
+    go.dragging = true;
+    
+    // Calculate offset from mouse position to object center
+    go.dragOffset.x = go.x - e.x;
+    go.dragOffset.y = go.y - e.y;
+    
+    if (options.onDragStart) options.onDragStart();
+  };
+  
+  go._dragInputMoveHandler = (e) => {
+    //console.log("Drag input move", go.constructor.name, "dragging:", go.dragging);
+    if (go.dragging) {
+      //console.log("Actually dragging", go.x, go.y, "to", e.x + go.dragOffset.x, e.y + go.dragOffset.y);
+      // Directly update position
+      go.x = e.x + go.dragOffset.x;
+      go.y = e.y + go.dragOffset.y;
+    }
+  };
+  
+  go._dragInputUpHandler = (e) => {
+    //console.log("Drag input up", go.constructor.name, "dragging:", go.dragging);
+    if (!go.dragging) return;
+    
+    go.dragging = false;
+    if (options.onDragEnd) options.onDragEnd();
+  };
+  
+  // Bind the event handlers
+  go.on("inputdown", go._dragInputDownHandler);
+  game.events.on("inputmove", go._dragInputMoveHandler);
+  game.events.on("inputup", go._dragInputUpHandler);
+  
+  // Return a cleanup function
+  return () => {
+    // Remove event listeners
+    go.off("inputdown", go._dragInputDownHandler);
+    game.events.off("inputmove", go._dragInputMoveHandler);
+    game.events.off("inputup", go._dragInputUpHandler);
+    
+    // Clean up properties
+    delete go._dragInputDownHandler;
+    delete go._dragInputMoveHandler;
+    delete go._dragInputUpHandler;
+    delete go.dragging;
+    delete go.dragOffset;
+  };
+}

package/src/mixins/index.js

@@ -0,0 +1,2 @@
+export * from "./draggable.js";
+export * from "./anchor.js";

package/src/motion/bezier.js

@@ -0,0 +1,132 @@
+import { Motion } from "./motion";
+
+/**
+ * Bezier curve motion animation with yoyo support
+ *
+ * @param {Array<number>} p0 - Start point [x, y]
+ * @param {Array<number>} p1 - Control point 1 [x, y]
+ * @param {Array<number>} p2 - Control point 2 [x, y]
+ * @param {Array<number>} p3 - End point [x, y]
+ * @param {number} elapsedTime - Total elapsed time in seconds
+ * @param {number} duration - Duration of animation in seconds
+ * @param {boolean} [loop=false] - Whether animation should loop
+ * @param {boolean} [yoyo=false] - Whether animation should return to start
+ * @param {Function} [easingFn=null] - Optional easing function to apply
+ * @param {Object} [callbacks] - Optional callback functions
+ * @param {Object} [state] - Internal state tracking for callbacks
+ * @returns {Object} Animation result with x, y coordinates and metadata
+ */
+export function bezierV1(
+  p0,
+  p1,
+  p2,
+  p3,
+  elapsedTime,
+  duration,
+  loop = false,
+  yoyo = false,
+  easingFn = null,
+  callbacks = {},
+  state = null
+) {
+  // Early return for zero duration
+  if (duration <= 0) {
+    return Motion.animationResult(
+      { x: p3[0], y: p3[1], phase: "complete" },
+      1,
+      false,
+      true
+    );
+  }
+
+  // Normalize time (0-1) within current cycle
+  let t = elapsedTime / duration;
+  let yoyoPhase = "forward";
+  let loopCount = 0;
+
+  // Handle looping vs. non-looping
+  if (loop) {
+    // Calculate loop count (for callbacks)
+    loopCount = Math.floor(t);
+
+    // Use only the fractional part for looping (0-1 repeating)
+    t = t % 1;
+
+    // Call onLoop callback if provided and we crossed a loop boundary
+    if (loopCount > 0 && callbacks.onLoop) {
+      callbacks.onLoop(loopCount);
+    }
+  } else {
+    // Clamp to 1 for non-looping animations
+    if (t > 1) t = 1;
+  }
+
+  // Call onStart callback if needed (only when animation begins)
+  if (t > 0 && elapsedTime <= duration && callbacks.onStart) {
+    callbacks.onStart();
+  }
+
+  // Apply easing if provided
+  const easedT = easingFn ? easingFn(t) : t;
+
+  // Adjust time value for yoyo behavior
+  let adjustedT = easedT;
+
+  if (yoyo) {
+    // If in the second half of the animation, we're going back
+    if (t >= 0.5) {
+      // Rescale t to 0-1 for the second half, but reversed
+      adjustedT = 1 - (t - 0.5) * 2;
+      yoyoPhase = "return";
+
+      // Call onYoyoTurn callback at the turning point
+      if (t >= 0.5 && t < 0.51 && callbacks.onYoyoTurn) {
+        callbacks.onYoyoTurn();
+      }
+    } else {
+      // First half of animation
+      adjustedT = t * 2;
+      yoyoPhase = "forward";
+    }
+
+    // Apply easing to the adjusted time if needed
+    adjustedT = easingFn ? easingFn(adjustedT) : adjustedT;
+  }
+
+  // Cubic Bezier formula
+  const cx = 3 * (p1[0] - p0[0]);
+  const bx = 3 * (p2[0] - p1[0]) - cx;
+  const ax = p3[0] - p0[0] - cx - bx;
+
+  const cy = 3 * (p1[1] - p0[1]);
+  const by = 3 * (p2[1] - p1[1]) - cy;
+  const ay = p3[1] - p0[1] - cy - by;
+
+  const x =
+    ax * Math.pow(adjustedT, 3) +
+    bx * Math.pow(adjustedT, 2) +
+    cx * adjustedT +
+    p0[0];
+  const y =
+    ay * Math.pow(adjustedT, 3) +
+    by * Math.pow(adjustedT, 2) +
+    cy * adjustedT +
+    p0[1];
+
+  // Check if non-looping animation is complete
+  const isDone = !loop && t >= 1;
+
+  // Call onComplete if animation has completed
+  if (isDone && callbacks.onComplete) {
+    callbacks.onComplete();
+  }
+
+  // Return standardized result with phase information
+  return Motion.animationResult(
+    { x, y, phase: yoyoPhase },
+    t,
+    loop,
+    isDone,
+    state
+  );
+}

package/src/motion/bounce.js

@@ -0,0 +1,58 @@
+import { Motion } from "./motion";
+
+/**
+ * Bounce animation - object drops and bounces with diminishing height
+ *
+ * @param {number} maxHeight - Maximum height (negative y value)
+ * @param {number} groundY - Ground position (positive y value)
+ * @param {number} bounceCount - Number of bounces to perform
+ * @param {number} elapsedTime - Total elapsed time in seconds
+ * @param {number} duration - Duration of animation in seconds
+ * @param {boolean} [loop=false] - Whether animation should loop
+ * @param {Function} [easingFn=null] - Optional easing function to apply
+ * @param {Object} [callbacks] - Optional callback functions
+ * @param {Object} [state] - Internal state tracking for callbacks
+ * @returns {Object} Animation result with y position and metadata
+ */
+export function bounceV1(
+  maxHeight,
+  groundY,
+  bounceCount,
+  elapsedTime,
+  duration,
+  loop = false,
+  easingFn = null,
+  callbacks = {},
+  state = null
+) {
+  // Update animation time and apply easing
+  const {
+    t,
+    easedT,
+    completed,
+    state: newState,
+  } = Motion._frame(elapsedTime, duration, loop, easingFn, callbacks, state);
+
+  // Divide the animation into segments based on bounce count
+  const segmentSize = 1 / (bounceCount + 1);
+  const segment = Math.min(Math.floor(easedT / segmentSize), bounceCount);
+  const segmentT = (easedT % segmentSize) / segmentSize;
+
+  // Calculate bounce height for this segment
+  const bounceHeight = maxHeight * Math.pow(0.6, segment);
+
+  // Use a simple sine wave for each bounce
+  // Sin goes from 0 to 1 to 0, we want -maxHeight to groundY to -maxHeight
+  // Transform the sin function to get bounce effect
+  const normalized = Math.sin(segmentT * Math.PI);
+  const y = groundY - normalized * (groundY - bounceHeight);
+
+  // Return standardized result
+  return Motion.animationResult(
+    { y, segment, bounceHeight },
+    t,
+    loop,
+    completed,
+    newState
+  );
+}