@guinetik/gcanvas 1.0.0

package/src/shapes/image.js

@@ -0,0 +1,192 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter";
+
+/**
+ * Draws an arbitrary pixel buffer inside the normal Shape pipeline.
+ *
+ * ───────────────────────────────────────────────────────────────────────────
+ * Usage:
+ * const data   = Painter.img.getImageData(0, 0, 320, 200);     // any ImageData
+ * const fract  = new ImageShape(data, { x: 100, y: 50, anchor: "center" });
+ * scene.add(fract);                                           // acts like any Shape
+ */
+export class ImageShape extends Shape {
+  /**
+   * @param {HTMLImageElement|HTMLCanvasElement|ImageBitmap|Video|ImageData} bitmap  Anything the 2‑D API understands
+   * @param {object} [options]                    Usual Shape options + anchor, etc.
+   */
+  constructor(bitmap, options = {}) {
+    if (!bitmap && !options.width && !options.height) {
+      throw new Error(
+        "ImageShape must be initialized with either a bitmap or width and height"
+      );
+    }
+    super(options);
+    
+    // Store the bitmap passed in
+    this._bitmap = bitmap ?? Painter.img.createImageData(options.width, options.height);
+    
+    // Set dimensions based on bitmap or options
+    this._width = options.width ?? bitmap?.width ?? 0;
+    this._height = options.height ?? bitmap?.height ?? 0;
+    
+    // Set anchor point (default to center)
+    this.anchor = options.anchor ?? "center";
+    
+    // Track anchor x/y offsets (0-1 range)
+    this._anchorX = 0.5;
+    this._anchorY = 0.5;
+    this._updateAnchorOffsets();
+    
+    // Enable image smoothing by default
+    this.smoothing = options.smoothing !== false;
+    
+    // ImageData can't be transformed directly; cache an off‑screen canvas
+    if (bitmap instanceof ImageData) {
+      this.buffer(bitmap);
+    }
+  }
+
+  /**
+   * Calculate anchor point offsets based on anchor string
+   * @private
+   */
+  _updateAnchorOffsets() {
+    // Parse anchor string to get x/y offsets
+    const anchor = this.anchor?.toLowerCase() ?? "center";
+    
+    // X offset: left=0, center=0.5, right=1
+    if (anchor.includes("left")) this._anchorX = 0;
+    else if (anchor.includes("right")) this._anchorX = 1;
+    else this._anchorX = 0.5;
+    
+    // Y offset: top=0, center=0.5, bottom=1
+    if (anchor.includes("top")) this._anchorY = 0;
+    else if (anchor.includes("bottom")) this._anchorY = 1;
+    else this._anchorY = 0.5;
+  }
+
+  /**
+   * Access the internal bitmap
+   * @returns {HTMLImageElement|HTMLCanvasElement|ImageBitmap|Video|ImageData} Current bitmap
+   */
+  get bitmap() {
+    return this._bitmap;
+  }
+
+  /**
+   * Change the internal bitmap
+   * @param {HTMLImageElement|HTMLCanvasElement|ImageBitmap|Video|ImageData} bmp New bitmap
+   */
+  set bitmap(bmp) {
+    //console.log("setting bitmap", bmp);
+    if (!bmp) return;
+    
+    this._bitmap = bmp;
+    
+    // Update width and height if not already set
+    if (!this._width && bmp.width) this._width = bmp.width;
+    if (!this._height && bmp.height) this._height = bmp.height;
+    
+    // If it's ImageData, prepare the buffer
+    if (bmp instanceof ImageData) {
+      this.buffer(bmp);
+    }
+  }
+
+  /**
+   * Create or update the canvas buffer for ImageData
+   * @param {ImageData} bitmap ImageData to put in the buffer
+   */
+  buffer(bitmap) {
+    if (!bitmap) return;
+    
+    //console.log("Creating buffer for ImageData", bitmap.width, "x", bitmap.height);
+    
+    // Create the buffer canvas if needed
+    if (!this._buffer) {
+      this._buffer = document.createElement("canvas");
+      //console.log("Created new buffer canvas");
+    }
+    
+    // Resize buffer if needed
+    if (this._buffer.width !== bitmap.width || this._buffer.height !== bitmap.height) {
+      this._buffer.width = bitmap.width;
+      this._buffer.height = bitmap.height;
+      //console.log("Resized buffer to", bitmap.width, "x", bitmap.height);
+    }
+    
+    // Draw the ImageData to the buffer canvas
+    const ctx = this._buffer.getContext("2d");
+    ctx.putImageData(bitmap, 0, 0);
+    //console.log("Updated buffer with ImageData");
+  }
+
+  /**
+   * Reset the image to an empty state
+   */
+  reset() {
+    this._buffer = null;
+    this._bitmap = Painter.img.createImageData(this.width, this.height);
+  }
+
+  /**
+   * Set the anchor point
+   * @param {string} anchor Anchor position (e.g. "center", "top-left")
+   */
+  setAnchor(anchor) {
+    this.anchor = anchor;
+    this._updateAnchorOffsets();
+  }
+
+  /* ------------------------------------------------------------------ draw */
+  /**
+   * Draw the image to the canvas
+   */
+  draw() {
+    // Skip drawing if not visible or no bitmap available
+    if (!this.visible) return;
+    if (!this._bitmap && !this._buffer) return;
+    
+    super.draw();
+    
+    // For ImageData, we must use the buffer
+    let source = (this._bitmap instanceof ImageData) ? this._buffer : this._bitmap;
+    
+    if (!source || (this._bitmap instanceof ImageData && !this._buffer)) {
+      // If we need a buffer but don't have one yet, try to create it
+      if (this._bitmap instanceof ImageData) {
+        this.buffer(this._bitmap);
+        source = this._buffer;
+      }
+      
+      // If we still don't have a valid source, skip drawing
+      if (!source) return;
+    }
+    
+    // Delegates all transform/alpha/smoothing handling to Painter.img.draw
+    Painter.img.draw(source, 0, 0, {
+      width: this.width,
+      height: this.height,
+      anchor: this.anchor,
+      rotation: this.rotation,
+      scaleX: this.scaleX,
+      scaleY: this.scaleY,
+      alpha: this.opacity,
+      smoothing: this.smoothing,
+      flipX: this.scaleX < 0,
+      flipY: this.scaleY < 0,
+    });
+  }
+
+  /* ---------------------------------------------------- bounds & geometry */
+  /** Re‑compute bounding box (called by base class when something changes). */
+  calculateBounds() {
+    return {
+      x: -this._anchorX * this.width,
+      y: -this._anchorY * this.height,
+      width: this.width,
+      height: this.height,
+    };
+  }
+}

