exodeui-react-native 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exodeui-react-native",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React Native runtime for ExodeUI animations",
   "main": "index.js",
   "files": [

package/src/engine.ts

@@ -1535,8 +1535,19 @@ export class ExodeUIEngine {
 
     canvas.save();
     canvas.translate(cx, cy);
-    if (rotation !== 0) canvas.rotate(rotation * Math.PI / 180, 0, 0); 
-    if (scaleX !== 1 || scaleY !== 1) canvas.scale(scaleX, scaleY);
+    
+    // Rotate around the center of the object
+    if (rotation !== 0) {
+        canvas.translate(w / 2, h / 2);
+        canvas.rotate(rotation * Math.PI / 180, 0, 0);
+        canvas.translate(-w / 2, -h / 2);
+    }
+
+    if (scaleX !== 1 || scaleY !== 1) {
+        canvas.translate(w / 2, h / 2);
+        canvas.scale(scaleX, scaleY);
+        canvas.translate(-w / 2, -h / 2);
+    }
 
     if (this._renderCount % 120 === 1) {
         console.log(`[ExodeUIEngine]   - Drawing object: ${obj.name || obj.id} (${obj.type}), pos: ${cx.toFixed(1)},${cy.toFixed(1)}`);
@@ -1638,15 +1649,15 @@ export class ExodeUIEngine {
       const segments = geom.segments || obj.segments || [];
 
       if (enableSegments && segments.length > 0) {
-          let offsetX = -w/2;
+          let offsetX = 0;
           const totalWidth = segments.reduce((acc: number, seg: any) => {
               const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
               return acc + font.getTextWidth(seg.text);
           }, 0);
 
           const align = geom.textAlign || 'left';
-          if (align === 'center') offsetX = -totalWidth / 2;
-          else if (align === 'right') offsetX = w/2 - totalWidth;
+          if (align === 'center') offsetX = (w - totalWidth) / 2;
+          else if (align === 'right') offsetX = w - totalWidth;
 
           segments.forEach((seg: any) => {
               const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
@@ -1655,7 +1666,9 @@ export class ExodeUIEngine {
               try { paint.setColor(Skia.Color(col.replace(/\s+/g, ''))); } catch { paint.setColor(Skia.Color('#ffffff')); }
               paint.setAlphaf((state?.opacity ?? 1) * (seg.fill?.opacity ?? 1));
               
-              canvas.drawText(seg.text, offsetX, 0, paint, font);
+              const fontSize = seg.fontSize || geom.fontSize || 14;
+              const y = fontSize; // Basic baseline
+              canvas.drawText(seg.text, offsetX, y, paint, font);
               offsetX += font.getTextWidth(seg.text);
           });
           return;
@@ -1682,12 +1695,12 @@ export class ExodeUIEngine {
       
       const align = geom.textAlign || obj.textAlign || 'center';
       const textWidth = font.getTextWidth(text);
-      let x = -w/2;
-      if (align === 'center') x = -textWidth / 2;
-      else if (align === 'right') x = w/2 - textWidth;
+      let x = 0;
+      if (align === 'center') x = (w - textWidth) / 2;
+      else if (align === 'right') x = w - textWidth;
 
       // Check baseline 
-      const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? fontSize / 3 : fontSize / 2;
+      const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? (h + fontSize/2) / 2 : fontSize;
       canvas.drawText(text, x, y, paint, font);
   }
 
@@ -1722,8 +1735,8 @@ export class ExodeUIEngine {
           paint.setAlphaf(state?.opacity ?? 1);
           canvas.drawImageRect(
               img,
-              { x: 0, y: 0, width: img.width(), height: img.height() },
-              { x: -w/2, y: -h/2, width: w, height: h },
+              Skia.XYWHRect(0, 0, img.width(), img.height()),
+              Skia.XYWHRect(0, 0, w, h),
               paint
           );
       } else {
@@ -2105,11 +2118,11 @@ export class ExodeUIEngine {
       const svgContent = geometry.svgContent;
       if (!svgContent) return;
 
-      // Extract path data from potentially multiple <path d="..."> tags
-      const pathMatches = svgContent.matchAll(/d="([^"]+)"/g);
+      // Extract path data from potentially multiple <path d="..."> or d='...' tags
+      const pathMatches = svgContent.matchAll(/d=["']([^"']+)["']/g);
       const paths: string[] = [];
       for (const match of pathMatches) {
-          paths.push(match[1] as string);
+          if (match[1]) paths.push(match[1]);
       }
       
       if (paths.length === 0) return;
@@ -2118,30 +2131,34 @@ export class ExodeUIEngine {
       const style = state?.style || obj.style || {};
       
       paths.forEach(d => {
-          const path = Skia.Path.MakeFromSVGString(d);
-          if (!path) return;
-          
-          // Draw fill
-          if (style.fill && style.fill.type !== 'None') {
-              const paint = Skia.Paint();
-              const fillCol = style.fill.color || '#ffffff';
-              const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#ffffff';
-              try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#ffffff')); }
-              paint.setAlphaf((state?.opacity ?? 1) * (style.fill.opacity ?? 1));
-              paint.setStyle(PaintStyle.Fill);
-              canvas.drawPath(path, paint);
-          }
-          
-          // Draw stroke if enabled
-          if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false) {
-              const paint = Skia.Paint();
-              const strokeCol = style.stroke.color || '#000000';
-              const strokeColStr = typeof strokeCol === 'string' ? strokeCol.replace(/\s+/g, '') : '#000000';
-              try { paint.setColor(Skia.Color(strokeColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
-              paint.setStrokeWidth(style.stroke.width);
-              paint.setAlphaf((state?.opacity ?? 1) * (style.stroke.opacity ?? 1));
-              paint.setStyle(PaintStyle.Stroke);
-              canvas.drawPath(path, paint);
+          try {
+              const path = Skia.Path.MakeFromSVGString(d);
+              if (!path) return;
+              
+              // Draw fill
+              if (style.fill && style.fill.type !== 'None') {
+                  const paint = Skia.Paint();
+                  const fillCol = style.fill.color || '#ffffff';
+                  const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#ffffff';
+                  try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#ffffff')); }
+                  paint.setAlphaf((state?.opacity ?? 1) * (style.fill.opacity ?? 1));
+                  paint.setStyle(PaintStyle.Fill);
+                  canvas.drawPath(path, paint);
+              }
+              
+              // Draw stroke if enabled
+              if (style.stroke && style.stroke.width > 0 && style.stroke.isEnabled !== false) {
+                  const paint = Skia.Paint();
+                  const strokeCol = style.stroke.color || '#000000';
+                  const strokeColStr = typeof strokeCol === 'string' ? strokeCol.replace(/\s+/g, '') : '#000000';
+                  try { paint.setColor(Skia.Color(strokeColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
+                  paint.setStrokeWidth(style.stroke.width);
+                  paint.setAlphaf((state?.opacity ?? 1) * (style.stroke.opacity ?? 1));
+                  paint.setStyle(PaintStyle.Stroke);
+                  canvas.drawPath(path, paint);
+              }
+          } catch (e) {
+              console.warn(`[ExodeUIEngine] Failed to parse SVG path for ${obj.id}:`, e);
           }
       });
   }
@@ -2304,8 +2321,8 @@ export class ExodeUIEngine {
     const style = state.style || obj.style;
 
     const path = Skia.Path.Make();
+    const rect = Skia.XYWHRect(0, 0, w, h);
     if (geometry.type === 'Rectangle') {
-        const rect = { x: -w/2, y: -h/2, width: w, height: h };
         if (state.cornerRadius !== undefined || geometry.corner_radius !== undefined) {
             const rawCr = state.cornerRadius ?? geometry.corner_radius;
             const cr = Array.isArray(rawCr) ? rawCr[0] : Number(rawCr);
@@ -2314,11 +2331,11 @@ export class ExodeUIEngine {
             path.addRect(rect);
         }
     } else if (geometry.type === 'Ellipse') {
-        path.addOval({ x: -w/2, y: -h/2, width: w, height: h });
+        path.addOval(rect);
     } else if (geometry.type === 'Triangle') {
-        path.moveTo(0, -h/2);
-        path.lineTo(w/2, h/2);
-        path.lineTo(-w/2, h/2);
+        path.moveTo(w / 2, 0);
+        path.lineTo(w, h);
+        path.lineTo(0, h);
         path.close();
     } else if (geometry.type === 'Star') {
          const ir = geometry.inner_radius || 20; 
@@ -2327,8 +2344,8 @@ export class ExodeUIEngine {
          for (let i = 0; i < sp * 2; i++) {
              const a = (i * Math.PI / sp) - (Math.PI / 2);
              const rad = i % 2 === 0 ? or : ir;
-             const px = rad * Math.cos(a);
-             const py = rad * Math.sin(a);
+             const px = w/2 + rad * Math.cos(a);
+             const py = h/2 + rad * Math.sin(a);
              if (i === 0) path.moveTo(px, py);
              else path.lineTo(px, py);
          }
@@ -2342,14 +2359,14 @@ export class ExodeUIEngine {
       if (style.fill.type === 'LinearGradient' && style.fill.stops && style.fill.stops.length >= 2) {
           const colors = style.fill.stops.map((s: any) => Skia.Color(s.color.replace(/\s+/g, '')));
           const offsets = style.fill.stops.map((s: any) => s.offset);
-          const start = style.fill.start ? { x: -w/2 + style.fill.start[0] * w, y: -h/2 + style.fill.start[1] * h } : { x: -w/2, y: 0 };
-          const end = style.fill.end ? { x: -w/2 + style.fill.end[0] * w, y: -h/2 + style.fill.end[1] * h } : { x: w/2, y: 0 };
+          const start = style.fill.start ? { x: style.fill.start[0] * w, y: style.fill.start[1] * h } : { x: 0, y: 0 };
+          const end = style.fill.end ? { x: style.fill.end[0] * w, y: style.fill.end[1] * h } : { x: w, y: 0 };
           paint.setShader(Skia.Shader.MakeLinearGradient(Skia.Point(start.x, start.y), Skia.Point(end.x, end.y), colors, offsets, TileMode.Clamp));
           hasShader = true;
       } else if (style.fill.type === 'RadialGradient' && style.fill.stops && style.fill.stops.length >= 2) {
           const colors = style.fill.stops.map((s: any) => Skia.Color(s.color.replace(/\s+/g, '')));
           const offsets = style.fill.stops.map((s: any) => s.offset);
-          const center = style.fill.center ? { x: -w/2 + style.fill.center[0] * w, y: -h/2 + style.fill.center[1] * h } : { x: 0, y: 0 };
+          const center = style.fill.center ? { x: style.fill.center[0] * w, y: style.fill.center[1] * h } : { x: w/2, y: h/2 };
           const radius = (style.fill.radius || 0.5) * Math.max(w, h);
           paint.setShader(Skia.Shader.MakeRadialGradient(Skia.Point(center.x, center.y), radius, colors, offsets, TileMode.Clamp));
           hasShader = true;
@@ -2357,7 +2374,6 @@ export class ExodeUIEngine {
           const img = this.getOrDecodeImage(style.fill.url);
           if (img) {
               const matrix = Skia.Matrix();
-              matrix.translate(-w/2, -h/2);
               matrix.scale(w / img.width(), h / img.height());
               paint.setShader(img.makeShaderOptions(0, 0, 0, 0, matrix));
               hasShader = true;
@@ -2375,7 +2391,7 @@ export class ExodeUIEngine {
 
       // Apply clipping for Frame types before drawing
       if (obj.type === 'Frame' || (obj as any).clipContent) {
-          canvas.clipRect({ x: -w/2, y: -h/2, width: w, height: h }, ClipOp.Intersect, true);
+          canvas.clipRect(rect, ClipOp.Intersect, true);
       }
 
       if (style.shadow && style.shadow.opacity > 0) {