Ace: Déplacez les points d'arrêt au fur et à mesure que le code change.

Créé le 6 mars 2013  ·  4Commentaires  ·  Source: ajaxorg/ace

Bref, ce serait formidable si les points d'arrêt se déplaçaient au fur et à mesure que le code change.

Plus en détail : ce serait formidable d'avoir des poignées de ligne qui persistent pour les lignes. Cette fonctionnalité semble être quelque peu essentielle pour l'expérience d'édition, et les points d'arrêt et les messages d'erreur doivent être liés aux poignées de ligne.

Commentaire le plus utile

J'ai trouvé une solution mais cela ne fonctionne que dans mon cas car je n'autorise qu'un seul point d'arrêt à la fois. Avec quelques améliorations peut convenir aussi pour le cas général.
J'ai utilisé l'écouteur on change sur l'instance de l'éditeur et vérifié le nombre de lignes modifiées par l'action qui a déclenché l'événement. S'il y en a plusieurs, nous sommes dans le cas où une ou plusieurs lignes sont ajoutées ou supprimées. Le paramètre d'action de l'événement nous aide à comprendre dans quel cas nous sommes.
Pour voir si je dois déplacer le ou les points d'arrêt, je vérifie s'il se situe entre la ligne de début et la ligne de fin de la modification. Si c'est dans cette gamme, je dois déménager.

Le code (rapidement écrit) est le suivant :

aceEditor.on("change", function (e) {
                var breakpointsArray = aceEditor.session.getBreakpoints();
                if(Object.keys(aceEditor.session.getBreakpoints()).length>0){
                    if(e.lines.length>1){
                        var breakpoint = parseInt(Object.keys(breakpointsArray)[0]);
                        var lines = e.lines.length -1;
                        var start = e.start.row;
                        var end = e.end.row;
                        if(e.action==='insert'){
                            console.log('new lines',breakpoint, start , end );
                            if(breakpoint>start ){
                                console.log('breakpoint forward');
                                aceEditor.session.clearBreakpoint(breakpoint);
                                aceEditor.session.setBreakpoint(breakpoint + lines);
                            }
                        } else if(e.action==='remove'){
                            console.log('removed lines',breakpoint, start , end);
                            if(breakpoint>start && breakpoint<end ){
                                console.log('breakpoint remove');
                                aceEditor.session.clearBreakpoint(breakpoint);
                            }
                            if(breakpoint>=end ){
                                console.log('breakpoint behind');
                                aceEditor.session.clearBreakpoint(breakpoint);
                                aceEditor.session.setBreakpoint(breakpoint - lines);
                            }
                        }
                    }
                }
            });

J'espère avoir aidé quelqu'un !

Tous les 4 commentaires

Dans cloud9, nous avons utilisé l'écouteur de changement pour mettre à jour les points d'arrêt dans un tableau séparé https://github.com/ajaxorg/cloud9/blob/master/plugins-client/ext.debugger/breakpoints.js#L170

Étant donné que ace utilise un tableau de chaînes, je ne sais pas comment implémenter au mieux les poignées de ligne, soit un tableau complet d'objets synchronisés avec les lignes, soit des plages similaires à la gestion des lignes de pliage dans edit_session. La partie délicate est la gestion des lignes qui sont divisées ou fusionnées, car différents types d'annotations de ligne nécessitent un comportement différent.

Je pense que votre solution pour les points d'arrêt fonctionnerait bien pour les annotations.

La partie délicate est la gestion des lignes qui sont divisées ou fusionnées, car différents types d'annotations de ligne nécessitent un > comportement différent.

Hmm .. Je ne peux pas inventer un seul exemple. J'apprécierais que vous en partagiez :)

J'ai trouvé une solution mais cela ne fonctionne que dans mon cas car je n'autorise qu'un seul point d'arrêt à la fois. Avec quelques améliorations peut convenir aussi pour le cas général.
J'ai utilisé l'écouteur on change sur l'instance de l'éditeur et vérifié le nombre de lignes modifiées par l'action qui a déclenché l'événement. S'il y en a plusieurs, nous sommes dans le cas où une ou plusieurs lignes sont ajoutées ou supprimées. Le paramètre d'action de l'événement nous aide à comprendre dans quel cas nous sommes.
Pour voir si je dois déplacer le ou les points d'arrêt, je vérifie s'il se situe entre la ligne de début et la ligne de fin de la modification. Si c'est dans cette gamme, je dois déménager.

Le code (rapidement écrit) est le suivant :

aceEditor.on("change", function (e) {
                var breakpointsArray = aceEditor.session.getBreakpoints();
                if(Object.keys(aceEditor.session.getBreakpoints()).length>0){
                    if(e.lines.length>1){
                        var breakpoint = parseInt(Object.keys(breakpointsArray)[0]);
                        var lines = e.lines.length -1;
                        var start = e.start.row;
                        var end = e.end.row;
                        if(e.action==='insert'){
                            console.log('new lines',breakpoint, start , end );
                            if(breakpoint>start ){
                                console.log('breakpoint forward');
                                aceEditor.session.clearBreakpoint(breakpoint);
                                aceEditor.session.setBreakpoint(breakpoint + lines);
                            }
                        } else if(e.action==='remove'){
                            console.log('removed lines',breakpoint, start , end);
                            if(breakpoint>start && breakpoint<end ){
                                console.log('breakpoint remove');
                                aceEditor.session.clearBreakpoint(breakpoint);
                            }
                            if(breakpoint>=end ){
                                console.log('breakpoint behind');
                                aceEditor.session.clearBreakpoint(breakpoint);
                                aceEditor.session.setBreakpoint(breakpoint - lines);
                            }
                        }
                    }
                }
            });

J'espère avoir aidé quelqu'un !

J'ai modifié la solution d'alessandrocaprarelli ci-dessus pour qu'elle fonctionne avec plusieurs points d'arrêt, cela peut être utile pour d'autres :

editor.on("change", function (e) {
    if (e.lines.length > 1 && (e.action==='insert' || e.action==='remove')){
        const breakpointsArrayOld = editor.session.getBreakpoints();
        let breakpointsArrayNew = [];

        const amountOfLinesAffected = e.lines.length - 1;
        const startRow = e.start.row;
        const endRow = e.end.row;

        for (const key of Object.keys(breakpointsArrayOld)) {
            let breakpointRow = parseInt(key)

            if (e.action==='insert') {  // new lines
                if (breakpointRow > startRow ){
                    // breakpoint forward
                    breakpointsArrayNew[breakpointRow + amountOfLinesAffected] = "ace_breakpoint"
                }
                else {
                    // unaffected by insert
                    breakpointsArrayNew[breakpointRow] = "ace_breakpoint"
                }
            }
            else if (e.action==='remove') {  // removed lines
                if (breakpointRow > startRow && breakpointRow <= endRow ){
                    // breakpoint removed
                }
                else if (breakpointRow >= endRow ){
                    // breakpoint behind
                    breakpointsArrayNew[breakpointRow - amountOfLinesAffected] = "ace_breakpoint"
                }
                else {
                    // unaffected by remove
                    breakpointsArrayNew[breakpointRow] = "ace_breakpoint"
                }
            }
        }

        // remove all old breakpoints
        for (const key of Object.keys(breakpointsArrayOld)) {
            let breakpointRow = parseInt(key)
            editor.session.clearBreakpoint(breakpointRow);
        }

        // add all new breakpoints
        for (const key of Object.keys(breakpointsArrayNew)) {
            let breakpointRow = parseInt(key)
            editor.session.setBreakpoint(breakpointRow);
        }
    }
})
Cette page vous a été utile?
0 / 5 - 0 notes