package/src/shapes/index.js

@@ -0,0 +1,111 @@
+/**
+ * @module Shapes
+ * @description Comprehensive collection of drawable shapes and visual elements for canvas rendering.
+ *
+ * This module provides a rich library of shape primitives that can be used to create
+ * complex visual elements in canvas-based games and applications. All shapes are built on
+ * a consistent foundation that includes:
+ *
+ * - Common positioning and sizing (x, y, width, height)
+ * - Transformation capabilities (rotation, scaling)
+ * - Styling options (fill, stroke, opacity)
+ * - Shadow effects
+ * - Consistent bounding box calculations for hit detection
+ *
+ * The hierarchy is as follows:
+ * - {@link Transformable}: Base class providing transformation properties
+ *   - {@link Shape}: Abstract base class adding drawing capabilities
+ *     - Numerous concrete shape implementations like {@link Rectangle}, {@link Circle}, {@link Cube}, etc.
+ *
+ * Each shape can be used standalone with the Painter system or wrapped in a
+ * GameObject to participate in the game's update/render pipeline.
+ *
+ * @example
+ * // Creating and styling a simple rectangle
+ * import { Rectangle } from './core/shapes';
+ * import { Painter } from './core/painter';
+ *
+ * // Initialize painter with canvas context
+ * Painter.init(ctx);
+ *
+ * // Create and draw a rectangle
+ * const rect = new Rectangle(100, 100, 200, 150, {
+ *   color: '#3498db',
+ *   stroke: '#2980b9',
+ *   lineWidth: 2,
+ *   rotation: Math.PI / 6,  // 30 degrees in radians
+ *   opacity: 0.8
+ * });
+ * rect.draw();
+ *
+ * @example
+ * // Creating a 3D-looking isometric cube
+ * import { Cube } from './core/shapes';
+ *
+ * const cube = new Cube(200, 200, 80, {
+ *   faceTopColor: '#e74c3c',
+ *   faceLeftColor: '#c0392b',
+ *   faceRightColor: '#a93226',
+ *   rotationX: Math.PI / 8,
+ *   rotationY: Math.PI / 6
+ * });
+ * cube.draw();
+ *
+ * @example
+ * // Adding text with wrapping capabilities
+ * import { WrappedText } from './core/shapes';
+ *
+ * const text = new WrappedText(50, 50,
+ *   "This is a longer text that will automatically wrap to fit within the specified width.",
+ *   300, 24, {
+ *     color: '#333',
+ *     font: '18px Arial',
+ *     align: 'center',
+ *     outlineColor: '#fff',
+ *     outlineWidth: 2
+ *   }
+ * );
+ * text.draw();
+ *
+ * @see {@link GameObject} For wrapping shapes in game objects to add to the pipeline
+ * @see {@link ShapeGOFactory} For a utility to quickly create GameObject wrappers for shapes
+ */
+//Shape Abstracts
+export { Euclidian } from "./euclidian.js";
+export { Geometry2d } from "./geometry.js";
+export { Traceable } from "./traceable.js";
+export { Renderable } from "./renderable.js";
+export { Transformable } from "./transformable.js";
+export { Transform } from "./transform.js";
+export { Shape } from "./shape.js";
+export { Group } from "./group.js";
+// Shape Primitives
+export { Arc } from "./arc.js";
+export { Circle } from "./circle.js";
+export { Cloud } from "./clouds.js";
+export { BezierShape } from "./bezier.js";
+export { Rectangle } from "./rect.js";
+export { RoundedRectangle } from "./roundrect.js";
+export { PatternRectangle } from "./pattern";
+export { Square } from "./square.js";
+export { Cube } from "./cube.js";
+export { Cone } from "./cone.js";
+export { Prism } from "./prism.js";
+export { Cylinder } from "./cylinder.js";
+export { Diamond } from "./diamond.js";
+export { Line } from "./line.js";
+export { Triangle } from "./triangle.js";
+export { Star } from "./star.js";
+export { Sphere } from "./sphere.js";
+export { Sphere3D } from "./sphere3d.js";
+export { SVGShape } from "./svg.js";
+export { StickFigure } from "./figure.js";
+export { Ring } from "./ring.js";
+export { Polygon } from "./poly.js";
+export { Arrow } from "./arrow.js";
+export { Pin } from "./pin.js";
+export { PieSlice } from "./slice.js";
+export { Hexagon } from "./hexagon.js";
+export { Heart } from "./heart.js";
+export { Cross } from "./cross.js";
+export * from "./text.js";

