exodeui-react-native 1.0.3 → 1.0.4

package/package.json

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

package/src/engine.ts

@@ -1629,31 +1629,41 @@ export class ExodeUIEngine {
       const opts = state?.options || obj.options || {};
       const paint = Skia.Paint();
       
-      const isPressed = this.draggingSliderId === obj.id; // Reuse logic for now
-      paint.setColor(Skia.Color(isPressed ? (opts.activeBackgroundColor || '#2563eb') : (opts.backgroundColor || '#3b82f6')));
+      const isPressed = this.draggingSliderId === obj.id;
+      // Parse color safely
+      const bgNormal = opts.backgroundColor || opts.background || '#3b82f6';
+      const bgActive = opts.activeBackgroundColor || opts.activeBackground || '#2563eb';
+      const bgStr = typeof bgNormal === 'string' ? bgNormal : '#3b82f6';
+      const bgActiveStr = typeof bgActive === 'string' ? bgActive : '#2563eb';
+      try {
+          paint.setColor(Skia.Color((isPressed ? bgActiveStr : bgStr).replace(/\s+/g, '')));
+      } catch {
+          paint.setColor(Skia.Color('#3b82f6'));
+      }
       
       const r = opts.cornerRadius ?? 8;
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
       
-      const label = opts.label || { text: opts.text || 'Button', fontSize: 14, color: '#ffffff' };
-      if (label && label.text) {
-          const textPaint = Skia.Paint();
-          textPaint.setColor(Skia.Color(label.color || '#ffffff'));
-          const fontSize = label.fontSize || 14;
-          const font = this.getFont(fontSize);
-
-          // DEBUG: Cyan marker for button text
-          const linePaint = Skia.Paint();
-          linePaint.setColor(Skia.Color('cyan'));
-          linePaint.setStrokeWidth(1);
-          canvas.drawLine(-w/4, fontSize/2, w/4, fontSize/2, linePaint);
-
-          if (this._renderCount % 60 === 1) {
-              console.log(`[ExodeUIEngine] Button text: "${label.text}" at ${-w/4},${fontSize/2} font_size=${font.getSize()}`);
-          }
+      const labelObj = opts.label || {};
+      const labelText = labelObj.text || opts.text || opts.title || 'Button';
+      const fontSize = labelObj.fontSize || opts.fontSize || 14;
+      const labelColor = labelObj.color || opts.color || '#ffffff';
+      const font = this.getFont(fontSize, 'Helvetica Neue');
 
-          canvas.drawText(label.text, -w/4, fontSize / 2, textPaint, font);
+      const textPaint = Skia.Paint();
+      try {
+          textPaint.setColor(Skia.Color((typeof labelColor === 'string' ? labelColor : '#ffffff').replace(/\s+/g, '')));
+      } catch {
+          textPaint.setColor(Skia.Color('#ffffff'));
       }
+      if (isPressed) textPaint.setAlphaf(0.85);
+
+      // Center text horizontally using getTextWidth
+      const textWidth = font.getTextWidth ? font.getTextWidth(labelText) : 0;
+      canvas.save();
+      canvas.translate(-textWidth / 2, fontSize / 3);
+      canvas.drawText(String(labelText), 0, 0, textPaint, font);
+      canvas.restore();
   }
 
   private renderToggle(canvas: any, obj: any, w: number, h: number) {
@@ -1662,7 +1672,8 @@ export class ExodeUIEngine {
       const checked = opts.checked || false;
       
       const paint = Skia.Paint();
-      paint.setColor(Skia.Color(checked ? (opts.activeColor || '#3b82f6') : (opts.inactiveColor || '#374151')));
+      const trackColor = checked ? (opts.activeColor || '#3b82f6') : (opts.inactiveColor || '#374151');
+      try { paint.setColor(Skia.Color(trackColor.replace(/\s+/g, ''))); } catch { paint.setColor(Skia.Color('#374151')); }
       
       const r = h / 2;
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
@@ -1672,6 +1683,20 @@ export class ExodeUIEngine {
       const thumbRadius = (h - 8) / 2;
       const thumbX = checked ? (w / 2 - thumbRadius - 4) : (-w / 2 + thumbRadius + 4);
       canvas.drawCircle(thumbX, 0, thumbRadius, thumbPaint);
+
+      // Label text
+      const labelText = opts.label || opts.text || '';
+      if (labelText) {
+          const fontSize = opts.fontSize || 12;
+          const font = this.getFont(fontSize, 'Helvetica Neue');
+          const labelPaint = Skia.Paint();
+          const labelColor = opts.labelColor || opts.color || '#ffffff';
+          try { labelPaint.setColor(Skia.Color((typeof labelColor === 'string' ? labelColor : '#ffffff').replace(/\s+/g, ''))); } catch { labelPaint.setColor(Skia.Color('#ffffff')); }
+          canvas.save();
+          canvas.translate(w/2 + 8, fontSize / 3);
+          canvas.drawText(String(labelText), 0, 0, labelPaint, font);
+          canvas.restore();
+      }
   }
 
   private renderSlider(canvas: any, obj: any, w: number, h: number) {
@@ -1680,23 +1705,40 @@ export class ExodeUIEngine {
       const value = opts.value ?? 50;
       const min = opts.min ?? 0;
       const max = opts.max ?? 100;
-      const percentage = (value - min) / (max - min);
+      const percentage = Math.max(0, Math.min(1, (value - min) / (max - min)));
 
       const trackPaint = Skia.Paint();
-      trackPaint.setColor(Skia.Color(opts.inactiveColor || '#374151'));
+      const inactiveColor = opts.inactiveColor || opts.trackColor || '#374151';
+      try { trackPaint.setColor(Skia.Color((typeof inactiveColor === 'string' ? inactiveColor : '#374151').replace(/\s+/g, ''))); } catch { trackPaint.setColor(Skia.Color('#374151')); }
       const trackHeight = opts.trackHeight || 4;
-      canvas.drawRect({ x: -w/2, y: -trackHeight/2, width: w, height: trackHeight }, trackPaint);
+      canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -trackHeight/2, width: w, height: trackHeight }, trackHeight/2, trackHeight/2), trackPaint);
 
       const activePaint = Skia.Paint();
-      activePaint.setColor(Skia.Color(opts.activeColor || '#3b82f6'));
+      const activeColor = opts.activeColor || opts.thumbColor || '#3b82f6';
+      try { activePaint.setColor(Skia.Color((typeof activeColor === 'string' ? activeColor : '#3b82f6').replace(/\s+/g, ''))); } catch { activePaint.setColor(Skia.Color('#3b82f6')); }
       const thumbWidth = opts.thumbWidth ?? 16;
       const travelW = w - thumbWidth;
       const thumbX = -w / 2 + (thumbWidth / 2) + (percentage * travelW);
-      canvas.drawRect({ x: -w/2, y: -trackHeight/2, width: thumbX + w/2, height: trackHeight }, activePaint);
+      const activeW = thumbX + w/2;
+      if (activeW > 0) canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -trackHeight/2, width: activeW, height: trackHeight }, trackHeight/2, trackHeight/2), activePaint);
 
       const thumbPaint = Skia.Paint();
