@guinetik/gcanvas 1.0.0

package/src/painter/painter.effects.js

@@ -0,0 +1,230 @@
+import { Painter } from "./painter";
+
+export class PainterEffects {
+  /**
+   * Set shadow properties
+   * @param {string} color - Shadow color
+   * @param {number} blur - Shadow blur
+   * @param {number} [offsetX=0] - Shadow X offset
+   * @param {number} [offsetY=0] - Shadow Y offset
+   * @returns {void}
+   */
+  static dropShadow(color, blur, offsetX = 0, offsetY = 0) {
+    Painter.ctx.shadowColor = color;
+    Painter.ctx.shadowBlur = blur;
+    Painter.ctx.shadowOffsetX = offsetX;
+    Painter.ctx.shadowOffsetY = offsetY;
+  }
+
+  /**
+   * Clear shadow
+   * @returns {void}
+   */
+  static clearShadow() {
+    Painter.ctx.shadowColor = "rgba(0, 0, 0, 0)";
+    Painter.ctx.shadowBlur = 0;
+    Painter.ctx.shadowOffsetX = 0;
+    Painter.ctx.shadowOffsetY = 0;
+  }
+
+  /**
+   * Set global alpha
+   * @param {number} alpha - Alpha value (0-1)
+   * @returns {void}
+   */
+  static setAlpha(alpha) {
+    Painter.ctx.globalAlpha = alpha;
+  }
+
+  /**
+   * Set global composite operation
+   * @param {GlobalCompositeOperation} operation - Composite operation
+   * @returns {void}
+   */
+  static setBlendMode(operation) {
+    Painter.ctx.globalCompositeOperation = operation;
+  }
+
+  /**
+   * Clip to a rectangular region
+   * @param {number} x - X coordinate
+   * @param {number} y - Y coordinate
+   * @param {number} width - Width
+   * @param {number} height - Height
+   * @returns {void}
+   */
+  static clipRect(x, y, width, height) {
+    Painter.ctx.beginPath();
+    Painter.ctx.rect(x, y, width, height);
+    Painter.ctx.clip();
+  }
+
+  /**
+   * Clip to a circular region
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} radius - Circle radius
+   * @returns {void}
+   */
+  static clipCircle(x, y, radius) {
+    Painter.ctx.beginPath();
+    Painter.shapes.arc(x, y, radius, 0, Math.PI * 2);
+    Painter.ctx.clip();
+  }
+
+  /**
+   * Apply a blur filter to a region
+   * @param {number} x - X coordinate
+   * @param {number} y - Y coordinate
+   * @param {number} width - Width
+   * @param {number} height - Height
+   * @param {number} blur - Blur amount (pixels)
+   * @returns {void}
+   */
+  static blurRegion(x, y, width, height, blur) {
+    // Save current filter
+    const currentFilter = Painter.ctx.filter;
+
+    // Apply blur filter
+    Painter.ctx.filter = `blur(${blur}px)`;
+
+    // Draw the region from the canvas back onto itself with the filter
+    const imageData = Painter.ctx.getImageData(x, y, width, height);
+    Painter.ctx.putImageData(imageData, x, y);
+
+    // Restore previous filter
+    Painter.ctx.filter = currentFilter;
+  }
+
+
+   // Static properties to track current effect state
+   static _activeEffects = new Map();
+   static _animationId = null;
+   
+   /**
+    * Create a glow effect that can be animated
+    * @param {string} color - Base color for the glow
+    * @param {number} blur - Initial blur amount
+    * @param {Object} [options] - Animation options
+    * @param {number} [options.pulseSpeed=0] - Speed of pulsing (0 for static)
+    * @param {number} [options.pulseMin=blur*0.5] - Minimum blur during pulsing
+    * @param {number} [options.pulseMax=blur*1.5] - Maximum blur during pulsing
+    * @param {number} [options.colorShift=0] - Hue shift speed (0 for static)
+    * @returns {Object} - Control object for the effect
+    */
+   static createGlow(color, blur, options = {}) {
+     const id = 'glow-' + Math.random().toString(36).substr(2, 9);
+     const defaultOptions = {
+       pulseSpeed: 0,
+       pulseMin: blur * 0.5,
+       pulseMax: blur * 1.5,
+       colorShift: 0
+     };
+     
+     const effectOptions = {...defaultOptions, ...options};
+     
+     // Create effect state
+     const effectState = {
+       id,
+       type: 'glow',
+       active: true,
+       time: 0,
+       color,
+       blur,
+       options: effectOptions,
+       
+       // Method to update effect parameters
+       update(params) {
+         Object.assign(this, params);
+         return this;
+       },
+       
+       // Method to stop the effect
+       stop() {
+         this.active = false;
+         PainterEffects._activeEffects.delete(this.id);
+         return this;
+       },
+       
+       // Method to apply the effect for the current frame
+       apply() {
+         if (!this.active) return;
+         
+         let currentBlur = this.blur;
+         let currentColor = this.color;
+         
+         // Apply animation if enabled
+         if (this.options.pulseSpeed > 0) {
+           const pulseFactor = Math.sin(this.time * this.options.pulseSpeed) * 0.5 + 0.5;
+           currentBlur = this.options.pulseMin + 
+                         pulseFactor * (this.options.pulseMax - this.options.pulseMin);
+         }
+         
+         if (this.options.colorShift > 0) {
+           // Apply color shift - would need color parsing and HSL conversion
+           // This is a simplified placeholder
+           currentColor = currentColor.replace('hue', 
+                                            (this.time * this.options.colorShift) % 360);
+         }
+         
+         // Apply the actual glow effect
+         Painter.ctx.shadowColor = currentColor;
+         Painter.ctx.shadowBlur = currentBlur;
+         Painter.ctx.shadowOffsetX = 0;
+         Painter.ctx.shadowOffsetY = 0;
+         
+         this.time += 1/60; // Assuming 60fps
+         return this;
+       }
+     };
+     
+     // Store and start tracking the effect
+     PainterEffects._activeEffects.set(id, effectState);
+     PainterEffects._startAnimationLoop();
+     
+     return effectState;
+   }
+   
+   /**
+    * Start the animation loop if not already running
+    * @private
+    */
+   static _startAnimationLoop() {
+     if (PainterEffects._animationId !== null) return;
+     
+     const animate = () => {
+       // Apply all active effects
+       PainterEffects._activeEffects.forEach(effect => {
+         if (effect.active) effect.apply();
+       });
+       
+       // Stop the loop if no active effects
+       if (PainterEffects._activeEffects.size === 0) {
+         cancelAnimationFrame(PainterEffects._animationId);
+         PainterEffects._animationId = null;
+         return;
+       }
+       
+       PainterEffects._animationId = requestAnimationFrame(animate);
+     };
+     
+     PainterEffects._animationId = requestAnimationFrame(animate);
+   }
+   
+   /**
+    * Clear all active effects
+    */
+   static clearAllEffects() {
+     PainterEffects._activeEffects.forEach(effect => effect.stop());
+     PainterEffects._activeEffects.clear();
+     
+     // Reset canvas context properties
+     Painter.ctx.shadowColor = "rgba(0, 0, 0, 0)";
+     Painter.ctx.shadowBlur = 0;
+     Painter.ctx.shadowOffsetX = 0;
+     Painter.ctx.shadowOffsetY = 0;
+     Painter.ctx.filter = "none";
+     Painter.ctx.globalAlpha = 1;
+     Painter.ctx.globalCompositeOperation = "source-over";
+   }
+}

