mirrors/compiler-explorer
1
0
Fork 0
mirror of https://github.com/compiler-explorer/compiler-explorer.git synced 2025-12-27 09:23:52 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add 'wrap lines' button to opt-view (#6477)

Browse Source 
![wrapopt](https://github.com/compiler-explorer/compiler-explorer/assets/73080/bcd63dff-5463-4822-944d-e426165b2987)

I thought I already added it but seems I didn't.
This commit is contained in:
Ofek
2024-05-14 10:57:51 +03:00
committed by GitHub
parent 2687f6a309
commit cf358fb075
3 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/panes/opt-view.interfaces.ts
View File

@@ -25,6 +25,7 @@
export interface OptState {
optOutput?: OptCodeEntry[];
source: any; // TODO
wrap: boolean;
// options/filters
'filter-missed': boolean;

37
static/panes/opt-view.ts
View File

@@ -49,12 +49,15 @@ type OptviewLine = {
export class Opt extends MonacoPane<monaco.editor.IStandaloneCodeEditor, OptState> {
// Note: bool | undef here instead of just bool because of an issue with field initialization order
isCompilerSupported?: boolean;
filters: Toggles;
private isCompilerSupported?: boolean;
private filters: Toggles;
private toggleWrapButton: Toggles;
private wrapButton: JQuery<HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>;
private wrapTitle: JQuery<HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>;
// Keep optRemarks as state, to avoid triggerring a recompile when options change
optRemarks: OptCodeEntry[];
srcAsOptview: OptviewLine[];
private optRemarks: OptCodeEntry[];
private srcAsOptview: OptviewLine[];
constructor(hub: Hub, container: Container, state: OptState & MonacoPaneState) {
super(hub, container, state);
@@ -93,6 +96,31 @@ export class Opt extends MonacoPane<monaco.editor.IStandaloneCodeEditor, OptStat
super.registerButtons(state);
this.filters = new Toggles(this.domRoot.find('.filters'), state as unknown as Record<string, boolean>);
this.filters.on('change', this.showOptRemarks.bind(this));
this.toggleWrapButton = new Toggles(this.domRoot.find('.options'), state as unknown as Record<string, boolean>);
this.toggleWrapButton.on('change', this.onToggleWrapChange.bind(this));
this.wrapButton = this.domRoot.find('.wrap-lines');
this.wrapTitle = this.wrapButton.prop('title');
if (state.wrap === true) {
this.wrapButton.prop('title', '[ON] ' + this.wrapTitle);
} else {
this.wrapButton.prop('title', '[OFF] ' + this.wrapTitle);
}
}
onToggleWrapChange(): void {
const state = this.getCurrentState();
if (state.wrap) {
this.editor.updateOptions({wordWrap: 'on'});
this.wrapButton.prop('title', '[ON] ' + this.wrapTitle);
} else {
this.editor.updateOptions({wordWrap: 'off'});
this.wrapButton.prop('title', '[OFF] ' + this.wrapTitle);
}
this.updateState();
}
override registerCallbacks() {
@@ -220,6 +248,7 @@ export class Opt extends MonacoPane<monaco.editor.IStandaloneCodeEditor, OptStat
override getCurrentState() {
return {
...this.filters.get(),
wrap: this.toggleWrapButton.get().wrap,
...super.getCurrentState(),
};
}

5
views/templates/panes/opt-view.pug
View File

@@ -7,6 +7,11 @@ mixin optionButton(bind, isActive, text, title)
#opt-view
.top-bar.btn-toolbar.bg-light(role="toolbar")
include ../../font-size
.btn-group.btn-group-sm.options(role="group" aria-label="Output options")
.button-checkbox
button.btn.btn-sm.btn-light.wrap-lines(type="button" title="Wrap lines" data-bind="wrap" aria-pressed="false" aria-label="Wrap lines")
span Wrap lines
input.d-none(type="checkbox" checked=false)
// TODO: Options - display inlining context, color token (from col-num), remove duplicates
.btn-group.btn-group-sm.filters(role="group")
button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Opt-Remarks Filters" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Set output filters")