exodeui-react-native 1.0.4 → 1.0.6

package/package.json

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

package/src/engine.ts

@@ -1630,13 +1630,13 @@ export class ExodeUIEngine {
       const paint = Skia.Paint();
       
       const isPressed = this.draggingSliderId === obj.id;
-      // Parse color safely
-      const bgNormal = opts.backgroundColor || opts.background || '#3b82f6';
+      // The .exode file uses 'buttonBgColor', fall back to 'backgroundColor'
+      const bgNormal = opts.buttonBgColor || 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';
+      const bgStr = (typeof bgNormal === 'string' ? bgNormal : '#3b82f6').replace(/\s+/g, '');
+      const bgActiveStr = (typeof bgActive === 'string' ? bgActive : '#2563eb').replace(/\s+/g, '');
       try {
-          paint.setColor(Skia.Color((isPressed ? bgActiveStr : bgStr).replace(/\s+/g, '')));
+          paint.setColor(Skia.Color(isPressed ? bgActiveStr : bgStr));
       } catch {
           paint.setColor(Skia.Color('#3b82f6'));
       }
@@ -1644,7 +1644,8 @@ export class ExodeUIEngine {
       const r = opts.cornerRadius ?? 8;
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
       
-      const labelObj = opts.label || {};
+      // label is an object {text, fontSize, color, ...}
+      const labelObj = typeof opts.label === 'object' && opts.label !== null ? 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';
@@ -1658,8 +1659,7 @@ export class ExodeUIEngine {
       }
       if (isPressed) textPaint.setAlphaf(0.85);
 
-      // Center text horizontally using getTextWidth
-      const textWidth = font.getTextWidth ? font.getTextWidth(labelText) : 0;
+      const textWidth = font.getTextWidth ? font.getTextWidth(String(labelText)) : 0;
       canvas.save();
       canvas.translate(-textWidth / 2, fontSize / 3);
       canvas.drawText(String(labelText), 0, 0, textPaint, font);
@@ -1675,26 +1675,30 @@ export class ExodeUIEngine {
       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;
+      const r = opts.cornerRadius ?? h / 2;
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -h/2, width: w, height: h }, r, r), paint);
       
       const thumbPaint = Skia.Paint();
-      thumbPaint.setColor(Skia.Color('#ffffff'));
+      const thumbCol = opts.knobColor || opts.thumbColor || '#ffffff';
+      try { thumbPaint.setColor(Skia.Color(thumbCol.replace(/\s+/g, ''))); } catch { thumbPaint.setColor(Skia.Color('#ffffff')); }
       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;
+      // label is an object: {text, position, fontSize, color, gap}
+      const labelObj = typeof opts.label === 'object' && opts.label !== null ? opts.label : null;
+      if (labelObj && labelObj.text) {
+          const fontSize = labelObj.fontSize || 12;
           const font = this.getFont(fontSize, 'Helvetica Neue');
           const labelPaint = Skia.Paint();
-          const labelColor = opts.labelColor || opts.color || '#ffffff';
+          const labelColor = labelObj.color || '#ffffff';
           try { labelPaint.setColor(Skia.Color((typeof labelColor === 'string' ? labelColor : '#ffffff').replace(/\s+/g, ''))); } catch { labelPaint.setColor(Skia.Color('#ffffff')); }
+          const gap = labelObj.gap || 8;
+          const position = labelObj.position || 'right';
+          const offsetX = position === 'left' ? -(w/2 + gap + font.getTextWidth(String(labelObj.text))) : w/2 + gap;
           canvas.save();
-          canvas.translate(w/2 + 8, fontSize / 3);
-          canvas.drawText(String(labelText), 0, 0, labelPaint, font);
+          canvas.translate(offsetX, fontSize / 3);
+          canvas.drawText(String(labelObj.text), 0, 0, labelPaint, font);
           canvas.restore();
       }
   }
