AnnotationManager props do not apply to the variables

[ice1080]

When creating annotations using the Script component such as this:

import { AnnotationManager } from 'playcanvas/scripts/esm/annotations.mjs';
...
<Script
  script={AnnotationManager}
  hotspotSize={200}
  opacity={0.5}
  hotspotColor={[0, 1, 0, 0.5]} // just example numbers
  hoverColor={[1, 0, 0, 1]}
/>

In this case, the hotspotSize is applying correctly, but the hotspotColor and hoverColor do not work.

Is there a better way to use this? The docs do not mention useScript, but I see that the Script component uses this under the hood.

I guess the real question is if Annotations should be created via the Script component, or manually created in useEffects in a custom script or similar.

[abstrakt8]

Looking at the annotation.mjs script itself, the attributes that you mentioned are of type pc.Color. Unfortunately, the <Script/> component currently does not auto-convert your 4D number array to a pc.Color. What you can do instead is to provide pc.Color directly:

import { Color } from 'playcanvas';
import { AnnotationManager } from 'playcanvas/scripts/esm/annotations.mjs';

<Script
  script={AnnotationManager}
  hotspotSize={200}
  opacity={0.5}
  hotspotColor={new Color(0, 1, 0, 0.5)}
  hoverColor={new Color(1, 0, 0, 1)}
/>;

Or to avoid GC churn (if the component re-renders a lot):

const hotspotColor = useMemo(() => new Color(0, 1, 0, 0.5), []);
const hoverColor = useMemo(() => new Color(1, 0, 0, 1), []);

return (
  <Script
    script={AnnotationManager}
    ...
    hotspotColor={hotspotColor}
    hoverColor={hoverColor}
  />
);

Let me know if this works!

I'm keeping this issue open to see if we can perform a coercion step like we do for the other components.