package/src/painter/painter.img.js

@@ -0,0 +1,229 @@
+// ---------------------------------------------------------------------------
+// src/painter-images.js
+// Centralised helpers for Image, ImageData and bitmap work.
+// ---------------------------------------------------------------------------
+import { Painter } from "./painter";
+
+/**
+ * Painter.img – all Canvas 2D image utilities in one names‑space.
+ * Relies on a live Painter.ctx that points at the active canvas context.
+ */
+export class PainterImages {
+  /* ─────────────────────────────── DRAWING ────────────────────────────── */
+
+  /**
+   * Draw an image or canvas onto the current context.
+   * @param {CanvasImageSource} source  <img>, <canvas>, <video>, etc.
+   * @param {number}   x, y             Destination position (after transforms)
+   * @param {object}  [opts]            Declarative options
+   *   @prop {number}   width,height    Destination size (defaults → intrinsic)
+   *   @prop {object}   crop            { sx, sy, sw, sh } source rectangle
+   *   @prop {string}   anchor          top‑left | center | bottom‑right …
+   *   @prop {number}   rotation        Radians, about anchor point
+   *   @prop {number}   scaleX,scaleY   Independent or uniform scaling
+   *   @prop {boolean}  flipX,flipY     Mirror horizontally / vertically
+   *   @prop {number}   alpha           Multiplicative opacity (1 = opaque)
+   *   @prop {boolean}  smoothing       ImageSmoothingEnabled toggle
+   */
+  static draw(
+    source,
+    x = 0,
+    y = 0,
+    {
+      width,
+      height,
+      crop = null,
+      anchor = "top‑left",
+      rotation = 0,
+      scaleX = 1,
+      scaleY = 1,
+      flipX = false,
+      flipY = false,
+      alpha = 1,
+      smoothing = true,
+    } = {}
+  ) {
+    const ctx = Painter.ctx;
+    if (!ctx || !source) return;
+
+    const iw = width ?? (crop ? crop.sw : source.width ?? source.videoWidth);
+    const ih = height ?? (crop ? crop.sh : source.height ?? source.videoHeight);
+
+    const ax = { left: 0, center: 0.5, right: 1 }[anchor.split("-").pop()] ?? 0;
+    const ay = { top: 0, center: 0.5, bottom: 1 }[anchor.split("-")[0]] ?? 0;
+    const ox = -iw * ax;
+    const oy = -ih * ay;
+
+    ctx.save();
+    ctx.imageSmoothingEnabled = smoothing;
+    ctx.globalAlpha *= alpha;
+    ctx.translate(x, y);
+    if (rotation) ctx.rotate(rotation);
+    if (flipX || flipY) ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+    ctx.scale(scaleX, scaleY);
+
+    if (crop) {
+      const { sx, sy, sw, sh } = crop;
+      ctx.drawImage(source, sx, sy, sw, sh, ox, oy, iw, ih);
+    } else {
+      ctx.drawImage(source, ox, oy, iw, ih);
+    }
+    ctx.restore();
+  }
+
+  /** Quick alias for draw that only needs `{width,height}` overrides. */
+  static blit(source, x, y, w, h) {
+    this.draw(source, x, y, { width: w, height: h });
+  }
+
+  /* ───────────────────────────── PATTERNS ─────────────────────────────── */
+
+  /** `ctx.createPattern` shortcut. */
+  static createPattern(image, repetition = "repeat") {
+    return Painter.ctx.createPattern(image, repetition);
+  }
+
+  /**
+   * Fill a rectangle with a pattern in one line.
+   */
+  static fillPattern(image, x, y, width, height) {
+    const ctx = Painter.ctx;
+    ctx.save();
+    ctx.fillStyle = image;
+    ctx.fillRect(x, y, width, height);
+    ctx.restore();
+  }
+
+  /* ─────────────────────────── IMAGE DATA API ─────────────────────────── */
+
+  static createImageData(width, height) {
+    return Painter.ctx.createImageData(width, height);
+  }
+
+  static cloneImageData(imageData) {
+    return new ImageData(
+      new Uint8ClampedArray(imageData.data),
+      imageData.width,
+      imageData.height
+    );
+  }
+
+  static getImageData(x, y, width, height) {
+    return Painter.ctx.getImageData(x, y, width, height);
+  }
+
+  static putImageData(
+    imageData,
+    x,
+    y,
+    dirtyX = 0,
+    dirtyY = 0,
+    dirtyWidth = imageData.width,
+    dirtyHeight = imageData.height
+  ) {
+    Painter.ctx.putImageData(
+      imageData,
+      x,
+      y,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight
+    );
+  }
+
+  /**
+   * Map‑style pixel transform: pass a callback that returns [r,g,b,a].
+   * Very handy for simple filters without manual loop boilerplate.
+   */
+  static mapPixels(imageData, fn) {
+    const d = imageData.data;
+    for (let i = 0; i < d.length; i += 4) {
+      const idx = i >> 2;
+      const res = fn(d[i], d[i + 1], d[i + 2], d[i + 3], idx);
+      if (res) [d[i], d[i + 1], d[i + 2], d[i + 3]] = res;
+    }
+    return imageData;
+  }
+
+  /** Set one pixel in an ImageData object. */
+  static setPixel(imageData, x, y, r, g, b, a = 255) {
+    const i = (y * imageData.width + x) * 4;
+    const d = imageData.data;
+    d[i] = r;
+    d[i + 1] = g;
+    d[i + 2] = b;
+    d[i + 3] = a;
+  }
+
+  /* ───────────────────────────── BITMAP HELPERS ───────────────────────── */
+
+  /** Convert the **current canvas** to an ImageBitmap (cheap GPU upload). */
+  static async toBitmap({ type = "image/png", quality = 0.92 } = {}) {
+    const canvas = Painter.ctx.canvas;
+    const blob = await canvas.convertToBlob({ type, quality });
+    return createImageBitmap(blob);
+  }
+
+  /** Create an ImageBitmap from any CanvasImageSource. */
+  static async createBitmap(image) {
+    return createImageBitmap(image);
+  }
+
+  /* ───────────── ImageData ← raw pixels convenience ───────────── */
+
+  /**
+   * Converts a flat RGBA array into an ImageData object.
+   * @param {Uint8ClampedArray} rgbaArray
+   * @param {number} width
+   * @param {number} height
+   * @returns {ImageData}
+   */
+  static toImageData(rgbaArray, width, height) {
+    if (rgbaArray.length !== width * height * 4) {
+      throw new Error("Invalid RGBA array size for given dimensions");
+    }
+    return new ImageData(rgbaArray, width, height);
+  }
+
+  /**
+   * Asynchronously creates an ImageBitmap from raw RGBA data.
+   * Can be used directly with createPattern or drawImage.
+   * @param {Uint8ClampedArray} rgbaArray
+   * @param {number} width
+   * @param {number} height
+   * @returns {Promise<ImageBitmap>}
+   */
+  static async createImageBitmapFromPixels(rgbaArray, width, height) {
+    const imgData = this.toImageData(rgbaArray, width, height);
+    return await createImageBitmap(imgData);
+  }
+
+  /**
+   * Creates a pattern from ImageData via a temporary canvas.
+   * @param {ImageData} imageData
+   * @param {"repeat"|"repeat-x"|"repeat-y"|"no-repeat"} repeat
+   * @returns {CanvasPattern}
+   */
+  static createPatternFromImageData(imageData, repeat = "repeat") {
+    const canvas = document.createElement("canvas");
+    canvas.width = imageData.width;
+    canvas.height = imageData.height;
+    const ctx = canvas.getContext("2d");
+    ctx.putImageData(imageData, 0, 0);
+    return ctx.createPattern(canvas, repeat);
+  }
+
+  /**
+   * Shortcut to go directly from pixel array to CanvasPattern
+   * @param {Uint8ClampedArray} rgbaArray
+   * @param {number} width
+   * @param {number} height
+   * @param {string} repeat
+   * @returns {CanvasPattern}
+   */
+  static createPatternFromPixels(rgbaArray, width, height, repeat = "repeat") {
+    const imgData = this.toImageData(rgbaArray, width, height);
+    return this.createPatternFromImageData(imgData, repeat);
+  }
+}