@@ -1714,7 +1718,7 @@ export class ExodeUIEngine {
       canvas.drawRRect(Skia.RRectXY({ x: -w/2, y: -trackHeight/2, width: w, height: trackHeight }, trackHeight/2, trackHeight/2), trackPaint);
 
       const activePaint = Skia.Paint();
-      const activeColor = opts.activeColor || opts.thumbColor || '#3b82f6';
+      const activeColor = opts.activeColor || '#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;
@@ -1727,16 +1731,39 @@ export class ExodeUIEngine {
       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));
+      // Label: opts.label is an object {text, visible, fontSize, color}
+      const labelObj = typeof opts.label === 'object' && opts.label !== null ? opts.label : null;
+      if (labelObj && labelObj.text && labelObj.visible !== false) {
+          const lFontSize = labelObj.fontSize || 12;
+          const lFont = this.getFont(lFontSize, 'Helvetica Neue');
+          const lPaint = Skia.Paint();
+          const lColor = labelObj.color || '#ffffff';
+          try { lPaint.setColor(Skia.Color((typeof lColor === 'string' ? lColor : '#9ca3af').replace(/\s+/g, ''))); } catch { lPaint.setColor(Skia.Color('#9ca3af')); }
           canvas.save();
-          canvas.translate(thumbX, -thumbWidth / 2 - fontSize - 2);
-          canvas.drawText(valText, 0, 0, valPaint, font);
+          canvas.translate(-w/2, -h/2 - lFontSize - 2);
+          canvas.drawText(String(labelObj.text), 0, 0, lPaint, lFont);
+          canvas.restore();
+      }
+
+      // Value tooltip: opts.showValueTooltip + tooltipOffsetY
+      if (opts.showValueTooltip) {
+          const tFontSize = 11;
+          const tFont = this.getFont(tFontSize, 'Helvetica Neue');
+          const tooltipBg = opts.tooltipBgColor || '#333333';
+          const tooltipText = opts.tooltipColor || '#ffffff';
+          const offsetY = opts.tooltipOffsetY ?? -25;
+          const valStr = String(Math.round(value));
+          const tWidth = tFont.getTextWidth ? tFont.getTextWidth(valStr) + 8 : 24;
+
+          const bgP = Skia.Paint();
+          try { bgP.setColor(Skia.Color((typeof tooltipBg === 'string' ? tooltipBg : '#333333').replace(/\s+/g, ''))); } catch { bgP.setColor(Skia.Color('#333333')); }
+          canvas.drawRRect(Skia.RRectXY({ x: thumbX - tWidth/2, y: offsetY - tFontSize - 2, width: tWidth, height: tFontSize + 6 }, 3, 3), bgP);
+
+          const tPaint = Skia.Paint();
+          try { tPaint.setColor(Skia.Color((typeof tooltipText === 'string' ? tooltipText : '#ffffff').replace(/\s+/g, ''))); } catch { tPaint.setColor(Skia.Color('#ffffff')); }
+          canvas.save();
+          canvas.translate(thumbX - tWidth/2 + 4, offsetY - 4);
+          canvas.drawText(valStr, 0, 0, tPaint, tFont);
           canvas.restore();
       }
   }
