Cómo agregar (alternar) puntos de interrupción (breakpoints) en la canaleta del Editor ACE

Cómo agregar (alternar) puntos de interrupción (breakpoints) en la canaleta del Editor ACE

Dentro de las sesiones de un entorno de desarrollo integrado, un punto de interrupción es básicamente un marcador que puede definir para especificar dónde debe detenerse la ejecución cuando sus aplicaciones se ejecutan a través del depurador del IDE. Esos puntos de interrupción se almacenan obviamente en el IDE, no en el código en sí, por lo que puede compartir dicha información entre sesiones de depuración. Ace editor es un componente de edición de código basado en web que puede incrustar en sus aplicaciones para agregar un "IDE" muy robusto. Esto significa que también podrá agregar puntos de interrupción en el editor Ace siguiendo algunos pasos.

En este artículo, le explicaremos cómo establecer y eliminar puntos de interrupción en el editor Ace con JavaScript fácilmente.

1. Habilitar el cambio de punto de interrupción

Editor de Ace ofrece una forma interna de manejo de puntos de ruptura a través del guttermousedownevento y la sesión actual editor con los métodos setBreakpointclearBreakpointgetBreakpoints. Puede adjuntar fácilmente este evento al editor actual con el método on, proporcionando como primer argumento el nombre del evento que desea manejar y como segundo argumento la devolución de llamada que se ejecutará y recibirá el evento. Básicamente, cuando el usuario hace clic en algún lugar del canal, se ejecuta esta devolución de llamada, dentro de esta devolución de llamada debe verificar algunas reglas:

  • Si el elemento en el que se hizo clic no contiene la ace_gutter-cellclase, no sucederá nada, ya que el elemento en el que se hizo clic no será una línea y, por lo tanto, no será un punto de interrupción.
  • Si el editor actual no está enfocado, tampoco debería suceder nada.
  • Si el área en la que se hizo clic en el canalón es el área después del número, por ejemplo, 1, 2, 3, tampoco debería ocurrir nada.

Después de verificar si las condiciones anteriores no eran ciertas, puede continuar dentro del mismo evento para manejar el posicionamiento de los puntos de interrupción:

  • Almacene los puntos de interrupción de la sesión actual en una variable obteniéndolos a través del método session.getBreakpoints.
  • Almacene la fila actual que se actualiza cuando hace clic dentro del medianil con la línea actual.
  • Verifique si en los puntos de interrupción almacenados, la fila actual ya está registrada, si lo está, la lógica que aplicaría aquí es eliminar el punto de interrupción cuando el usuario hizo clic en un punto de interrupción ya definido, de lo contrario, el punto de interrupción debe agregarse al editor .

La siguiente lógica describe cómo se puede configurar una instancia simple del editor ace inicializado en modo PHP para procesar la lógica de los puntos de interrupción a través del evento y los métodos mencionados:

// 1. Inicializar editor ace
var editor = ace.edit("editor");

// 2. Inicializar con un tema personalizado
editor.setTheme("ace/theme/monokai");

// 3. Predefinido algún modo de resaltado, en nuestro caso PHP
editor.getSession().setMode({
    path: "ace/mode/php",
    inline: true
});

// 4. Adjunte un detector de eventos para controlar cuando el usuario haga clic en alguna fila del canal
// En este caso, el punto de interrupción se agregará en la posición del documento donde se hizo clic
editor.on("guttermousedown", function(e) {
    var target = e.domEvent.target;

    if (target.className.indexOf("ace_gutter-cell") == -1){
        return;
    }

    if (!editor.isFocused()){
        return; 
    }

    if (e.clientX > 25 + target.getBoundingClientRect().left){
        return;
    }

    var breakpoints = e.editor.session.getBreakpoints(row, 0);
    var row = e.getDocumentPosition().row;

    // Si ya hay un punto de interrupción definido, debe eliminarse, ofreciendo la función de alternancia
    if(typeof breakpoints[row] === typeof undefined){
        e.editor.session.setBreakpoint(row);
    }else{
        e.editor.session.clearBreakpoint(row);
    }

    e.stop();
});

2. Defina los estilos del punto de interrupción

Si ya probó el JavaScript anterior, verá que, aunque no se lanza ninguna excepción, porque todo está funcionando perfectamente, no hay puntos de interrupción visibles en el editor como en otros IDE. Eso sucede porque no ha agregado un estilo para personalizar el ace_breakpoint. Puede agregar uno muy genérico con el siguiente CSS:

.ace_gutter-cell.ace_breakpoint{ 
    border-radius: 20px 0px 0px 20px;
    /* Cambie el color del punto de interrupción si lo desea */
    box-shadow: 0px 0px 1px 1px #248c46 inset; 
}

El siguiente codepen muestra un editor ACE funcional que trabaja con puntos de interrupción, así que haga clic en el canal antes de un número y verá que el punto de interrupción se agregará con una marca verde:

See the Pen ACE Editor with Breakpoints by Our Code World (@ourcodeworld) on CodePen.

Obviamente, puede modificar el estilo del punto de interrupción y personalizarlo como desee, agregando algún carácter especial como un & bull; o algo mas.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable