@guinetik/gcanvas 1.0.5 → 2.0.0

package/src/shapes/image.js

@@ -147,23 +147,23 @@ export class ImageShape extends Shape {
     // 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,

package/src/shapes/index.js

@@ -95,6 +95,8 @@ export { Cylinder } from "./cylinder.js";
 export { Diamond } from "./diamond.js";
 export { Line } from "./line.js";
 export { Triangle } from "./triangle.js";
+export { RightTriangle } from "./righttriangle.js";
+export { Parallelogram } from "./parallelogram.js";
 export { Star } from "./star.js";
 export { Sphere } from "./sphere.js";
 export { Sphere3D } from "./sphere3d.js";

package/src/shapes/parallelogram.js

@@ -0,0 +1,147 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * Parallelogram
+ * -------------
+ *
+ * A four-sided shape with opposite sides parallel. The shape is defined by
+ * its width, height, and slant offset.
+ *
+ * ### Geometry
+ *
+ * ```
+ *    slant
+ *   ├───┤
+ *   ●───────────● ─┬─
+ *  /           /   │ height
+ * ●───────────●   ─┴─
+ * ├───────────┤
+ *     width
+ * ```
+ *
+ * - `width`: Length of the top and bottom edges
+ * - `height`: Perpendicular distance between top and bottom
+ * - `slant`: Horizontal offset of top edge relative to bottom (positive = right, negative = left)
+ *
+ * ### Positioning
+ *
+ * The shape is centered at its geometric center (centroid).
+ *
+ * @extends Shape
+ */
+export class Parallelogram extends Shape {
+  /**
+   * @param {Object} [options={}] - Shape options
+   * @param {number} [options.width=100] - Width of the parallel edges
+   * @param {number} [options.height=50] - Height (perpendicular distance)
+   * @param {number} [options.slant] - Horizontal offset of top edge (defaults to height for 45° slant)
+   * @param {boolean} [options.flipX=false] - Mirror horizontally (slant in opposite direction)
+   */
+  constructor(options = {}) {
+    super(options);
+    this._pgWidth = options.width ?? 100;
+    this._pgHeight = options.height ?? 50;
+    this._slant = options.slant ?? this._pgHeight; // Default 45° slant
+    this._flipX = options.flipX ?? false;
+    this._updateDimensions();
+  }
+
+  /** @type {number} Width of the parallel edges */
+  get pgWidth() {
+    return this._pgWidth;
+  }
+
+  set pgWidth(v) {
+    this._pgWidth = v;
+    this._updateDimensions();
+    this.invalidateCache();
+  }
+
+  /** @type {number} Height (perpendicular distance between edges) */
+  get pgHeight() {
+    return this._pgHeight;
+  }
+
+  set pgHeight(v) {
+    this._pgHeight = v;
+    this._updateDimensions();
+    this.invalidateCache();
+  }
+
+  /** @type {number} Horizontal offset of top edge */
+  get slant() {
+    return this._slant;
+  }
+
+  set slant(v) {
+    this._slant = v;
+    this._updateDimensions();
+    this.invalidateCache();
+  }
+
+  /** @type {boolean} Whether to mirror horizontally */
+  get flipX() {
+    return this._flipX;
+  }
+
+  set flipX(v) {
+    this._flipX = v;
+    this.invalidateCache();
+  }
+
+  _updateDimensions() {
+    // Bounding box includes the slant
+    this._width = this._pgWidth + Math.abs(this._slant);
+    this._height = this._pgHeight;
+  }
+
+  /**
+   * Get the vertices of the parallelogram, centered at origin.
+   * @returns {Array<{x: number, y: number}>}
+   */
+  getVertices() {
+    const w = this._pgWidth;
+    const h = this._pgHeight;
+    let slant = this._slant;
+
+    if (this._flipX) {
+      slant = -slant;
+    }
+
+    // Calculate total width for centering
+    const totalWidth = w + Math.abs(slant);
+    const offsetX = -totalWidth / 2 + (slant < 0 ? -slant : 0);
+
+    // Vertices: bottom-left, bottom-right, top-right, top-left
+    // Bottom edge at y = h/2, top edge at y = -h/2
+    return [
+      { x: offsetX, y: h / 2 },                    // Bottom-left
+      { x: offsetX + w, y: h / 2 },                // Bottom-right
+      { x: offsetX + w + slant, y: -h / 2 },       // Top-right
+      { x: offsetX + slant, y: -h / 2 },           // Top-left
+    ];
+  }
+
+  draw() {
+    super.draw();
+    const vertices = this.getVertices();
+
+    Painter.shapes.polygon(
+      vertices,
+      this.color,
+      this.stroke,
+      this.lineWidth,
+      this.lineJoin
+    );
+  }
+
+  calculateBounds() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this._width,
+      height: this._height,
+    };
+  }
+}

