To reflect the type constraints in the UI, types of each custom property would have to be known, which still has to be implemented. But it doesn't seem a blocker to get the rest to work.
Some ideas:
It doesn't have to actually perform the calculation, but a component could show the end result (for various external factors) to help "debugging".
Ability to directly change used custom properties. This still has to somehow visualize the other places the variable is used. On individual variable controls, this currently happens by showing all end use properties, selectors and linked variables. Perhaps a vertical UI, like how linked variables are displayed, would solve this best. So each referenced variable would get about the same size as it would get in a normal listing, and have the same UX.
Perhaps the calculation component can have a setting to lock custom properties. When locked, used variables could have a compact display with only name and value. This could help dealing with the math complexity. To ensure a nice transition, the variable components should still be displayed in the same place, just with less information and perhaps a shorter height.
Then again, locking could also be done globally per custom property. In that case the calc component can just respect those settings.
How to visualize parentheses? Creation could be done by selecting an option on the first inner component, after which you select the last. Drag and drop may suit this.
Inwerpsel
commented
4 months ago
Since it uses a simple math syntax, it should be manageable to parse
calcexpressions and provide a UI for them.Syntax:
+,-,*and/https://developer.mozilla.org/en-US/docs/Web/CSS/calc#formal_syntax
To reflect the type constraints in the UI, types of each custom property would have to be known, which still has to be implemented. But it doesn't seem a blocker to get the rest to work.
Some ideas: