Click Events

import type {
  ClickParams,
  Element3D,
  ICraftPlayerInstance,
} from '@icraft/player';
import { ICraftPlayer } from '@icraft/player';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
export default () => {
  const instanceRef = useRef<ICraftPlayerInstance>();
 
  const [activeKey, setActiveKey] = useState<string>('');
 
  const onClick = useCallback((params: ClickParams) => {
    const { item } = params;
    console.log(params, item);
    setActiveKey(item?.key || '');
  }, []);
 
  useLayoutEffect(() => {
    const instance = instanceRef.current;
    if (!instance || !activeKey) {
      return;
    }
    let timmer: string | number | NodeJS.Timeout | undefined;
    let activeElement: Element3D | undefined;
 
    const flash = () => {
      const element = instance?.getElementByKey(activeKey);
      if (element) {
        activeElement = element;
        element?.setVisible((visible) => !visible);
      }
    };
    console.log('instance', instance);
    timmer = setInterval(flash, 500);
 
    return () => {
      if (timmer) {
        activeElement?.setVisible(true);
        clearInterval(timmer);
      }
    };
  }, [activeKey]);
 
  return (
    <ICraftPlayer
      fileUrl="/car-structure.iplayer"
      onClick={onClick}
      ref={instanceRef}
    />
  );
};