package/src/shapes/line.js

@@ -0,0 +1,29 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+export class Line extends Shape {
+  /**
+   * Creates a line shape centered around (x, y)
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} length - Length of the line
+   * @param {Object} options - Style options
+   */
+  constructor(length = 40, options = {}) {
+    super(options);
+    this.length = length;
+  }
+
+  draw() {
+    super.draw();
+    const half = this.length / 2;
+    Painter.lines.line(
+      -half,
+      -half,
+      half,
+      half,
+      this.stroke,
+      this.lineWidth
+    );
+  }
+}

package/src/shapes/pattern.js

@@ -0,0 +1,90 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * PatternRectangle - A drawable centered rectangle filled with a pattern.
+ * Supports lazy image loading and CanvasImageSource types.
+ */
+export class PatternRectangle extends Shape {
+  /**
+   * @param {CanvasImageSource|null} image - Optional pattern source
+   * @param {string} [repetition='repeat'] - Pattern repetition mode
+   * @param {Object} [options] - Shape rendering options
+   */
+  constructor(image = null, repetition = "repeat", options = {}) {
+    super(options);
+    this.image = image;
+    this.repetition = repetition;
+    this.pattern = null;
+
+    if (image) this._tryCreatePattern(image);
+  }
+
+  _tryCreatePattern(image) {
+    const isAsyncImage =
+      image instanceof HTMLImageElement ||
+      (typeof image.complete === "boolean");
+
+    if (isAsyncImage) {
+      if (image.complete) {
+        this._createPattern();
+      } else {
+        image.addEventListener("load", () => this._createPattern(), {
+          once: true,
+        });
+      }
+    } else {
+      this._createPattern();
+    }
+  }
+
+  _createPattern() {
+    this.pattern = Painter.img.createPattern(this.image, this.repetition);
+  }
+
+  setImage(image, repetition) {
+    this.image = image;
+    if (repetition) this.repetition = repetition;
+    this.pattern = null;
+    this._tryCreatePattern(image);
+  }
+
+  draw() {
+    super.draw();
+
+    if (!this.pattern && this.image) {
+      this._tryCreatePattern(this.image);
+    }
+
+    const x = -this.width / 2;
+    const y = -this.height / 2;
+
+    if (this.pattern) {
+      Painter.img.fillPattern(
+        this.pattern,
+        x,
+        y,
+        this.width,
+        this.height
+      );
+    } else if (this.strokeColor) {
+      Painter.shapes.outlineRect(
+        x,
+        y,
+        this.width,
+        this.height,
+        this.strokeColor,
+        this.lineWidth
+      );
+    }
+  }
+
+  getBounds() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+    };
+  }
+}

