If I want the dimension text to show the height of the icon, what is the correct procedure? I have tried but to no avail, see this thread.
→ I’m generally dimensioning things so if there was a way to apply a dimension to a specific object, regardless of its nesting position, that would help!
you can use the getBoundingClientRect()-method. It returns the width/height/top/left-etc. of an Element.
Here I added the script to the “Load-Screen”-Event of the DIM-cell:
As you can see it has two targetCells, the first one the cell for the text and the second one the cell to measure.
Dimension.atype.zip (205.1 KB)
This is basically what we do in Measurements/Spec-Inspector.
Does this help?
Hi Felix,
it does work but it doesn’t update when the state of the icon changes. It has two states, one, “Dense” makes the icon 16px. The other one is Normal and it makes the icon 20px. That was what I needed. Sorry, I completely forgot to mention that.
Ha, so my JavaScript self-teaching is paying off. I managed to generate a label with Height x width:
let height = rect.height;
let width = rect.width;
let dims = height + 'x' + width
at.cellSetPropertyInState(textCell, "textString", dims, textCell.activeState);
Now, all I need to know is how to make it dynamic, so it changes as the size of the icon changes due to state.
Currently the script is executed once the screen loads. Either explicitly execute the script on state-change (used in the upper cell), or use an resize-observer (see Collapse element if it falls below a given minimum width?)
Dimension 2.atype.zip (294.8 KB)
Note the Resize-Observer does not work in Antetype itself. The first one needs some delays to update after the animation finishes.
Well the bottom one is definitely the funkier implementation with a live update of the dim value. How cool is that! I will look at the code. I tried until 0100am last night to get this to work. 
THANK YOU!
The next thing is I need the margin to be adjusted so the leader line does not overlap the icon container border. I tried to amalgamate two scripts from previous cases but something is not right. I think it is the way that I try to use the variable “margin” inside the css?
// adjust margin according to button size
let DIM = targetCells[0];
let measureElement = targetCells[1].DOMElement;
// this function measures the measureElement and updates the DIM Margin
const updateMargin = () => {
let rect = measureElement.getBoundingClientRect();
let width = Math.round(rect.width);
let margin = 20 + width + 'px'
let state = DIM.widget.states.find(s => s.name == "Right");
at.cellSetPropertyInState(targetCells[0], "customCSS", "margin: margin;", state);
}
// add a resize-observer to update the margin:
const ro = new ResizeObserver(entries => {
updateMargin();
});
ro.observe(measureElement);
// we want the correct value on load:
updateMargin();
It is not the correct value but I wanted to try if this script had any effect. Alas, no
Is the way that I reference the variable the problem?
found it:
let margin = ‘margin:’ + width + ‘px’, then just use “margin”
the problem is this parameter. You have basically two possibilities to concat two strings: "margin:" + margin + ";" or use the back-tick “`”: `margin: ${margin};`
