create custom markup in forge viewer

Question

I want to create custom markup which is rectangle and contains (textbox/ callout) as inner markup behave as a single markup. I have attached screen short: https://i.stack.imgur.com/yS8dn.png The issue I am facing right now are listed below :

1. show textbox/ callout at bottom - inside rectangle markup we draw.
2. when we drag rectangle markup the inner collout/textbox needs to drag along with it's outer rectangle.
3. we should restrict drag and drop of inner textbox/callout seperately.
4. Inner textbox/callout should be editable.

I want it to be displayed as this :https://i.stack.imgur.com/oaoWh.png and outer rectangle markup should be draggable along with inner textbox/callout.

Answer 1

Have you seen our blog post Implementing Custom Markups? In the sample we're creating a single <path> element but you can generate more complex shapes as well, e.g., a <group> of a rectangle and a text element (in the updateStyle method).

However, making the text element editable might be a bit tricky with this approach. If text editing is critical for your use case, you could consider overlaying the viewer with actual HTML elements as @chrwahl suggested. For example, in our Digital Twin demo we're using floating HTML labels to show issues assigned to individual design elements: https://github.com/autodesk-platform-services/aps-digital-twin/blob/develop/public/scripts/extensions/issues.js.