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.

[ice1080]

Thanks for the quick response @abstrakt8 !

You are correct, using new Color(0, 1, 0, 0.5) does work. I had seen this line and assumed that the default meant that it accepted either a [number, number, number] or [number, number, number, number].
https://github.com/playcanvas/engine/blob/v2.15.1/scripts/esm/annotations.mjs#L114.

Just to confirm my understanding of the annotation scripts within the @playcanvas/react context, is this the correct method to create annotations?

import { Annotation, AnnotationManager } from 'playcanvas/scripts/esm/annotations.mjs';
...
<Application>
  <Entity name='camera'>
    <Camera ... />
  </Entity>

  <Script script={AnnotationManager} ... />
  <Entity name='annotation1' position={[0, 0, 0]}>
    <Script script={Annotation} title={'foo'} text={'bar'} />
  </Entity>
</Application

[abstrakt8]

@ice1080

I had seen this line and assumed that the default meant that it accepted either a [number, number, number] or [number, number, number, number].

Yes, that's a fair feedback! The type coercion is consistent across many other React components, but not in <Script/>. Hence I will keep this issue open and see if this can be solved. If not we might need to update the docs a little bit.

Just to confirm my understanding of the annotation scripts within the @playcanvas/react context, is this the correct method to create annotations?

I haven't tried out the annotations scripts yet, but from the looks of it yes! I compared this against the engine example: https://playcanvas.vercel.app/#/gaussian-splatting/annotations