@@ -2007,41 +2034,42 @@ export class ExodeUIEngine {
           const data = ds.data || [];
           if (data.length < 2) return;
 
-          const lineColorStr = (typeof ds.lineColor === 'string' ? ds.lineColor : '#3b82f6').replace(/\s+/g, '');
+          const lineColorStr = typeof ds.lineColor === 'string' ? ds.lineColor : '#3b82f6';
+          // hsl/hsla colors need to be converted; Skia may not accept them directly
+          // We'll try Skia.Color, and if it throws, fall back to a safe default
           let lineColor;
-          try { lineColor = Skia.Color(lineColorStr); } catch { lineColor = Skia.Color('#3b82f6'); }
+          try { lineColor = Skia.Color(lineColorStr.replace(/\s+/g, '')); } catch { lineColor = Skia.Color('#3b82f6'); }
 
-          const stepX = plotW / (data.length - 1);
+          const stepX = plotW / (Math.max(data.length - 1, 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);
+          // Per-dataset smoothing from the .exode file
+          const smooth = ds.smoothing === true;
 
-          // 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);
+          // Per-dataset area fill from .exode field 'showArea'
+          if (ds.showArea === true && ds.areaColor) {
+              const areaColorStr = typeof ds.areaColor === 'string' ? ds.areaColor : null;
+              let areaColor;
+              if (areaColorStr) {
+                  try { areaColor = Skia.Color(areaColorStr.replace(/\s+/g, '')); } catch { areaColor = null; }
+              }
+              if (areaColor) {
+                  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) { const px = getX(i-1); const py = getY(data[i-1]); const cpX = (px+x)/2; fillPath.cubicTo(cpX, py, 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.setColor(areaColor);
+                  canvas.drawPath(fillPath, fillPaint);
+              }
           }
 
           // Line
@@ -2052,26 +2080,29 @@ export class ExodeUIEngine {
 
           const linePath = Skia.Path.Make();
           data.forEach((val: number, i: number) => {
-              const x = getX(i);
-              const y = getY(val);
+              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);
-              }
+              else if (smooth) { const px = getX(i-1); const py = getY(data[i-1]); const cpX = (px+x)/2; linePath.cubicTo(cpX, py, cpX, y, x, y); }
+              else linePath.lineTo(x, y);
           });
           canvas.drawPath(linePath, linePaint);
 
-          // Data points
-          if (ds.showPoints !== false && data.length <= 20) {
+          // Data points with custom point styling
+          if (ds.showPoints !== false && data.length <= 30 && ds.pointSize) {
+              const pr = ds.pointSize / 2;
               data.forEach((val: number, i: number) => {
+                  // Outer stroke
+                  if (ds.pointStrokeColor) {
+                      const strokeP = Skia.Paint();
+                      strokeP.setStyle(PaintStyle.Stroke);
+                      strokeP.setStrokeWidth(ds.pointStrokeWidth || 2);
+                      try { strokeP.setColor(Skia.Color((ds.pointStrokeColor || '#3b82f6').replace(/\s+/g, ''))); } catch { strokeP.setColor(lineColor); }
+                      canvas.drawCircle(getX(i), getY(val), pr, strokeP);
+                  }
+                  // Fill
                   const dotPaint = Skia.Paint();
-                  try { dotPaint.setColor(lineColor); } catch { dotPaint.setColor(Skia.Color('#3b82f6')); }
-                  canvas.drawCircle(getX(i), getY(val), 3, dotPaint);
+                  try { dotPaint.setColor(Skia.Color((ds.pointFill || '#ffffff').replace(/\s+/g, ''))); } catch { dotPaint.setColor(Skia.Color('#ffffff')); }
+                  canvas.drawCircle(getX(i), getY(val), pr - (ds.pointStrokeWidth || 2)/2, dotPaint);
               });
           }
       });
@@ -2107,15 +2138,15 @@ export class ExodeUIEngine {
           });
       }
 
-      // Legend
-      if (datasets.length > 1 || datasets[0]?.label) {
-          datasets.forEach((ds: any, i: number) => {
-              if (!ds.label) return;
+      // Legend — only if datasets have labels
+      const datasetsWithLabels = datasets.filter((ds: any) => ds.label);
+      if (datasetsWithLabels.length > 0) {
+          datasetsWithLabels.forEach((ds: any, i: number) => {
               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')); }
+              const lcStr = typeof ds.lineColor === 'string' ? ds.lineColor : '#3b82f6';
+              try { legPaint.setColor(Skia.Color(lcStr.replace(/\s+/g, ''))); } 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);