-      thumbPaint.setColor(Skia.Color(opts.thumbColor || '#ffffff'));
+      const thumbCol = opts.thumbColor || '#ffffff';
+      try { thumbPaint.setColor(Skia.Color((typeof thumbCol === 'string' ? thumbCol : '#ffffff').replace(/\s+/g, ''))); } catch { thumbPaint.setColor(Skia.Color('#ffffff')); }
       canvas.drawCircle(thumbX, 0, thumbWidth / 2, thumbPaint);
+
+      // Value label above thumb
+      if (opts.showValue !== false) {
+          const fontSize = opts.fontSize || 11;
+          const font = this.getFont(fontSize, 'Helvetica Neue');
+          const valPaint = Skia.Paint();
+          valPaint.setColor(Skia.Color('#ffffff'));
+          const valText = String(Math.round(value));
+          canvas.save();
+          canvas.translate(thumbX, -thumbWidth / 2 - fontSize - 2);
+          canvas.drawText(valText, 0, 0, valPaint, font);
+          canvas.restore();
+      }
   }
 
   private renderDropdown(canvas: any, obj: any, w: number, h: number) {
@@ -1892,19 +1934,33 @@ export class ExodeUIEngine {
       const opts = state?.options || obj.options || {};
       
       const paint = Skia.Paint();
-      paint.setColor(Skia.Color(opts.backgroundColor || '#1f2937'));
+      const bgColor = typeof (opts.backgroundColor || opts.background) === 'string' ? (opts.backgroundColor || opts.background || '#1f2937') : '#1f2937';
+      try { paint.setColor(Skia.Color(bgColor.replace(/\s+/g, ''))); } catch { paint.setColor(Skia.Color('#1f2937')); }
       const r = opts.cornerRadius ?? 8;
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
 
+      // Border
+      if (opts.borderColor || opts.borderWidth) {
+          const borderP = Skia.Paint();
+          borderP.setStyle(PaintStyle.Stroke);
+          borderP.setStrokeWidth(opts.borderWidth || 1);
+          try { borderP.setColor(Skia.Color((opts.borderColor || '#4b5563').replace(/\s+/g, ''))); } catch { borderP.setColor(Skia.Color('#4b5563')); }
+          canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), borderP);
+      }
+
       const textPaint = Skia.Paint();
