Show Debug line & Editor's Breakpoint

src/web/program.ts

@@ -53,6 +53,42 @@ const Render3DTypes = {
     voxel: VoxelPathTracer,
 };
 
+class DebugLineHighlighter implements ace.Ace.MarkerLike {
+    range: ace.Ace.Range;
+    type: string;
+    renderer?: ace.Ace.MarkerRenderer;
+    clazz: string = 'debug-line';
+    inFront: boolean;
+    id: number;
+    lineNo: number = -1;
+    public setLineNo(lineNo, editor:ace.Ace.Editor) {
+        if(lineNo != this.lineNo){
+            this.lineNo = lineNo;
+            this.range = new ace.Range(this.lineNo,0, this.lineNo+1, 0);
+            //@ts-ignore
+            editor.session._emit("changeBackMarker");
+        }
+    }
+    //constructor(editor: ace.Ace.edit)
+    public update (html, markerLayer, session:ace.Ace.EditSession, config) {
+        if(this.lineNo<0) return;
+
+        // let y = getRandomInt(26)
+        let dynR = new ace.Range(this.lineNo,0, this.lineNo+1, 10);
+        // dynR=range3
+        //range2 = dynR;
+        const w = dynR.clipRows(config.firstRow, config.lastRow);
+        if(w.isEmpty()) return;
+        debugger
+
+        // var rangeToAddMarkerTo = dynR.toScreenRange(session);
+        // var rangeAsString = rangeToAddMarkerTo.toString();
+        // console.log(config.firstRow,  config.lastRow);
+        //console.log('halo',rangeAsString)// JSON.stringify({html, markerLayer, session, config}, null, 3))
+        markerLayer.drawSingleLineMarker(html, dynR, 'debug-line', config)
+    }
+}
+
 export class Program {
     @observable.ref
     public static instance: Model = null;
@@ -73,6 +109,9 @@ export class Program {
         mode: "ace/mode/xml",
     });
 
+    public static readonly debugLineHighlighter = new DebugLineHighlighter();
+
+
     @action
     public static loadPalette() {
         const ep = Loader.xmlParse(PaletteXML);
@@ -225,6 +264,25 @@ export class Model {
 
             Program.editor.setValue(this.modelXML);
             Program.editor.clearSelection();
+            Program.editor.session.clearBreakpoints();
+            if(!Program.debugLineHighlighter.id){
+                Program.editor.session.addDynamicMarker(Program.debugLineHighlighter, false);
+                //@ts-ignore
+                Program.editor.on("guttermousedown", (ev) => {
+                    const row = ev.getDocumentPosition().row;
+                    // const node = this.nodes.find((node,i) =>{
+                    //     return node.state.node.source.lineNumber == row
+                    // })
+                    const nodeIndex = this.nodes.findIndex((node,i) =>{
+                        return node.state.node.source.lineNumber == row +1
+                    })
+                    // console.log('gutter.row:', row, 'nodeIndex:', nodeIndex)
+                    if(nodeIndex >=0){
+                        this.toggleBreakpoint(nodeIndex)
+                    }
+                })
+            }
+            Program.debugLineHighlighter.setLineNo(-1, Program.editor);
 
             const seedString = emodel.getAttribute("seeds");
             const seeds = seedString?.split(" ").map((s) => parseInt(s));
@@ -554,13 +612,18 @@ export class Model {
     @action
     public toggleBreakpoint(index: number) {
         const node = this.nodes[index];
+        // console.log('Breakpoint: nodeIndex:',index, 'Node:',node)
         if (!node) return;
         node.breakpoint = !node.breakpoint;
+        const editor = Program.editor.session;
+        const lineNo = node.state.node.source.lineNumber -1
 
         if (node.breakpoint) {
             this.breakpoints.add(node.state.node);
+            editor.setBreakpoint(lineNo, 'debug-breakpoint')
         } else {
             this.breakpoints.delete(node.state.node);
+            editor.clearBreakpoint(lineNo)
         }
     }
 

src/web/right.tsx

@@ -557,21 +557,26 @@ const StateTree = observer(() => {
 
         if (xml) {
             const node = model.nodes[model.curr_node_index];
-            Program.editor.clearSelection();
-
+            // Program.editor.clearSelection();
+            
             if (node) {
                 const source = node.state.node.source;
                 // index starts at 1 really @xmldom
-                Program.editor.moveCursorTo(
-                    source.lineNumber - 1,
-                    source.columnNumber - 1
-                );
+                Program.debugLineHighlighter.setLineNo(source.lineNumber -1, Program.editor);
+                //@ts-ignore
+                // Program.editor.session._emit("changeBackMarker");
+                // Program.editor.moveCursorTo(
+                //     source.lineNumber - 1,
+                //     source.columnNumber - 1
+                // );
 
                 const lines =
                     Program.editor.container.querySelectorAll(
                         "div.ace_line_group"
                     );
                 elem = lines[source.lineNumber] as HTMLDivElement;
+            } else {
+                Program.debugLineHighlighter.setLineNo(-1, Program.editor);
             }
         } else {
             elem = list.children[model.curr_node_index] as HTMLDivElement;

src/web/style/index.css

@@ -334,6 +334,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .node-state[data-highlight="true"] {
     --color: cornflowerblue !important;
+    background: rgba(255, 255, 0, 0.2);
 }
 
 .node-state[data-highlight="true"][data-breakpoint="true"] {
@@ -705,3 +706,27 @@ button.danger:hover {
 .ace-tm .ace_marker-layer .ace_selection {
     background-color: #264f78;
 }
+.debug-line {
+    background-color: yellow;
+    position: absolute;
+    left: 0!important;
+    opacity: 0.2;
+}
+.debug-breakpoint {
+    /* background-color: pink; */
+    position: absolute;
+    /* left: 0!important; */
+    /* opacity: 0.2; */
+}
+.debug-breakpoint::before {
+    content: '';
+    margin: 0;
+    width: 12px;
+    height: 12px;
+    background-color: crimson;
+    border-radius: 50%;
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    cursor: pointer;
+}