Why Does Text Markup Size Varies Based on Zoom? - autodesk-forge

Question

When loading text markups from a database, the text markups show up in a different size based on the current zoom of the viewer. How do I make text markups show at a static size regardless of zoom?
function saveFreeformMarkup(markup){
let markupObject = {
x: markup.position.x,
y: markup.position.y,
width: markup.size.x,
height:markup.size.y,
type: TEXT_MARKUP_TYPE,
text: $(`#freeText`).val(),
urn_id: urn[`id`],
active: ACTIVE
};
$.ajax({
... send markupObject to database ...
});
}
function loadSingleMarkup(markup, markupTool){
let MarkupsCore = Autodesk.Viewing.Extensions.Markups.Core;
let text = new MarkupsCore.MarkupText(markup.id + ID_INCREMENT, markupTool, markup.text);
markupTool.addMarkup(text);
text.setSize({ x: markup.x, y: markup.y}, markup.width, markup.height);
text.setText(markup.text);
text.updateStyle(true);
}

Answer 1

This is because there's an handler attached to the camera change event that adjusts the viewbox of the SVG per the updated bounds of the current view when navigation (scaling/panning) occurs.
To overcome this you can piggyback the onCameraChange handler of the MarkupCore extension (be sure to do this prior to the event binding to the upper chain that is before entering the edit mode) and apply scaling to the SVG based on the current camera pivot values and the ones recorded when you added the markups:
MarkupsCore.originalOnCameraChange = MarkupsCore.onCameraChange;
MarkupsCore.onCameraChange = function(event){
let scaleString = calculateScale(originalPivot, viewer.autocam.pivot);
this.svg.setAttribute('transform', scaleString);
this.originalOnCameraChange(event)
}
See here for details on SVG transform.
Will leave it up to you to implement the calculations or even a better approach to transform the markups in response to navigation.

Answer 2

I was able to fix the issue by changing the loadSingleMarkup() function to the following
const FONT_SIZE_SCALE = 90;
function loadSingleMarkup(markup, markupTool){
let MarkupsCore = Autodesk.Viewing.Extensions.Markups.Core;
let text = new MarkupsCore.MarkupText(markup.id + ID_INCREMENT, markupTool, markup.text);
markupTool.addMarkup(text);
text.setSize({ x: markup.x, y: markup.y}, markup.width, markup.height);
text.setText(markup.text);
text.style[`font-size`] = 12 / FONT_SIZE_SCALE;
text.updateStyle(true);
}
(adding text.style[`font-size`] = 12 / FONT_SIZE_SCALE;)