exodeui-react-native 1.0.5 → 1.0.7

package/package.json

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

package/src/ExodeUIView.tsx

@@ -11,18 +11,20 @@ export interface ExodeUIViewProps {
   autoPlay?: boolean;
   fit?: Fit;
   alignment?: Alignment;
-  onReady?: (engine: any) => void; // Changed type to any as per instruction
+  onReady?: (engine: any) => void;
   onTrigger?: (triggerName: string, animationName: string) => void;
   onInputUpdate?: (nameOrId: string, value: any) => void;
-  onComponentChange?: (event: ComponentEvent) => void; // Added
-  onToggle?: (name: string, checked: boolean) => void; // Changed value to checked
-  onInputChange?: (name: string, text: string) => void; // Changed value to text
+  onComponentChange?: (event: ComponentEvent) => void;
+  onToggle?: (name: string, checked: boolean) => void;
+  onInputChange?: (name: string, text: string) => void;
   onInputFocus?: (name: string) => void;
   onInputBlur?: (name: string) => void;
+  onButtonClick?: (name: string, objectId: string) => void;
+  onGraphPointClick?: (event: { objectId: string; componentName: string; datasetIndex: number; pointIndex: number; value: number; label: string }) => void;
 }
 
 export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
-  ({ artboard, src, style, autoPlay = true, fit = 'Contain', alignment = 'Center', onReady, onTrigger, onInputUpdate, onInputFocus, onInputBlur, onToggle, onInputChange, onComponentChange }, ref) => {
+  ({ artboard, src, style, autoPlay = true, fit = 'Contain', alignment = 'Center', onReady, onTrigger, onInputUpdate, onInputFocus, onInputBlur, onToggle, onInputChange, onComponentChange, onButtonClick, onGraphPointClick }, ref) => {
     
     const engineRef = useRef<ExodeUIEngine>(new ExodeUIEngine());
     const [picture, setPicture] = useState<SkPicture | null>(null);
@@ -72,6 +74,14 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
         if (onComponentChange) engineRef.current.setComponentChangeCallback(onComponentChange);
     }, [onComponentChange]);
 
+    useEffect(() => {
+        if (onButtonClick) engineRef.current.setButtonClickCallback(onButtonClick);
+    }, [onButtonClick]);
+
+    useEffect(() => {
+        if (onGraphPointClick) engineRef.current.setGraphPointClickCallback(onGraphPointClick);
+    }, [onGraphPointClick]);
+
     // Load Artboard
     useEffect(() => {
         const loadArtboard = async () => {

package/src/engine.ts

@@ -35,6 +35,8 @@ export class ExodeUIEngine {
   private onInputChange?: (name: string, text: string) => void;
   private onInputFocus?: (name: string) => void;
   private onInputBlur?: (name: string) => void;
+  private onButtonClick?: (name: string, objectId: string) => void;
+  private onGraphPointClick?: (event: { objectId: string; componentName: string; datasetIndex: number; pointIndex: number; value: number; label: string }) => void;
 
   // Track triggers that were just fired in the current frame
   private justFiredTriggers: Set<string> = new Set();
@@ -78,6 +80,12 @@ export class ExodeUIEngine {
   setInputBlurCallback(cb: (name: string) => void) {
       this.onInputBlur = cb;
   }
+  setButtonClickCallback(cb: (name: string, objectId: string) => void) {
+      this.onButtonClick = cb;
+  }
+  setGraphPointClickCallback(cb: (event: { objectId: string; componentName: string; datasetIndex: number; pointIndex: number; value: number; label: string }) => void) {
+      this.onGraphPointClick = cb;
+  }
 
   constructor() {}
 
@@ -964,6 +972,15 @@ export class ExodeUIEngine {
               }
           }
 
+          if (targetObj.type === 'Component' && (targetObj as any).variant === 'button') {
+              if (type === 'click' || type === 'PointerDown') {
+                  if (this.onButtonClick) this.onButtonClick(targetObj.name, targetObj.id);
+                  if (this.onComponentChange) {
+                      this.onComponentChange({ objectId: targetObj.id, componentName: targetObj.name, variant: 'button', property: 'click', value: true });
+                  }
+              }
+          }
+
           if (targetObj.type === 'Component' && (targetObj as any).variant === 'slider') {
               if (type === 'PointerDown') {
                   this.draggingSliderId = targetObj.id;
@@ -1021,6 +1038,43 @@ export class ExodeUIEngine {
                   }
               }
           }
+
+          if (targetObj.type === 'LineGraph') {
+              if (type === 'click' || type === 'PointerDown') {
+                  const geom = targetObj.geometry as any;
+                  const datasets = geom?.datasets || [];
+                  const state = this.objectStates.get(targetObj.id);
+                  const objW = state?.width || geom?.width || 200;
+                  const objH = state?.height || geom?.height || 150;
+                  const world = this.getWorldTransform(targetObj.id);
+                  const axisMarginL = 30;
+                  const axisMarginB = 20;
+                  const plotW = objW - axisMarginL;
+                  const plotH = objH - axisMarginB;
+                  let globalMax = 1;
+                  datasets.forEach((ds: any) => { const m = Math.max(...(ds.data || [0])); if (m > globalMax) globalMax = m; });
+
+                  let closestDist = Infinity;
+                  let closestResult: any = null;
+                  datasets.forEach((ds: any, dIdx: number) => {
+                      const data = ds.data || [];
+                      const stepX = plotW / Math.max(data.length - 1, 1);
+                      data.forEach((val: number, pIdx: number) => {
+                          const px = world.x - objW/2 + axisMarginL + pIdx * stepX;
+                          const py = world.y + objH/2 - axisMarginB - (val / globalMax) * plotH;
+                          const dist = Math.sqrt((x - px) ** 2 + (y - py) ** 2);
+                          if (dist < closestDist) { closestDist = dist; closestResult = { dIdx, pIdx, val, label: ds.label || `Dataset ${dIdx + 1}` }; }
+                      });
+                  });
+
+                  if (closestResult && closestDist < 20 && this.onGraphPointClick) {
+                      this.onGraphPointClick({ objectId: targetObj.id, componentName: targetObj.name, datasetIndex: closestResult.dIdx, pointIndex: closestResult.pIdx, value: closestResult.val, label: closestResult.label });
+                  }
+                  if (this.onComponentChange) {
+                      this.onComponentChange({ objectId: targetObj.id, componentName: targetObj.name, variant: 'linegraph', property: 'click', value: closestResult?.val ?? null });
+                  }
+              }
+          }
       }
   }
 
@@ -1630,13 +1684,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 +1698,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 +1713,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 +1729,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 +1772,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 +1785,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 +2088,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 +2134,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 +2192,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);

package/src/useExodeUI.ts

@@ -40,6 +40,14 @@ export function useExodeUI() {
       engine?.updateObjectOptions(id, newOptions);
   }, [engine]);
 
+  const onButtonClick = useCallback((cb: (name: string, objectId: string) => void) => {
+      engine?.setButtonClickCallback(cb);
+  }, [engine]);
+
+  const onGraphPointClick = useCallback((cb: (event: { objectId: string; componentName: string; datasetIndex: number; pointIndex: number; value: number; label: string }) => void) => {
+      engine?.setGraphPointClickCallback(cb);
+  }, [engine]);
+
   return {
       setEngine, 
       engine,
@@ -51,6 +59,8 @@ export function useExodeUI() {
       fireTrigger,
       updateConstraint,
       updateGraphData,
-      updateObjectOptions
+      updateObjectOptions,
+      onButtonClick,
+      onGraphPointClick,
   };
 }