-      textPaint.setColor(Skia.Color(opts.color || '#ffffff'));
+      const textColor = typeof (opts.color || opts.textColor) === 'string' ? (opts.color || opts.textColor || '#ffffff') : '#ffffff';
+      try { textPaint.setColor(Skia.Color(textColor.replace(/\s+/g, ''))); } catch { textPaint.setColor(Skia.Color('#ffffff')); }
       const fontSize = opts.fontSize || 14;
-      const font = this.getFont(fontSize);
-      const text = opts.text || '';
+      const font = this.getFont(fontSize, 'Helvetica Neue');
+      const text = opts.text || opts.value || '';
       const display = text || opts.placeholder || 'Enter text...';
       if (!text) textPaint.setAlphaf(0.5);
 
-      canvas.drawText(display, -w/2 + 15, 5, textPaint, font);
+      canvas.save();
+      canvas.translate(-w/2 + 15, fontSize / 3);
+      canvas.drawText(String(display), 0, 0, textPaint, font);
+      canvas.restore();
   }
 
   private renderSVG(canvas: any, obj: any, w: number, h: number) {
@@ -1923,30 +1979,150 @@ export class ExodeUIEngine {
   private renderLineGraph(canvas: any, geom: any, w: number, h: number) {
       const state = this.objectStates.get(geom.id);
       const datasets = geom.datasets || [];
+      const opts = geom.options || {};
       if (datasets.length === 0) return;
 
-      const paint = Skia.Paint();
-      paint.setStyle(PaintStyle.Stroke);
-      paint.setStrokeWidth(geom.lineWidth || 2);
+      const font = this.getFont(10, 'Helvetica Neue');
+      const axisMarginL = 30; // left margin for y-axis labels
+      const axisMarginB = 20; // bottom margin for x-axis labels
+      const plotW = w - axisMarginL;
+      const plotH = h - axisMarginB;
+
+      // Axis lines
+      const axisPaint = Skia.Paint();
+      axisPaint.setColor(Skia.Color(opts.axisColor || '#4b5563'));
+      axisPaint.setStrokeWidth(1);
+      axisPaint.setStyle(PaintStyle.Stroke);
+      canvas.drawLine(-w/2 + axisMarginL, -h/2, -w/2 + axisMarginL, h/2 - axisMarginB, axisPaint); // Y axis
+      canvas.drawLine(-w/2 + axisMarginL, h/2 - axisMarginB, w/2, h/2 - axisMarginB, axisPaint); // X axis
+
+      // Get global max across all datasets
+      let globalMax = 1;
+      datasets.forEach((ds: any) => {
+          const m = Math.max(...(ds.data || [0]));
+          if (m > globalMax) globalMax = m;
+      });
 
       datasets.forEach((ds: any) => {
           const data = ds.data || [];
           if (data.length < 2) return;
 
-          paint.setColor(Skia.Color(ds.lineColor || '#3b82f6'));
-          const path = Skia.Path.Make();
-          
-          const stepX = w / (data.length - 1);
-          const max = Math.max(...data, 1);
-          
+          const lineColorStr = (typeof ds.lineColor === 'string' ? ds.lineColor : '#3b82f6').replace(/\s+/g, '');
+          let lineColor;
+          try { lineColor = Skia.Color(lineColorStr); } catch { lineColor = Skia.Color('#3b82f6'); }
+
+          const stepX = plotW / (data.length - 1);
+          const getX = (i: number) => -w/2 + axisMarginL + i * stepX;
+          const getY = (val: number) => h/2 - axisMarginB - (val / globalMax) * plotH;
+
+          const smooth = opts.smooth !== false && (ds.smooth !== false);
+
+          // Gradient fill
+          if (ds.fill !== false && opts.fill !== false) {
+              const fillPath = Skia.Path.Make();
+              fillPath.moveTo(getX(0), h/2 - axisMarginB);
+              data.forEach((val: number, i: number) => {
+                  const x = getX(i);
+                  const y = getY(val);
+                  if (i === 0) fillPath.lineTo(x, y);
+                  else if (smooth && i < data.length) {
+                      const prevX = getX(i - 1);
+                      const prevY = getY(data[i - 1]);
+                      const cpX = (prevX + x) / 2;
+                      fillPath.cubicTo(cpX, prevY, cpX, y, x, y);
+                  } else {
+                      fillPath.lineTo(x, y);
+                  }
+              });
+              fillPath.lineTo(getX(data.length - 1), h/2 - axisMarginB);
+              fillPath.close();
+
+              const fillPaint = Skia.Paint();
+              fillPaint.setStyle(PaintStyle.Fill);
+              fillPaint.setAlphaf(0.15);
+              try { fillPaint.setColor(lineColor); } catch { fillPaint.setColor(Skia.Color('#3b82f6')); }
+              canvas.drawPath(fillPath, fillPaint);
+          }
+
+          // Line
+          const linePaint = Skia.Paint();
+          linePaint.setStyle(PaintStyle.Stroke);
+          linePaint.setStrokeWidth(ds.lineWidth || geom.lineWidth || 2);
+          try { linePaint.setColor(lineColor); } catch { linePaint.setColor(Skia.Color('#3b82f6')); }
+
+          const linePath = Skia.Path.Make();
           data.forEach((val: number, i: number) => {
-              const x = -w/2 + i * stepX;
-              const y = h/2 - (val / max) * h;
-              if (i === 0) path.moveTo(x, y);
-              else path.lineTo(x, y);
+              const x = getX(i);
+              const y = getY(val);
+              if (i === 0) linePath.moveTo(x, y);
+              else if (smooth && i < data.length) {
+                  const prevX = getX(i - 1);
+                  const prevY = getY(data[i - 1]);
+                  const cpX = (prevX + x) / 2;
+                  linePath.cubicTo(cpX, prevY, cpX, y, x, y);
+              } else {
+                  linePath.lineTo(x, y);
+              }
           });
-          canvas.drawPath(path, paint);
+          canvas.drawPath(linePath, linePaint);
+
+          // Data points
+          if (ds.showPoints !== false && data.length <= 20) {
+              data.forEach((val: number, i: number) => {
+                  const dotPaint = Skia.Paint();
+                  try { dotPaint.setColor(lineColor); } catch { dotPaint.setColor(Skia.Color('#3b82f6')); }
+                  canvas.drawCircle(getX(i), getY(val), 3, dotPaint);
+              });
+          }
       });
+
+      // X-axis labels
+      const xLabels = opts.xLabels || geom.xLabels || [];
+      const labelPaint = Skia.Paint();
+      labelPaint.setColor(Skia.Color(opts.labelColor || '#9ca3af'));
+      const firstDs = datasets[0];
+      const dataLen = (firstDs?.data || []).length;
+      if (xLabels.length > 0 && dataLen > 0) {
+          const stepX = plotW / (dataLen - 1);
+          xLabels.forEach((label: string, i: number) => {
+              const x = -w/2 + axisMarginL + i * stepX;
+              canvas.save();
+              canvas.translate(x, h/2 - axisMarginB + 12);
+              canvas.drawText(String(label), 0, 0, labelPaint, font);
+              canvas.restore();
+          });
+      }
+
+      // Y-axis labels
+      const yLabels = opts.yLabels || geom.yLabels || [];
+      if (yLabels.length > 0) {
+          yLabels.forEach((label: string, i: number) => {
+              const y = h/2 - axisMarginB - (i / (yLabels.length - 1)) * plotH;
+              canvas.save();
+              canvas.translate(-w/2 + axisMarginL - 4, y);
+              const lp = Skia.Paint();
+              lp.setColor(Skia.Color(opts.labelColor || '#9ca3af'));
+              canvas.drawText(String(label), -(font.getTextWidth ? font.getTextWidth(String(label)) : 24), 0, lp, font);
+              canvas.restore();
+          });
+      }
+
+      // Legend
+      if (datasets.length > 1 || datasets[0]?.label) {
+          datasets.forEach((ds: any, i: number) => {
+              if (!ds.label) return;
+              const legX = -w/2 + axisMarginL + i * 80;
+              const legY = -h/2 + 10;
+              const legPaint = Skia.Paint();
+              const lcStr = (typeof ds.lineColor === 'string' ? ds.lineColor : '#3b82f6').replace(/\s+/g, '');
+              try { legPaint.setColor(Skia.Color(lcStr)); } catch { legPaint.setColor(Skia.Color('#3b82f6')); }
+              canvas.drawRect({ x: legX, y: legY - 5, width: 16, height: 3 }, legPaint);
+              canvas.save();
+              canvas.translate(legX + 20, legY);
+              canvas.drawText(String(ds.label), 0, 0, legPaint, font);
+              canvas.restore();
+          });
+      }
   }
   private renderShape(canvas: SkCanvas, obj: ShapeObject, w: number, h: number) {
     const state = this.objectStates.get(obj.id);