processing / p5.js-editor

Deprecated desktop editor for p5.js
https://p5js.org
MIT License
338 stars 91 forks source link

autocomplete / autosuggest #94

Open therewasaguy opened 9 years ago

therewasaguy commented 9 years ago

I've started to look into autocompletion and autosuggest for p5 functions. The Khan Editor handles this really well:

http://khan.github.io/live-editor/demos/simple/

They're also using the ACE editor.

If you type ScratchpadAutosuggestData into the console you can see how the data is formatted, from this document

It's sorta similar to the data.json that p5 generates with grunt yuidoc for the reference pages.

A difference is that their name is "line(x1, y1, x2, y2)" rather than just "line," and they include a link to an example (in our case this would be the reference page at p5js.org). But we can probably generate both of those when parsing our data.json:

        {
            "file": "src/core/2d_primitives.js",
            "line": 198,
            "description": "Draws a line (a direct path between two points) to the screen. The version\nof line() with four parameters draws the line in 2D. To color a line, use\nthe stroke() function. A line cannot be filled, therefore the fill()\nfunction will not affect the color of a line. 2D lines are drawn with a\nwidth of one pixel by default, but this can be changed with the\nstrokeWeight() function.",
            "itemtype": "method",
            "name": "line",
            "params": [
                {
                    "name": "x1",
                    "description": "the x-coordinate of the first point",
                    "type": "Number"
                },
                {
                    "name": "y1",
                    "description": "the y-coordinate of the first point",
                    "type": "Number"
                },
                {
                    "name": "x2",
                    "description": "the x-coordinate of the second point",
                    "type": "Number"
                },
                {
                    "name": "y2",
                    "description": "the y-coordinate of the second point",
                    "type": "Number"
                }
            ],
antiboredom commented 9 years ago

sounds great!

therewasaguy commented 9 years ago

The Tern library is another option

http://ternjs.net/doc/manual.html#protocol

It could be added to a user's text editor of choice, and built into ACE with something like this: http://sevin7676.github.io/Ace.Tern/demo.html

Seems like we'd generate data in this format: http://ternjs.net/doc/manual.html#typedef

I'll keep playing with this, anyone with thoughts about this feel free to chime in

shiffman commented 9 years ago

Autocomplete is a terrific tool and somewhat of a must for any good editor. However, it's also particularly tricky to balance its features with the clean simplicity of a beginner experience. I'm excited for the possibilities you mention above and happy to chat about how autocomplete works in Processing (we went around in many circles about integrating it) if that can be of help.

ducklin5 commented 7 years ago

Does anyone have a Tern definition json file for p5 yet? would it be easier to generate it with tern's condense tool or through yuidoc?