editor and autocompletion/snippet experiments

[rimmartin]

Hi @erossignon ,

I'm experimenting with a new web interface for node-occ where the editor is based on http://ace.c9.io.

Experimenting with snippets and autocompletion features in it. Then along the way I noticed your sample app pulls in an ace.js script at https://github.com/erossignon/node-occ/blob/master/sample/views/sample.ejs#L66 with

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

Is this a particular ace version of the same editor? Your front page mentions codemirror yet I see scripts commented out so I can assume you are moving to ace?

My current configuration of ace has two snippets working and I'm adding the rest of the node-occ api functions:

<script>
    require.config({paths: { ace: "js/lib/ace"}});
    require(["ace/ace", "ace/ext/statusbar", "ace/ext/language_tools", "ace/snippets"], function(ace) {
            console.log("This is the testace module");
            var editor = ace.edit("editor");
            var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
            // create a simple selection status indicator
            var statusBar = new StatusBar(editor, document.getElementById("statusBar"));
            editor.setTheme("ace/theme/twilight");
            editor.session.setMode("ace/mode/javascript");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true
            });
            var langTools = ace.require("ace/ext/language_tools");
            var snippetManager = langTools.snippetManager;
            var snippetCompleter = {
                getCompletions: function(editor, session, pos, prefix, callback) {
                    var completions = [];
                    callback(null, [{caption: "makeBox", snippet: "makeBox(\[${1:x1}, ${2:y1}, ${3:z1}\], \[${4:x2}, ${5:y2}, ${6:z2}\]);", meta: "csg", type: "snippet"},
                                    {caption: "makeTorus", snippet: "makeTorus(\[${1:x1}, ${2:y1}, ${3:z1}\], \[${4:x2}, ${5:y2}, ${6:z2}\], ${7:r0},${8:rs});", meta: "csg", type: "snippet"}]);
                },
                getDocTooltip: function(item) {
                    if (item.type == "snippet" && !item.docHTML) {
                        item.docHTML = [
                            "<b>", langTools.escapeHTML(item.caption), "</b>", "<hr></hr>",
                            langTools.escapeHTML(item.snippet)
                        ].join("");
                    }
                }
            };          
            langTools.addCompleter(snippetCompleter);           
            var csgCompleter = {
                getCompletions: function(editor, session, pos, prefix, callback) {
                    if (prefix.length === 0) { callback(null, []); return }
                            // wordList like [{"word":"flow","freq":24,"score":300,"flags":"bc","syllables":"1"}]
                            callback(null, [{name: "makeBox", value: "makeBox([x1, y1, z1], [x2, y2, z2])", score: 300, "syllables":"2", meta: "csg"}]);
                }
            }
            //langTools.addCompleter(csgCompleter);         
            editor.setValue("Hello\n\tworld!", -1);
        }
    );
</script>

Would you prefer I fork and work up a demo of what I'm doing? Yet my dependencies are a bit different because of other experiments; koa based for one. Or I was thinking there could eventually be a node-occ.gui or other related dot name repository.

I also built a jstree http://www.jstree.com/ based slideout panel of a folder interface to provide a project system. And made a more heads up display based on the threejs. Have plans to add math geometry assisters.

Also github will serve pages from a special branch in the repository. I set up for one of my projects http://rycole.com/hdf5.node/ Jekyll http://jekyllrb.com/ based tutorials and api documents using http://bruth.github.io/jekyll-docs-template/. Would you like such pages setup for node-occ?