rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

debugger

Browse Source
This commit is contained in:
LenAnderson
2024-06-23 14:19:10 -04:00
parent a7f74f0387
commit bc40ee084d
3 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/scripts/extensions/quick-reply/src/QuickReply.js
View File

@ -673,6 +673,33 @@ export class QuickReply {
if (this.editorExecuteHide.checked) { if (this.editorExecuteHide.checked) {
this.editorPopup.dlg.classList.add('qr--hide'); this.editorPopup.dlg.classList.add('qr--hide');
} }
const syntax = this.editorDom.querySelector('#qr--modal-messageSyntaxInner');
const updateScroll = (evt) => {
let left = syntax.scrollLeft;
let top = syntax.scrollTop;
if (evt) {
evt.preventDefault();
left = syntax.scrollLeft + evt.deltaX;
top = syntax.scrollTop + evt.deltaY;
syntax.scrollTo({
behavior: 'instant',
left,
top,
});
}
this.editorMessage.scrollTo({
behavior: 'instant',
left,
top,
});
};
const updateScrollDebounced = updateScroll;
syntax.addEventListener('wheel', (evt)=>{
updateScrollDebounced(evt);
});
syntax.addEventListener('scroll', (evt)=>{
updateScrollDebounced();
});
try { try {
this.abortController = new SlashCommandAbortController(); this.abortController = new SlashCommandAbortController();
this.debugController = new SlashCommandDebugController(); this.debugController = new SlashCommandDebugController();
@ -693,7 +720,7 @@ export class QuickReply {
wrap.classList.add('qr--scope'); wrap.classList.add('qr--scope');
if (isCurrent) { if (isCurrent) {
const executor = this.debugController.cmdStack.slice(-1)[0]; const executor = this.debugController.cmdStack.slice(-1)[0];
{ { // named args
const namedTitle = document.createElement('div'); { const namedTitle = document.createElement('div'); {
namedTitle.classList.add('qr--title'); namedTitle.classList.add('qr--title');
namedTitle.textContent = `Named Args - /${executor.name}`; namedTitle.textContent = `Named Args - /${executor.name}`;
@ -762,7 +789,7 @@ export class QuickReply {
} }
} }
} }
{ { // unnamed args
const unnamedTitle = document.createElement('div'); { const unnamedTitle = document.createElement('div'); {
unnamedTitle.classList.add('qr--title'); unnamedTitle.classList.add('qr--title');
unnamedTitle.textContent = `Unnamed Args - /${executor.name}`; unnamedTitle.textContent = `Unnamed Args - /${executor.name}`;
@ -842,20 +869,21 @@ export class QuickReply {
} }
} }
} }
// current scope
const title = document.createElement('div'); { const title = document.createElement('div'); {
title.classList.add('qr--title'); title.classList.add('qr--title');
title.textContent = isCurrent ? 'Current Scope' : 'Parent Scope'; title.textContent = isCurrent ? 'Current Scope' : 'Parent Scope';
let hi; let hi;
title.addEventListener('pointerenter', ()=>{ title.addEventListener('pointerenter', ()=>{
const loc = this.getEditorPosition(Math.max(0, c.executorList[0].start - 1), c.executorList.slice(-1)[0].end); const loc = this.getEditorPosition(Math.max(0, c.executorList[0].start - 1), c.executorList.slice(-1)[0].end);
const layer = this.editorPopup.dlg.getBoundingClientRect(); const layer = syntax.getBoundingClientRect();
hi = document.createElement('div'); hi = document.createElement('div');
hi.classList.add('qr--highlight-secondary'); hi.classList.add('qr--highlight-secondary');
hi.style.left = `${loc.left - layer.left}px`; hi.style.left = `${loc.left - layer.left}px`;
hi.style.width = `${loc.right - loc.left}px`; hi.style.width = `${loc.right - loc.left}px`;
hi.style.top = `${loc.top - layer.top}px`; hi.style.top = `${loc.top - layer.top}px`;
hi.style.height = `${loc.bottom - loc.top}px`; hi.style.height = `${loc.bottom - loc.top}px`;
this.editorPopup.dlg.append(hi); syntax.append(hi);
}); });
title.addEventListener('pointerleave', ()=>hi?.remove()); title.addEventListener('pointerleave', ()=>hi?.remove());
wrap.append(title); wrap.append(title);
@ -987,14 +1015,14 @@ export class QuickReply {
let hi; let hi;
item.addEventListener('pointerenter', ()=>{ item.addEventListener('pointerenter', ()=>{
const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end); const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end);
const layer = this.editorPopup.dlg.getBoundingClientRect(); const layer = syntax.getBoundingClientRect();
hi = document.createElement('div'); hi = document.createElement('div');
hi.classList.add('qr--highlight-secondary'); hi.classList.add('qr--highlight-secondary');
hi.style.left = `${loc.left - layer.left}px`; hi.style.left = `${loc.left - layer.left}px`;
hi.style.width = `${loc.right - loc.left}px`; hi.style.width = `${loc.right - loc.left}px`;
hi.style.top = `${loc.top - layer.top}px`; hi.style.top = `${loc.top - layer.top}px`;
hi.style.height = `${loc.bottom - loc.top}px`; hi.style.height = `${loc.bottom - loc.top}px`;
this.editorPopup.dlg.append(hi); syntax.append(hi);
}); });
item.addEventListener('pointerleave', ()=>hi?.remove()); item.addEventListener('pointerleave', ()=>hi?.remove());
wrap.append(item); wrap.append(item);
@ -1007,7 +1035,7 @@ export class QuickReply {
this.editorDebugState.append(buildStack()); this.editorDebugState.append(buildStack());
this.editorDebugState.classList.add('qr--active'); this.editorDebugState.classList.add('qr--active');
const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end); const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end);
const layer = this.editorPopup.dlg.getBoundingClientRect(); const layer = syntax.getBoundingClientRect();
const hi = document.createElement('div'); const hi = document.createElement('div');
hi.classList.add('qr--highlight'); hi.classList.add('qr--highlight');
if (this.debugController.namedArguments === undefined) { if (this.debugController.namedArguments === undefined) {
@ -1017,7 +1045,7 @@ export class QuickReply {
hi.style.width = `${loc.right - loc.left}px`; hi.style.width = `${loc.right - loc.left}px`;
hi.style.top = `${loc.top - layer.top}px`; hi.style.top = `${loc.top - layer.top}px`;
hi.style.height = `${loc.bottom - loc.top}px`; hi.style.height = `${loc.bottom - loc.top}px`;
this.editorPopup.dlg.append(hi); syntax.append(hi);
const isStepping = await this.debugController.awaitContinue(); const isStepping = await this.debugController.awaitContinue();
hi.remove(); hi.remove();
this.editorDebugState.textContent = ''; this.editorDebugState.textContent = '';

4
public/scripts/extensions/quick-reply/style.css
View File

@ -242,7 +242,7 @@
display: none; display: none;
} }
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight { .popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight {
position: fixed; position: absolute;
z-index: 50000; z-index: 50000;
pointer-events: none; pointer-events: none;
background-color: rgba(47, 150, 180, 0.5); background-color: rgba(47, 150, 180, 0.5);
@ -251,7 +251,7 @@
background-color: rgba(255, 255, 0, 0.5); background-color: rgba(255, 255, 0, 0.5);
} }
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight-secondary { .popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight-secondary {
position: fixed; position: absolute;
z-index: 50000; z-index: 50000;
pointer-events: none; pointer-events: none;
border: 3px solid red; border: 3px solid red;

4
public/scripts/extensions/quick-reply/style.less
View File

@ -268,7 +268,7 @@
} }
.qr--highlight { .qr--highlight {
position: fixed; position: absolute;
z-index: 50000; z-index: 50000;
pointer-events: none; pointer-events: none;
background-color: rgb(47 150 180 / 0.5); background-color: rgb(47 150 180 / 0.5);
@ -277,7 +277,7 @@
} }
} }
.qr--highlight-secondary { .qr--highlight-secondary {
position: fixed; position: absolute;
z-index: 50000; z-index: 50000;
pointer-events: none; pointer-events: none;
border: 3px solid red; border: 3px solid red;