exodeui-react-native 1.1.0 → 1.2.0

package/package.json

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

package/src/engine.ts

@@ -1,4 +1,4 @@
-import { SkCanvas, SkImage, SkPaint, PaintStyle, Skia, SkPath, SkColor, BlurStyle, SkImageFilter, SkMaskFilter, ClipOp, matchFont, FontStyle, SkFont } from '@shopify/react-native-skia';
+import { SkCanvas, SkImage, SkPaint, PaintStyle, Skia, SkPath, SkColor, BlurStyle, SkImageFilter, SkMaskFilter, ClipOp, matchFont, FontStyle, SkFont, TileMode } from '@shopify/react-native-skia';
 import { Artboard, Animation as SDKAnimation, ShapeObject, StateMachine, State, Fit, Alignment, Layout, LogicNode, LogicOp, Constraint, ComponentEvent } from './types';
 import { PhysicsEngine, MatterPhysics } from './physics';
 
@@ -1240,21 +1240,21 @@ export class ExodeUIEngine {
 
   private getWorldTransform(objId: string): { x: number, y: number, scaleX: number, scaleY: number, rotation: number } {
       const state = this.objectStates.get(objId);
-      if (!state) return { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 };
-      
       const obj = this.artboard?.objects.find(o => o.id === objId);
-      if (!obj || !obj.parentId) {
-          return {
-              x: state.x,
-              y: state.y,
-              scaleX: state.scale_x ?? 1,
-              scaleY: state.scale_y ?? 1,
-              rotation: state.rotation ?? 0
-          };
+      if (!obj) return { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 };
+      
+      const transform = obj.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
+      const lx = state?.x !== undefined ? state.x : transform.x;
+      const ly = state?.y !== undefined ? state.y : transform.y;
+      const lsX = state?.scale_x !== undefined ? state.scale_x : (transform.scale_x ?? 1);
+      const lsY = state?.scale_y !== undefined ? state.scale_y : (transform.scale_y ?? 1);
+      const lRot = state?.rotation !== undefined ? state.rotation : transform.rotation;
+
+      if (!obj.parentId || obj.parentId === 'root') {
+          return { x: lx, y: ly, scaleX: lsX, scaleY: lsY, rotation: lRot };
       }
 
       const parentWorld = this.getWorldTransform(obj.parentId);
-      
       const rad = parentWorld.rotation * (Math.PI / 180);
       const cos = Math.cos(rad);
       const sin = Math.sin(rad);
@@ -1518,23 +1518,27 @@ export class ExodeUIEngine {
 
   private renderObject(canvas: any, obj: ShapeObject) {
     const state = this.objectStates.get(obj.id);
-    if (!state || state.visible === false) return;
+    const isVisible = state?.visible !== undefined ? state.visible : obj.isVisible !== false;
+    if (!isVisible) return;
 
-    const geometry = state.geometry || obj.geometry;
-    const w = state.width || (geometry as any).width || 0;
-    const h = state.height || (geometry as any).height || 0;
-    const cx = state.x || 0;
-    const cy = state.y || 0;
-    const rotation = state.rotation || 0;
-    const scaleX = state.scale_x === undefined ? 1 : state.scale_x;
-    const scaleY = state.scale_y === undefined ? 1 : state.scale_y;
+    const geometry = state?.geometry || obj.geometry;
+    const w = state?.width || (geometry as any).width || 0;
+    const h = state?.height || (geometry as any).height || 0;
+    
+    // Resolve transform: use state if present, otherwise use object defaults
+    const transform = obj.transform || { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 };
+    const cx = state?.x !== undefined ? state.x : transform.x;
+    const cy = state?.y !== undefined ? state.y : transform.y;
+    const rotation = state?.rotation !== undefined ? state.rotation : transform.rotation;
+    const scaleX = state?.scale_x !== undefined ? state.scale_x : (transform.scale_x ?? 1);
+    const scaleY = state?.scale_y !== undefined ? state.scale_y : (transform.scale_y ?? 1);
 
     canvas.save();
     canvas.translate(cx, cy);
-    canvas.rotate(rotation * Math.PI / 180, 0, 0); 
-    canvas.scale(scaleX, scaleY);
+    if (rotation !== 0) canvas.rotate(rotation * Math.PI / 180, 0, 0); 
+    if (scaleX !== 1 || scaleY !== 1) canvas.scale(scaleX, scaleY);
 
-    if (this._renderCount % 60 === 1) {
+    if (this._renderCount % 120 === 1) {
         console.log(`[ExodeUIEngine]   - Drawing object: ${obj.name || obj.id} (${obj.type}), pos: ${cx.toFixed(1)},${cy.toFixed(1)}`);
     }
 
@@ -1630,13 +1634,40 @@ export class ExodeUIEngine {
   private renderText(canvas: any, obj: any, w: number, h: number) {
       const state = this.objectStates.get(obj.id);
       const geom = state?.geometry || obj.geometry;
+      const enableSegments = geom.enableSegments || obj.enableSegments || false;
+      const segments = geom.segments || obj.segments || [];
+
+      if (enableSegments && segments.length > 0) {
+          let offsetX = -w/2;
+          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;
+
+          segments.forEach((seg: any) => {
+              const font = this.getFont(seg.fontSize || geom.fontSize || 14, seg.fontFamily || geom.fontFamily || 'System');
+              const paint = Skia.Paint();
+              const col = seg.fill?.color || geom.fill?.color || '#ffffff';
+              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);
+              offsetX += font.getTextWidth(seg.text);
+          });
+          return;
+      }
+
       const text = obj.text || geom.text || '';
       if (!text) return;
 
       const paint = Skia.Paint();
       const colorValue = obj.style?.fill?.color || '#ffffff';
       try {
-          const skColor = Skia.Color(colorValue);
+          const skColor = Skia.Color(colorValue.replace(/\s+/g, ''));
           paint.setColor(skColor);
       } catch (e) {
           paint.setColor(Skia.Color('#ffffff'));
@@ -1647,26 +1678,16 @@ export class ExodeUIEngine {
       paint.setAlphaf(Math.max(0, Math.min(1, opacity1 * opacity2)));
 
       const fontSize = geom.fontSize || 14;
-      const font = this.getFont(fontSize, geom.fontFamily || obj.fontFamily || 'System');
+      const font = this.getFont(fontSize, geom.fontFamily || obj.fontFamily || 'Helvetica Neue');
       
       const align = geom.textAlign || obj.textAlign || 'center';
-      let x = -w/2;
-      
-      // Calculate text width for alignment
       const textWidth = font.getTextWidth(text);
-      if (align === 'center') {
-          x = -textWidth / 2;
-      } else if (align === 'right') {
-          x = w/2 - textWidth;
-      }
+      let x = -w/2;
+      if (align === 'center') x = -textWidth / 2;
+      else if (align === 'right') x = w/2 - textWidth;
 
-      if (this._renderCount % 60 === 1) {
-          console.log(`[ExodeUIEngine] Drawing text: "${text}" align=${align} width=${textWidth} x=${x} color=${colorValue} alpha=${paint.getAlphaf()} font_size=${font.getSize()}`);
-      }
-      
-      // Check baseline (web typically aligns center of text roughly to center if no baseline is provided, but standard is y=fontSize/2 or similar)
+      // Check baseline 
       const y = geom.verticalAlign === 'center' || !geom.verticalAlign ? fontSize / 3 : fontSize / 2;
-      
       canvas.drawText(text, x, y, paint, font);
   }
 
@@ -2084,12 +2105,45 @@ export class ExodeUIEngine {
       const svgContent = geometry.svgContent;
       if (!svgContent) return;
 
-      // In a real implementation, we'd parse the SVG or use a pre-parsed Skia Path
-      // For now, placeholder or basic path if it's a simple icon
-      const paint = Skia.Paint();
-      paint.setColor(Skia.Color('#ffffff'));
-      paint.setAlphaf(0.8);
-      canvas.drawCircle(0, 0, Math.min(w, h) / 4, paint);
+      // Extract path data from potentially multiple <path d="..."> tags
+      const pathMatches = svgContent.matchAll(/d="([^"]+)"/g);
+      const paths: string[] = [];
+      for (const match of pathMatches) {
+          paths.push(match[1] as string);
+      }
+      
+      if (paths.length === 0) return;
+
+      const state = this.objectStates.get(obj.id);
+      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);
+          }
+      });
   }
 
   private renderLineGraph(canvas: any, geom: any, w: number, h: number) {
@@ -2284,27 +2338,46 @@ export class ExodeUIEngine {
     if (style.fill) {
       const paint = Skia.Paint();
       
-      let hasImageFill = false;
-      if ((style.fill.type === 'Image' || style.fill.type === 'Pattern' || style.fill.url) && style.fill.url) {
+      let hasShader = false;
+      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 };
+          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 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;
+      } else if ((style.fill.type === 'Image' || style.fill.type === 'Pattern') && style.fill.url) {
           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));
-              hasImageFill = true;
+              hasShader = true;
           }
       }
       
-      if (!hasImageFill) {
-          const fillCol = style.fill.color;
+      if (!hasShader) {
+          const fillCol = style.fill.color || '#000000';
           const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#000000';
           try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
       }
       
-      paint.setAlphaf(Math.max(0, Math.min(1, (state.opacity ?? 1) * (style.fill.opacity ?? 1))));
+      paint.setAlphaf(Math.max(0, Math.min(1, (state?.opacity ?? 1) * (style.fill.opacity ?? 1))));
       paint.setStyle(PaintStyle.Fill);
 
+      // 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);
+      }
+
       if (style.shadow && style.shadow.opacity > 0) {
           const alphaHex = Math.round(style.shadow.opacity * 255).toString(16).padStart(2, '0');
           const colorWithAlpha = `${style.shadow.color}${alphaHex}`;