package/src/shapes/righttriangle.js

@@ -0,0 +1,115 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * RightTriangle
+ * -------------
+ *
+ * A right isoceles triangle shape, commonly used in tangram puzzles.
+ *
+ * The triangle has:
+ * - Two equal legs of length `leg`
+ * - A right angle (90°) at one corner
+ * - Hypotenuse = leg × √2
+ *
+ * ### Positioning
+ *
+ * The triangle is centered at its centroid (center of mass).
+ * Before rotation, the right angle points toward the bottom-left (-135° from center).
+ *
+ * ```
+ *        ●────────● (leg, 0)
+ *       /|
+ *      / |
+ *     /  |  centroid at (leg/3, leg/3)
+ *    /   |
+ *   ●────┘ right angle at origin
+ * (0, leg)
+ * ```
+ *
+ * ### Rotation Reference
+ *
+ * To orient the right angle toward a specific direction:
+ * - Right angle pointing RIGHT: rotation = 0°
+ * - Right angle pointing DOWN: rotation = 90°
+ * - Right angle pointing LEFT: rotation = 180°
+ * - Right angle pointing UP: rotation = 270°
+ *
+ * Add 135° to these values since the default right angle is at -135° from centroid.
+ *
+ * @extends Shape
+ */
+export class RightTriangle extends Shape {
+  /**
+   * @param {number} leg - Length of the two equal legs
+   * @param {Object} [options={}] - Shape options (x, y, rotation, color, stroke, etc.)
+   */
+  constructor(leg = 50, options = {}) {
+    super(options);
+    this._leg = leg;
+    this._updateDimensions();
+  }
+
+  /** @type {number} Length of the equal legs */
+  get leg() {
+    return this._leg;
+  }
+
+  set leg(v) {
+    this._leg = v;
+    this._updateDimensions();
+    this.invalidateCache();
+  }
+
+  /** @type {number} Length of the hypotenuse (leg × √2) */
+  get hypotenuse() {
+    return this._leg * Math.SQRT2;
+  }
+
+  _updateDimensions() {
+    // Bounding box of the centered triangle
+    this._width = this._leg;
+    this._height = this._leg;
+  }
+
+  /**
+   * Get the vertices of the triangle, centered at origin.
+   * Right angle is at the adjusted (0,0) before centering.
+   * @returns {Array<{x: number, y: number}>}
+   */
+  getVertices() {
+    const leg = this._leg;
+    // Original vertices: right angle at (0,0), legs along +x and +y
+    // Centroid at (leg/3, leg/3)
+    const cx = leg / 3;
+    const cy = leg / 3;
+
+    return [
+      { x: -cx, y: -cy },           // Right angle corner
+      { x: leg - cx, y: -cy },      // End of horizontal leg
+      { x: -cx, y: leg - cy },      // End of vertical leg
+    ];
+  }
+
+  draw() {
+    super.draw();
+    const vertices = this.getVertices();
+
+    Painter.shapes.polygon(
+      vertices,
+      this.color,
+      this.stroke,
+      this.lineWidth,
+      this.lineJoin
+    );
+  }
+
+  calculateBounds() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this._width,
+      height: this._height,
+    };
+  }
+}