idyll
idyll copied to clipboard
idyll-lang
Feature request: edit equation numbers
I'd love for my equation to look like this:
And then to be able to click the 15 and get this:
At the moment you can do this only with variables, not numbers. I'm having a bit of trouble understanding what a syntax for that would look like, but it seems reasonable at least. Thoughts?
Seems like a totally reasonable thing to want to do. I think the numbers would still have to be bound to a variable for it to make sense, but in this case you're displaying the value of the var itself and not a symbol.
While we're talking about equations, a couple things I've been meaning to do:
- The inline range slider is pretty bad UX imo, at a minimum it should probably be a tooltip style thing that flys out of the number, or could also be something like the "draggable numbers" included in https://idyll-lang.github.io/idyll-regl-component/
- Right now the only affordance a user has to know that certain elements of the equation are interactive is by hovering directly over the interactive part. Are there any thoughts on a better way to convey the interactivity?
I have a tab open right now in which I'm playing around with style properties. For some reason it's being stubborn about the offset pixels, but what about current idyll link style:
It's not quite visible enough in this example, but I think that could be slightly tweaked. The alternative is just making the number a solid color always.
@codemayank - this would also be a fun front-end challenge to tackle.
I think we'd want to (1) make the numbers a different color or give them an obvious outline to indicate that they are dynamic, and make the interaction closer to the [Dynamic /] component rather than using a range slider.
In fact, we should probably drop the range slider altogether for equations, and use direct manipulation for both the variables and numbers.
If we'd use $$...$$ and $...$ syntax (#314), we can then add dynamic variable parsing inside it and that could look like this:
[var name:"y" value:5 /]
[$$ y = @[value:y interactive:true color:"#000" hoverColor:"red" onChangeColor:"green"] $$]
I'm currently playing around with this idea.
