How to show overlays of components in the visual editor?

[cruxcode]

For most cases, you might not need to create a custom overlay for a component, rather, you want to fire an action on a component in the canvas. If you fire a SELECT event on a component, then the corresponding overlay to display the selected component will automatically show up. Also, the properties panel on the right will also appear displaying the properties of the selected component.

If you want to synthetically fire an action on a component in the editor's canvas, then use the following APIs from @atrilas/canvas-runtime.

import { raiseSelectEvent, raiseHoverEvent } from "@atrilabs/canvas-runtime";

// use raiseSelectEvent function as shown below
raiseSelectEvent(compId)

// use raiseHoverEvent function as show below
raiseHoverEvent(compId)

In some odd cases, if you want to add an overlay, then, you can see an example here packages/overlay-hints-layer/src/overlays/useSelectOverlay.tsx.

To display an overlay:

• you need the id of the component
• you need to create an overlay id using getId function from @atrilabs/core
• The overlay (a React.FC) that you want to display.
• you need to define a function that returns the dimension and position of the box in which the overlay React.FC will be put. Imagine it as a <div> inside which your overlay will be drawn. The position that you return is relative to the component whose overlay you are drawing.