recanvas
recanvas copied to clipboard
aaronsnoswell
Ctrl+Click adjustment of numeric values
It's rough... I was trying to port this over from my own version of Bret Victor's demo that I've been creating using Ajax Cloud9 Editor and jQuery UI. But I think the general structure is in place. I think the main issue remaining is some sort of incompatibility with the CodeMirror.addWidget and jQuery UI's slider widget... but you can actually see it doing the work... but the stepping is all weird because the slider widget is too thin. Hopefully this will give a clue about a cleaner solution to this same problem.
You can see my implementations here for comparison: http://netjunki.org/uiexperiments/ (Ace + jQuery) http://netjunki.org/recanvas/
Hey! Thanks for interest in the project! Your work looks cool (I've never used the Clound9 Editor - it looks a little more fully-featured than CodeMirror?)
At the moment I'm looking at adding this functionality using Brett Victor's Tangle library - apparently that's what he uses in his version for the color picker, drag bars etc. But it's still great to see others interested in this sort of an editor!
Hey! Thanks for interest in the project! Your work looks cool (I've never used the Clound9 Editor - it looks a little more fully-featured than CodeMirror?)
In some ways yes it's doing some fancy stuff involving the HTML DOM for rendering... I'm not sure how CodeMirror deals with this. But in other ways not... like code completion is non-existent at the moment. I was using Ace since I was already familiar with the Bespin project from mozilla. My goal in implementation was to experiment with the ideas from the Inventing on Principle talk.
At the moment I'm looking at adding this functionality using Brett Victor's Tangle library - apparently that's what he uses in his version for the color picker, drag bars etc. But it's still great to see others interested in this sort of an editor!
I was interested in Tangle as well... but have been more interested in just getting things to work. Thinking back on what I've done so far I bet doing an integration with Tangle wouldn't be too hard for me at this point.
Anyway... recanvas is pretty cool as well. Good luck!
Ben
netjunki, i had to deal with similar issues (jquery sliders) on my implementation: http://gabrielflor.it/water. i'm still not 100% there - bret's demo has the slider grow automatically - it doesn't have a max or min. i think we have to use a custom slider solution.
Yeah... the behavior of the slider is decidedly nonstandard. :-) It looks like it just uses mouse move from where ever the click occurred and also expands as you near the ends... didn't notice (will have to rewatch) if it changes the scale of the increments when you near the edges... if you haven't read Bret Victor's paper Magic Ink (it's about 70 pages) it's totally worth it.
I wonder if it would be possible to dynamically adjust the slider properties... I took a look at your code... there's some interesting Ace tricks with the token type... I'll have to look into that a bit more closely. Got some other projects for work the rest of this week.
Ben
On Thu, Mar 22, 2012 at 8:58 AM, Gabriel Florit [email protected] wrote:
netjunki, i had to deal with similar issues (jquery sliders) on my implementation: http://gabrielflor.it/water. i'm still not 100% there - bret's demo has the slider grow automatically - it doesn't have a max or min. i think we have to use a custom slider solution.
Reply to this email directly or view it on GitHub: https://github.com/aaronsnoswell/recanvas/issues/4#issuecomment-4641429
I tried zipping through your code and discover how you let jQuery know you just hit a numeric value. But I can't seem to discover how you did this. How would it be possible with just using jQuery to know you Ctrl+Clicked on a numeric value?
ACE (the code editor I'm using) parses everything into elements, and gives them classes depending on the type of token. For example, a number will look like this:
<span class='numeric'>42</span>.
My bit is easy - just listen for click events on a 'numeric' span.
@MJTheOne with code mirror (and in the recanvas variant of this system and in my ACE version before I discovered getTokenAt which is what I assume gabriel is referring to) this was a bit of a pain... I actually pass the string to Number and the check if that's NaN and do some other processing... it's really really ugly.
Take a look at js/script.js around line 80. That's where the horror is. :-)
So basicly using ACE would be the better solution then using CodeMirror? :P
Still on the fence about that one... the next thing that I want to get working is code completion... and ACE basically has nothing in this regard at the moment. BTW, CodeMirror also has a getTokenAt... and I'm guessing the return object's className property is the equivalent of ACE's getTokenAt type. I'm not sure when I'll have a chance to play with this again since I've got some other projects that require attention at the moment... but that's what I'd explore.
hmm I'll take a look at getTokenAt then. I'll let you know if I can get something working
Lol I srsly have no clue how to do this... And the manual isn't all that clear on how to use this... Ah well Im also busy rest of the week. So I'll prolly wait for your response when you have the time :P
EDIT: Well I was able to figure out that when clicking in the codeArea div I could use this: editor.getCursor(getTokenAt()); And that would return an Object with a few properties, including a string containing the information we want. A numeric value or a variable name, etc. But I have no clue how I would be able to change this specific value. One step at a time :P