exodeui-react-native 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exodeui-react-native",
-  "version": "1.0.6",
+  "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 });
+                  }
+              }
+          }
       }
   }
 

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,
   };
 }