From cf358fb07549111f06605f5b09e75aa863e4abcd Mon Sep 17 00:00:00 2001
From: Ofek <ofekshilon@gmail.com>
Date: Tue, 14 May 2024 10:57:51 +0300
Subject: [PATCH] Add 'wrap lines' button to opt-view (#6477)

![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.
---
 static/panes/opt-view.interfaces.ts |  1 +
 static/panes/opt-view.ts            | 37 +++++++++++++++++++++++++----
 views/templates/panes/opt-view.pug  |  5 ++++
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/static/panes/opt-view.interfaces.ts b/static/panes/opt-view.interfaces.ts
index 18ed7a2c8..dc27f6c59 100644
--- a/static/panes/opt-view.interfaces.ts
+++ b/static/panes/opt-view.interfaces.ts
@@ -25,6 +25,7 @@
 export interface OptState {
     optOutput?: OptCodeEntry[];
     source: any; // TODO
+    wrap: boolean;
 
     // options/filters
     'filter-missed': boolean;
diff --git a/static/panes/opt-view.ts b/static/panes/opt-view.ts
index 29a334ad9..2d3f4514b 100644
--- a/static/panes/opt-view.ts
+++ b/static/panes/opt-view.ts
@@ -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(),
         };
     }
diff --git a/views/templates/panes/opt-view.pug b/views/templates/panes/opt-view.pug
index 922b2985a..709d39283 100644
--- a/views/templates/panes/opt-view.pug
+++ b/views/templates/panes/opt-view.pug
@@ -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")