Which will happen as explained above, If you adjust the text boxes size in the Hype project using the drag handles. Which most of us do so it fits the initial text.
As far as I can tell the scrollWidth is the same as BoundingRect width.
So if you are forcing the a single line
or not then the code may as well be.
// get our elements
var textElement = hypeDocument.getElementById("textElement");
var boxElement = hypeDocument.getElementById("boxElement");
//- force single line
textElement.style.whiteSpace = 'nowrap';
// generate random text that is 2-20 characters long
var randomTextLength = Math.floor(Math.random() * 60) + 2;
var randomText = "";
for(var i = 0; i < randomTextLength; i++) {
randomText += "a";
}
textElement.innerHTML = randomText;
// get metrics for text element
var textElementWidth = textElement.scrollWidth;
var textElementLeft = hypeDocument.getElementProperty(textElement, 'left');
//calculate where the box element should go and set it
var boxElementPosition = textElementLeft + textElementWidth + 10; // 10 for padding
hypeDocument.setElementProperty(boxElement, 'left', boxElementPosition);
Also note this can be done with MutationObserver run once on scene load.
And the text generation is done somewhere else..
// get our elements
var textElement = hypeDocument.getElementById("textElement");
var textElementLeft = hypeDocument.getElementProperty(textElement, 'left');
var boxElement = hypeDocument.getElementById("boxElement");
//- force single line
textElement.style.whiteSpace = 'nowrap';
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
var textElementScrollWidth = textElement.scrollWidth;
var textElementWidth = textElementScrollWidth +10
hypeDocument.setElementProperty(boxElement, 'left', textElementLeft + textElementWidth)
});
});
var target = textElement
observer.observe(target, { attributes : true, characterData: true,
childList: true, attributeFilter : ['style'] });