package/src/shapes/pin.js

@@ -0,0 +1,44 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+export class Pin extends Shape {
+  constructor(radius = 20, options = {}) {
+    super(options);
+    this.radius = radius;
+  }
+
+  draw() {
+    super.draw();
+    const r = this.radius;
+    const h = r * 2.5;
+    const baseY = 0;
+
+    Painter.lines.beginPath();
+
+    // Draw circle head
+    Painter.shapes.arc(0, baseY, r, Math.PI, 0);
+
+    // Draw tail (triangle)
+    Painter.lines.lineTo(r, baseY);
+    Painter.lines.lineTo(0, h);
+    Painter.lines.lineTo(-r, baseY);
+    Painter.lines.closePath();
+
+    if (this.color) {
+      Painter.colors.fill(this.color);
+    }
+
+    if (this.stroke) {
+      Painter.colors.stroke(this.stroke, this.lineWidth);
+    }
+  }
+
+  getBounds() {
+    return {
+      x: this.x,
+      y: this.y + this.radius * 0.98, // shift center lower
+      width: this.radius * 2,
+      height: this.radius * 2.5,
+    };
+  }
+}

package/src/shapes/poly.js

@@ -0,0 +1,31 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+export class Polygon extends Shape {
+  constructor(sides = 6, radius = 40, options = {}) {
+    super(options);
+    this.sides = sides;
+    this.radius = radius;
+  }
+
+  draw() {
+    super.draw();
+    const points = [];
+    const step = (2 * Math.PI) / this.sides;
+
+    for (let i = 0; i < this.sides; i++) {
+      const angle = i * step;
+      points.push({
+        x: Math.cos(angle) * this.radius,
+        y: Math.sin(angle) * this.radius,
+      });
+    }
+
+    Painter.shapes.polygon(
+      points,
+      this.color,
+      this.stroke,
+      this.lineWidth
+    );
+  }
+}