@guinetik/gcanvas 1.0.5 → 2.0.0

package/src/shapes/svg.js

@@ -5,6 +5,34 @@ import { Shape } from "./shape";
  * SVGShape - A specialized Shape class that can render SVG path data
  */
 export class SVGShape extends Shape {
+  /**
+   * Load an SVG file from a URL and create an SVGShape
+   * @param {string} url - URL to the SVG file
+   * @param {object} options - Standard shape options plus SVG-specific options
+   * @returns {Promise<SVGShape>} Promise that resolves to the SVGShape instance
+   */
+  static async fromURL(url, options = {}) {
+    const response = await fetch(url);
+    const svgText = await response.text();
+
+    // Parse SVG to extract path data
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, 'image/svg+xml');
+
+    // Get the first path element's d attribute
+    const pathElement = doc.querySelector('path');
+    if (!pathElement) {
+      throw new Error('No path element found in SVG');
+    }
+
+    const pathData = pathElement.getAttribute('d');
+    if (!pathData) {
+      throw new Error('Path element has no d attribute');
+    }
+
+    return new SVGShape(pathData, options);
+  }
+
   /**
    * @param {number} x - Center X position
    * @param {number} y - Center Y position
@@ -15,9 +43,10 @@ export class SVGShape extends Shape {
    * @param {number} [options.animationProgress=1] - Animation progress (0-1)
    */
   constructor(svgPathData, options = {}) {
-    console.log("SVGShape", options.x)
     super(options);
     // SVG specific options
+    // Note: 'scale' is for pre-scaling the path data
+    // scaleX/scaleY are inherited from Transformable for runtime transforms (e.g., flipping)
     this.scale = options.scale || 1;
     this.centerPath =
       options.centerPath !== undefined ? options.centerPath : true;
@@ -46,76 +75,201 @@ export class SVGShape extends Shape {
 
   /**
    * Parse an SVG path string into a command array for rendering
+   * Parses commands in sequential order to maintain path integrity
    * @param {string} svgPath - SVG path data string
    * @returns {Array} Array of path commands
    */
   parseSVGPath(svgPath) {
-    // Regular expressions to match SVG path commands
-    const moveRegex = /M\s*([-\d.]+)[,\s]*([-\d.]+)/g;
-    const lineRegex = /L\s*([-\d.]+)[,\s]*([-\d.]+)/g;
-    const curveRegex =
-      /C\s*([-\d.]+)[,\s]*([-\d.]+)\s*([-\d.]+)[,\s]*([-\d.]+)\s*([-\d.]+)[,\s]*([-\d.]+)/g;
-    const zRegex = /Z/g;
-
-    // Arrays to store the parsed commands
     const commands = [];
-
-    // Match and process Move commands (M)
+    
+    // Track current position for converting lines to curves
+    let currentX = 0;
+    let currentY = 0;
+    let subpathStartX = 0;
+    let subpathStartY = 0;
+    
+    // Single regex to match all commands in order
+    // Matches: M, m, L, l, H, h, V, v, C, c, S, s, Q, q, T, t, A, a, Z, z
+    const commandRegex = /([MLHVCSQTAZmlhvcsqtaz])([^MLHVCSQTAZmlhvcsqtaz]*)/g;
+    
     let match;
-    while ((match = moveRegex.exec(svgPath)) !== null) {
-      commands.push(["M", parseFloat(match[1]), parseFloat(match[2])]);
-    }
-
-    // Match and process Line commands (L)
-    while ((match = lineRegex.exec(svgPath)) !== null) {
-      // Convert line to bezier curve for animation
-      const x = parseFloat(match[1]);
-      const y = parseFloat(match[2]);
-
-      // Find the previous point to calculate the control points
-      let prevX = 0;
-      let prevY = 0;
-      for (let i = commands.length - 1; i >= 0; i--) {
-        const cmd = commands[i];
-        if (cmd[0] === "M") {
-          prevX = cmd[1];
-          prevY = cmd[2];
+    while ((match = commandRegex.exec(svgPath)) !== null) {
+      const command = match[1];
+      const argsStr = match[2].trim();
+      
+      // Parse numbers from arguments
+      const args = argsStr.length > 0 
+        ? argsStr.split(/[\s,]+/).map(parseFloat).filter(n => !isNaN(n))
+        : [];
+      
+      switch (command) {
+        case 'M': // Absolute moveto
+          for (let i = 0; i < args.length; i += 2) {
+            currentX = args[i];
+            currentY = args[i + 1];
+            if (i === 0) {
+              subpathStartX = currentX;
+              subpathStartY = currentY;
+              commands.push(['M', currentX, currentY]);
+            } else {
+              // Subsequent coordinate pairs are implicit lineto
+              commands.push(['L', currentX, currentY]);
+            }
+          }
+          break;
+          
+        case 'm': // Relative moveto
+          for (let i = 0; i < args.length; i += 2) {
+            currentX += args[i];
+            currentY += args[i + 1];
+            if (i === 0) {
+              subpathStartX = currentX;
+              subpathStartY = currentY;
+              commands.push(['M', currentX, currentY]);
+            } else {
+              commands.push(['L', currentX, currentY]);
+            }
+          }
           break;
-        } else if (cmd[0] === "C") {
-          prevX = cmd[5];
-          prevY = cmd[6];
+          
+        case 'L': // Absolute lineto
+          for (let i = 0; i < args.length; i += 2) {
+            const x = args[i];
+            const y = args[i + 1];
+            commands.push(['L', x, y]);
+            currentX = x;
+            currentY = y;
+          }
           break;
-        }
+          
+        case 'l': // Relative lineto
+          for (let i = 0; i < args.length; i += 2) {
+            currentX += args[i];
+            currentY += args[i + 1];
+            commands.push(['L', currentX, currentY]);
+          }
+          break;
+          
+        case 'H': // Absolute horizontal lineto
+          for (let i = 0; i < args.length; i++) {
+            currentX = args[i];
+            commands.push(['L', currentX, currentY]);
+          }
+          break;
+          
+        case 'h': // Relative horizontal lineto
+          for (let i = 0; i < args.length; i++) {
+            currentX += args[i];
+            commands.push(['L', currentX, currentY]);
+          }
+          break;
+          
+        case 'V': // Absolute vertical lineto
+          for (let i = 0; i < args.length; i++) {
+            currentY = args[i];
+            commands.push(['L', currentX, currentY]);
+          }
+          break;
+          
+        case 'v': // Relative vertical lineto
+          for (let i = 0; i < args.length; i++) {
+            currentY += args[i];
+            commands.push(['L', currentX, currentY]);
+          }
+          break;
+          
+        case 'C': // Absolute cubic bezier
+          for (let i = 0; i < args.length; i += 6) {
+            commands.push(['C', args[i], args[i+1], args[i+2], args[i+3], args[i+4], args[i+5]]);
+            currentX = args[i + 4];
+            currentY = args[i + 5];
+          }
+          break;
+          
+        case 'c': // Relative cubic bezier
+          for (let i = 0; i < args.length; i += 6) {
+            commands.push(['C', 
+              currentX + args[i], currentY + args[i+1],
+              currentX + args[i+2], currentY + args[i+3],
+              currentX + args[i+4], currentY + args[i+5]
+            ]);
+            currentX += args[i + 4];
+            currentY += args[i + 5];
+          }
+          break;
+          
+        case 'S': // Absolute smooth cubic bezier
+          for (let i = 0; i < args.length; i += 4) {
+            // Reflect previous control point
+            const lastCmd = commands[commands.length - 1];
+            let cp1x = currentX, cp1y = currentY;
+            if (lastCmd && lastCmd[0] === 'C') {
+              cp1x = 2 * currentX - lastCmd[3];
+              cp1y = 2 * currentY - lastCmd[4];
+            }
+            commands.push(['C', cp1x, cp1y, args[i], args[i+1], args[i+2], args[i+3]]);
+            currentX = args[i + 2];
+            currentY = args[i + 3];
+          }
+          break;
+          
+        case 's': // Relative smooth cubic bezier
+          for (let i = 0; i < args.length; i += 4) {
+            const lastCmd = commands[commands.length - 1];
+            let cp1x = currentX, cp1y = currentY;
+            if (lastCmd && lastCmd[0] === 'C') {
+              cp1x = 2 * currentX - lastCmd[3];
+              cp1y = 2 * currentY - lastCmd[4];
+            }
+            commands.push(['C', cp1x, cp1y, 
+              currentX + args[i], currentY + args[i+1],
+              currentX + args[i+2], currentY + args[i+3]
+            ]);
+            currentX += args[i + 2];
+            currentY += args[i + 3];
+          }
+          break;
+          
+        case 'Q': // Absolute quadratic bezier - convert to cubic
+          for (let i = 0; i < args.length; i += 4) {
+            const qx = args[i], qy = args[i+1];
+            const x = args[i+2], y = args[i+3];
+            // Convert quadratic to cubic control points
+            const cp1x = currentX + 2/3 * (qx - currentX);
+            const cp1y = currentY + 2/3 * (qy - currentY);
+            const cp2x = x + 2/3 * (qx - x);
+            const cp2y = y + 2/3 * (qy - y);
+            commands.push(['C', cp1x, cp1y, cp2x, cp2y, x, y]);
+            currentX = x;
+            currentY = y;
+          }
+          break;
+          
+        case 'q': // Relative quadratic bezier - convert to cubic
+          for (let i = 0; i < args.length; i += 4) {
+            const qx = currentX + args[i], qy = currentY + args[i+1];
+            const x = currentX + args[i+2], y = currentY + args[i+3];
+            const cp1x = currentX + 2/3 * (qx - currentX);
+            const cp1y = currentY + 2/3 * (qy - currentY);
+            const cp2x = x + 2/3 * (qx - x);
+            const cp2y = y + 2/3 * (qy - y);
+            commands.push(['C', cp1x, cp1y, cp2x, cp2y, x, y]);
+            currentX = x;
+            currentY = y;
+          }
+          break;
+          
+        case 'Z': // Close path
+        case 'z':
+          commands.push(['Z']);
+          currentX = subpathStartX;
+          currentY = subpathStartY;
+          break;
+          
+        // T, t (smooth quadratic) and A, a (arc) could be added if needed
       }
-
-      // Calculate control points for an approximated curve
-      // For a line, we can use control points that are 1/3 and 2/3 along the line
-      const cp1x = prevX + (x - prevX) / 3;
-      const cp1y = prevY + (y - prevY) / 3;
-      const cp2x = prevX + (2 * (x - prevX)) / 3;
-      const cp2y = prevY + (2 * (y - prevY)) / 3;
-
-      commands.push(["C", cp1x, cp1y, cp2x, cp2y, x, y]);
-    }
-
-    // Match and process Curve commands (C)
-    while ((match = curveRegex.exec(svgPath)) !== null) {
-      commands.push([
-        "C",
-        parseFloat(match[1]),
-        parseFloat(match[2]),
-        parseFloat(match[3]),
-        parseFloat(match[4]),
-        parseFloat(match[5]),
-        parseFloat(match[6]),
-      ]);
     }
-
-    // Match and process Close commands (Z)
-    if (zRegex.test(svgPath)) {
-      commands.push(["Z"]);
-    }
-
+    
     return commands;
   }
 
@@ -133,7 +287,7 @@ export class SVGShape extends Shape {
       maxY = -Infinity;
 
     for (const cmd of path) {
-      if (cmd[0] === "M") {
+      if (cmd[0] === "M" || cmd[0] === "L") {
         minX = Math.min(minX, cmd[1]);
         minY = Math.min(minY, cmd[2]);
         maxX = Math.max(maxX, cmd[1]);
@@ -156,9 +310,9 @@ export class SVGShape extends Shape {
 
     // Translate the center to the origin and scale
     return path.map((cmd) => {
-      if (cmd[0] === "M") {
+      if (cmd[0] === "M" || cmd[0] === "L") {
         return [
-          "M",
+          cmd[0],
           (cmd[1] - pathCenterX) * scale,
           (cmd[2] - pathCenterY) * scale,
         ];
@@ -192,7 +346,7 @@ export class SVGShape extends Shape {
       maxY = -Infinity;
 
     for (const cmd of path) {
-      if (cmd[0] === "M") {
+      if (cmd[0] === "M" || cmd[0] === "L") {
         minX = Math.min(minX, cmd[1]);
         minY = Math.min(minY, cmd[2]);
         maxX = Math.max(maxX, cmd[1]);
@@ -211,8 +365,8 @@ export class SVGShape extends Shape {
 
     // Scale without centering
     return path.map((cmd) => {
-      if (cmd[0] === "M") {
-        return ["M", cmd[1] * scale, cmd[2] * scale];
+      if (cmd[0] === "M" || cmd[0] === "L") {
+        return [cmd[0], cmd[1] * scale, cmd[2] * scale];
       } else if (cmd[0] === "C") {
         return [
           "C",
@@ -230,15 +384,20 @@ export class SVGShape extends Shape {
   }
 
   /**
-   * Calculate a point along a bezier curve at time t
+   * Calculate a point along a segment at time t
    * @param {Array} segment - Path segment command
    * @param {number} t - Time parameter (0-1)
    * @returns {Object} Point coordinates {x, y}
    */
-  getBezierPoint(segment, t) {
+  getPointOnSegment(segment, t) {
     if (segment[0] === "M") {
       // For move commands, just return the point
       return { x: segment[1], y: segment[2] };
+    } else if (segment[0] === "L") {
+      // For line commands, linear interpolation
+      const x = this.prevX + (segment[1] - this.prevX) * t;
+      const y = this.prevY + (segment[2] - this.prevY) * t;
+      return { x, y };
     } else if (segment[0] === "C") {
       // For Cubic Bezier curves, calculate the point at t
       const startX = this.prevX;
@@ -268,6 +427,13 @@ export class SVGShape extends Shape {
 
     return { x: 0, y: 0 };
   }
+  
+  /**
+   * @deprecated Use getPointOnSegment instead
+   */
+  getBezierPoint(segment, t) {
+    return this.getPointOnSegment(segment, t);
+  }
 
   /**
    * Get a subset of the path up to the current animation progress
@@ -279,7 +445,7 @@ export class SVGShape extends Shape {
     let segmentIndex = Math.floor(this.animationProgress * totalSegments);
     let segmentProgress = (this.animationProgress * totalSegments) % 1;
 
-    // Initialize with a null previous point to indicate no previous point exists
+    // Initialize previous point tracking
     let hasPrevPoint = false;
     this.prevX = 0;
     this.prevY = 0;
@@ -287,18 +453,14 @@ export class SVGShape extends Shape {
     // Add all completed segments
     for (let i = 0; i < segmentIndex; i++) {
       const cmd = this.pathCommands[i];
-
-      // Add to result
       result.push([...cmd]);
 
-      // Track points for bezier calculations
-      if (cmd[0] === "M") {
-        // For Move commands, just update position
+      // Track current position
+      if (cmd[0] === "M" || cmd[0] === "L") {
         this.prevX = cmd[1];
         this.prevY = cmd[2];
-        hasPrevPoint = true; // Now we have a previous point
+        hasPrevPoint = true;
       } else if (cmd[0] === "C") {
-        // For Bezier commands, update to end point
         this.prevX = cmd[5];
         this.prevY = cmd[6];
         hasPrevPoint = true;
@@ -315,31 +477,23 @@ export class SVGShape extends Shape {
         this.prevX = currentSegment[1];
         this.prevY = currentSegment[2];
         this.currentPoint = { x: currentSegment[1], y: currentSegment[2] };
-        hasPrevPoint = true;
+      } else if (currentSegment[0] === "L") {
+        // For Line commands, interpolate position
+        if (!hasPrevPoint) {
+          this.findPreviousPoint(segmentIndex);
+        }
+        const point = this.getPointOnSegment(currentSegment, segmentProgress);
+        result.push(['L', point.x, point.y]);
+        this.currentPoint = point;
       } else if (currentSegment[0] === "C") {
+        // For Curve commands, interpolate along bezier
         if (!hasPrevPoint) {
-          // If there's no previous point but we're trying to draw a curve,
-          // we need to find the closest previous Move command
-          for (let i = segmentIndex - 1; i >= 0; i--) {
-            if (this.pathCommands[i][0] === "M") {
-              this.prevX = this.pathCommands[i][1];
-              this.prevY = this.pathCommands[i][2];
-              hasPrevPoint = true;
-              break;
-            }
-          }
-
-          // If still no previous point, use (0,0)
-          if (!hasPrevPoint) {
-            this.prevX = 0;
-            this.prevY = 0;
-          }
+          this.findPreviousPoint(segmentIndex);
         }
-
-        // Calculate the partial curve point
-        const point = this.getBezierPoint(currentSegment, segmentProgress);
-
-        // Add partial curve to result
+        const point = this.getPointOnSegment(currentSegment, segmentProgress);
+        
+        // For partial bezier, we need to split the curve
+        // Simplified: just draw to the current point
         result.push([
           "C",
           currentSegment[1],
@@ -349,13 +503,40 @@ export class SVGShape extends Shape {
           point.x,
           point.y,
         ]);
-
         this.currentPoint = point;
+      } else if (currentSegment[0] === "Z") {
+        // Close path - add if we've progressed past it
+        if (segmentProgress > 0.5) {
+          result.push(['Z']);
+        }
+        this.currentPoint = { x: this.prevX, y: this.prevY };
       }
     }
 
     return result;
   }
+  
+  /**
+   * Find the previous point by looking back through commands
+   * @param {number} fromIndex - Index to search backwards from
+   */
+  findPreviousPoint(fromIndex) {
+    for (let i = fromIndex - 1; i >= 0; i--) {
+      const cmd = this.pathCommands[i];
+      if (cmd[0] === "M" || cmd[0] === "L") {
+        this.prevX = cmd[1];
+        this.prevY = cmd[2];
+        return;
+      } else if (cmd[0] === "C") {
+        this.prevX = cmd[5];
+        this.prevY = cmd[6];
+        return;
+      }
+    }
+    // Default to origin
+    this.prevX = 0;
+    this.prevY = 0;
+  }
 
   /**
    * Draw the SVG path

package/src/shapes/text.js

@@ -32,6 +32,10 @@ export class TextShape extends Shape {
 
   /**
    * Draw the text using Painter
+   *
+   * Text is drawn at an offset to center it within its bounding box.
+   * This ensures that regardless of alignment setting, the text's
+   * bounding box is centered at the object's (x, y) position.
    */
   draw() {
     super.draw();
@@ -39,7 +43,8 @@ export class TextShape extends Shape {
     Painter.text.setFont(this.font);
     Painter.text.setTextAlign(this.align);
     Painter.text.setTextBaseline(this.baseline);
-    Painter.text.fillText(this.text, 0, 0, this.color);
+    // Apply alignment offset to center text within its bounding box
+    Painter.text.fillText(this.text, -this._centerOffsetX, -this._centerOffsetY, this.color);
   }
 
   _calculateAlignmentOffsets() {
@@ -47,7 +52,13 @@ export class TextShape extends Shape {
     if (!Painter.text) return;
     // Measure text dimensions
     const metrics = Painter.text.measureTextDimensions(this.text, this.font);
+
     // Calculate horizontal center point offset
+    // Goal: center the text bounding box at (0, 0) in local coordinates
+    // We draw at (-_centerOffsetX), so:
+    //   left:   draw at -width/2 so text spans [-width/2, +width/2]
+    //   center: draw at 0 (already centered)
+    //   right:  draw at +width/2 so text spans [-width/2, +width/2]
     switch (this._align) {
       case "left":
         this._centerOffsetX = metrics.width / 2;
@@ -56,22 +67,27 @@ export class TextShape extends Shape {
         this._centerOffsetX = 0;
         break;
       case "right":
-        this._centerOffsetX = -metrics.width / 2 - 5;
+        this._centerOffsetX = -metrics.width / 2;
         break;
     }
+
     // Calculate vertical center point offset
+    // Goal: center the text bounding box at (0, 0) in local coordinates
+    // We draw at (-_centerOffsetY), so:
+    //   top:    draw at -height/2 so text spans [-height/2, +height/2]
+    //   middle: draw at 0 (already centered)
+    //   bottom: draw at +height/2 so text spans [-height/2, +height/2]
     switch (this._baseline) {
       case "top":
-        this._centerOffsetY = metrics.height/4;
+        this._centerOffsetY = metrics.height / 2;
         break;
       case "middle":
-        this._centerOffsetY = -2;
+        this._centerOffsetY = 0;
         break;
       case "bottom":
-        this._centerOffsetY = -metrics.height;
+        this._centerOffsetY = -metrics.height / 2;
         break;
     }
-    //console.log("calculateAlignmentOffsets", this._centerOffsetY, this._centerOffsetX);
   }
 
   getTextBounds() {

package/src/shapes/transformable.js

@@ -70,6 +70,11 @@ export class Transformable extends Renderable {
    */
   draw() {
     this.applyTransforms();
+    // Flush any stale canvas fill state before shape draws
+    // This prevents color bleeding between consecutive shape renders
+    const ctx = Painter.ctx;
+    ctx.beginPath();
+    ctx.fill();
     this.drawDebug();
   }