From 0e8a873381db7fef6dfba2e68cbfdd35192692ad Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sat, 18 Nov 2023 21:27:51 +0700 Subject: [PATCH 1/6] show the running line (in xml edtor mode) --- src/web/program.ts | 42 +++++++++++++++++++++++++++++++++++++++++ src/web/right.tsx | 11 +++++++---- src/web/style/index.css | 6 ++++++ 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src/web/program.ts b/src/web/program.ts index a15c2a7..f58cd2f 100644 --- a/src/web/program.ts +++ b/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,9 @@ export class Model { Program.editor.setValue(this.modelXML); Program.editor.clearSelection(); + if(!Program.debugLineHighlighter.id){ + Program.editor.session.addDynamicMarker(Program.debugLineHighlighter, false) + } const seedString = emodel.getAttribute("seeds"); const seeds = seedString?.split(" ").map((s) => parseInt(s)); diff --git a/src/web/right.tsx b/src/web/right.tsx index 9ba8fcc..37c0628 100644 --- a/src/web/right.tsx +++ b/src/web/right.tsx @@ -562,10 +562,13 @@ const StateTree = observer(() => { 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( diff --git a/src/web/style/index.css b/src/web/style/index.css index acbbf9c..5037bc5 100644 --- a/src/web/style/index.css +++ b/src/web/style/index.css @@ -705,3 +705,9 @@ 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; +} \ No newline at end of file From 5529c8dec97a1ea6184cb2cc1e5432a89dfab11c Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sat, 18 Nov 2023 22:26:03 +0700 Subject: [PATCH 2/6] ace editor gutter.mousedown = +breakpoint --- src/web/program.ts | 27 ++++++++++++++++++++++++++- src/web/style/index.css | 19 +++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/src/web/program.ts b/src/web/program.ts index f58cd2f..830654a 100644 --- a/src/web/program.ts +++ b/src/web/program.ts @@ -264,8 +264,29 @@ 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) + 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 - 1 == row + }) + this.toggleBreakpoint(nodeIndex) + + // console.log(row) + // var s = ev.editor.session; + // //debugger; + // if(s.getBreakpoints()[row]=='debug-breakpoint'){ + // s.setBreakpoint(row, false) + // } else { + // s.setBreakpoint(row, 'debug-breakpoint') + // } + }) } const seedString = emodel.getAttribute("seeds"); @@ -598,11 +619,15 @@ export class Model { const node = this.nodes[index]; 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) } } diff --git a/src/web/style/index.css b/src/web/style/index.css index 5037bc5..18ab8f4 100644 --- a/src/web/style/index.css +++ b/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"] { @@ -710,4 +711,22 @@ button.danger:hover { 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; } \ No newline at end of file From 39930f12fd60ad1f3fbd42549e3ea6b55f759006 Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sat, 18 Nov 2023 22:37:55 +0700 Subject: [PATCH 3/6] bugfix wrong index --- src/web/program.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web/program.ts b/src/web/program.ts index 830654a..a46c642 100644 --- a/src/web/program.ts +++ b/src/web/program.ts @@ -274,6 +274,7 @@ export class Model { // return node.state.node.source.lineNumber == row // }) const nodeIndex = this.nodes.findIndex((node,i) =>{ + return node.state.node.source.lineNumber == row +1 return node.state.node.source.lineNumber - 1 == row }) this.toggleBreakpoint(nodeIndex) From ba76e858649f5ee13dea7909a73512316e815c09 Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sun, 19 Nov 2023 07:56:15 +0700 Subject: [PATCH 4/6] del deadcode; mute console --- src/web/program.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/web/program.ts b/src/web/program.ts index a46c642..2366f2f 100644 --- a/src/web/program.ts +++ b/src/web/program.ts @@ -275,18 +275,11 @@ export class Model { // }) const nodeIndex = this.nodes.findIndex((node,i) =>{ return node.state.node.source.lineNumber == row +1 - return node.state.node.source.lineNumber - 1 == row }) - this.toggleBreakpoint(nodeIndex) - - // console.log(row) - // var s = ev.editor.session; - // //debugger; - // if(s.getBreakpoints()[row]=='debug-breakpoint'){ - // s.setBreakpoint(row, false) - // } else { - // s.setBreakpoint(row, 'debug-breakpoint') - // } + // console.log('gutter.row:', row, 'nodeIndex:', nodeIndex) + if(nodeIndex >=0){ + this.toggleBreakpoint(nodeIndex) + } }) } @@ -618,6 +611,7 @@ 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; From 4a6751339742c77f069ddecbc26117523a0088ac Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sun, 19 Nov 2023 09:33:38 +0700 Subject: [PATCH 5/6] hide highlight on finish --- src/web/right.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/web/right.tsx b/src/web/right.tsx index 37c0628..c14ed33 100644 --- a/src/web/right.tsx +++ b/src/web/right.tsx @@ -557,8 +557,8 @@ 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 @@ -575,6 +575,8 @@ const StateTree = observer(() => { "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; From 93b160401c9f5eb2cf2ae47812ffa9551af9fa5d Mon Sep 17 00:00:00 2001 From: Fathony Luthfillah Date: Sun, 19 Nov 2023 09:36:50 +0700 Subject: [PATCH 6/6] hide highlight on load other model --- src/web/program.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web/program.ts b/src/web/program.ts index 2366f2f..d6237d7 100644 --- a/src/web/program.ts +++ b/src/web/program.ts @@ -282,6 +282,7 @@ export class Model { } }) } + Program.debugLineHighlighter.setLineNo(-1, Program.editor); const seedString = emodel.getAttribute("seeds"); const seeds = seedString?.split(" ").map((s) => parseInt(s));