beautify web settings area; add alignComments setting

VHDLFormatter.js

@@ -248,11 +248,12 @@ function SetNewLinesAfterSymbols(text, newLineSettings) {
 }
 exports.SetNewLinesAfterSymbols = SetNewLinesAfterSymbols;
 class signAlignSettings {
-    constructor(isRegional, isAll, mode, keyWords) {
+    constructor(isRegional, isAll, mode, keyWords, alignComments = false) {
         this.isRegional = isRegional;
         this.isAll = isAll;
         this.mode = mode;
         this.keyWords = keyWords;
+        this.alignComments = alignComments;
     }
 }
 exports.signAlignSettings = signAlignSettings;
@@ -337,7 +338,7 @@ function beautify(input, settings) {
     beautify3(arr, result, settings, 0, 0);
     var alignSettings = settings.SignAlignSettings;
     if (alignSettings != null && alignSettings.isAll) {
-        AlignSigns(result, 0, result.length - 1, alignSettings.mode);
+        AlignSigns(result, 0, result.length - 1, alignSettings.mode, alignSettings.alignComments);
     }
     arr = FormattedLineToString(result, settings.Indentation);
     input = arr.join("\r\n");
@@ -481,19 +482,21 @@ function beautifyPortGenericBlock(inputs, result, settings, startIndex, parentEn
             && alignSettings.keyWords != null
             && alignSettings.keyWords.indexOf(mode) >= 0) {
             blockBodyStartIndex++;
-            AlignSigns(result, blockBodyStartIndex, blockBodyEndIndex, alignSettings.mode);
+            AlignSigns(result, blockBodyStartIndex, blockBodyEndIndex, alignSettings.mode, alignSettings.alignComments);
         }
     }
     return [i, parentEndIndex];
 }
 exports.beautifyPortGenericBlock = beautifyPortGenericBlock;
-function AlignSigns(result, startIndex, endIndex, mode) {
+function AlignSigns(result, startIndex, endIndex, mode, alignComments = false) {
     AlignSign_(result, startIndex, endIndex, ":", mode);
     AlignSign_(result, startIndex, endIndex, ":=", mode);
     AlignSign_(result, startIndex, endIndex, "<=", mode);
     AlignSign_(result, startIndex, endIndex, "=>", mode);
     AlignSign_(result, startIndex, endIndex, "direction", mode);
-    AlignSign_(result, startIndex, endIndex, "@@comments", mode);
+    if (alignComments) {
+        AlignSign_(result, startIndex, endIndex, "@@comments", mode);
+    }
 }
 exports.AlignSigns = AlignSigns;
 function indexOfGroup(regex, input, group) {

VHDLFormatter.ts

@@ -285,11 +285,13 @@ export class signAlignSettings {
     isAll: boolean;
     mode: string;
     keyWords: Array<string>;
-    constructor(isRegional: boolean, isAll: boolean, mode: string, keyWords: Array<string>) {
+    alignComments: boolean;
+    constructor(isRegional: boolean, isAll: boolean, mode: string, keyWords: Array<string>, alignComments: boolean = false) {
         this.isRegional = isRegional;
         this.isAll = isAll;
         this.mode = mode;
         this.keyWords = keyWords;
+        this.alignComments = alignComments;
     }
 }
 
@@ -391,7 +393,7 @@ export function beautify(input: string, settings: BeautifierSettings) {
     beautify3(arr, result, settings, 0, 0);
     var alignSettings = settings.SignAlignSettings;
     if (alignSettings != null && alignSettings.isAll) {
-        AlignSigns(result, 0, result.length - 1, alignSettings.mode);
+        AlignSigns(result, 0, result.length - 1, alignSettings.mode, alignSettings.alignComments);
     }
 
     arr = FormattedLineToString(result, settings.Indentation);
@@ -543,19 +545,21 @@ export function beautifyPortGenericBlock(inputs: Array<string>, result: (Formatt
             && alignSettings.keyWords != null
             && alignSettings.keyWords.indexOf(mode) >= 0) {
             blockBodyStartIndex++;
-            AlignSigns(result, blockBodyStartIndex, blockBodyEndIndex, alignSettings.mode);
+            AlignSigns(result, blockBodyStartIndex, blockBodyEndIndex, alignSettings.mode, alignSettings.alignComments);
         }
     }
     return [i, parentEndIndex];
 }
 
-export function AlignSigns(result: (FormattedLine | FormattedLine[])[], startIndex: number, endIndex: number, mode: string) {
+export function AlignSigns(result: (FormattedLine | FormattedLine[])[], startIndex: number, endIndex: number, mode: string, alignComments: boolean = false) {
     AlignSign_(result, startIndex, endIndex, ":", mode);
     AlignSign_(result, startIndex, endIndex, ":=", mode);
     AlignSign_(result, startIndex, endIndex, "<=", mode);
     AlignSign_(result, startIndex, endIndex, "=>", mode);
     AlignSign_(result, startIndex, endIndex, "direction", mode);
-    AlignSign_(result, startIndex, endIndex, "@@comments", mode);
+    if (alignComments) {
+        AlignSign_(result, startIndex, endIndex, "@@comments", mode);
+    }
 }
 
 function indexOfGroup(regex: RegExp, input: string, group: number) {

index.html

@@ -105,7 +105,7 @@
         </div>
     </form>
     <div class="hide" id="settings_div">
-        <fieldset id="new_line_after_div">
+        <fieldset id="new_line_after_div" style="text-align: right;">
             <legend>New line after</legend>
             <form id="new_line_after_then">
                 <span class="code">THEN</span>
@@ -170,35 +170,44 @@
             <input type="checkbox" id="check_alias">
             <label for="check_alias">Check ALIAS (all long names will be replaced by ALIAS names)</label>
         </div>
-        <div id="sign_align_in_div">
-            Align signs in
-            <div class="checkbox inline" id="sign_align_port_div">
-                <input type="checkbox" id="sign_align_port">
-                <label for="sign_align_port" class="code">PORT()</label>
+        <fieldset id="align_settings_div">
+            <legend>Sign Alignment</legend>
+            <div id="sign_align_in_div">
+                Align signs in
+                <div class="checkbox inline" id="sign_align_port_div">
+                    <input type="checkbox" id="sign_align_port" onclick="alignAllSigns(false);">
+                    <label for="sign_align_port" class="code">PORT()</label>
+                </div>
+                <div class="checkbox inline" id="sign_align_generic_div">
+                    <input type="checkbox" id="sign_align_generic" onclick="alignAllSigns(false);">
+                    <label for="sign_align_generic" class="code">GENERIC()</label></div>
+                <div class="checkbox inline" id="sign_align_procedure_div">
+                    <input type="checkbox" id="sign_align_procedure" onclick="alignAllSigns(false);">
+                    <label for="sign_align_procedure" class="code">PROCEDURE()</label>
+                </div>
+                <div class="checkbox inline" id="sign_align_function_div">
+                    <input type="checkbox" id="sign_align_function" onclick="alignAllSigns(false);">
+                    <label for="sign_align_function" class="code">FUNCTION()</label>
+                </div>
             </div>
-            <div class="checkbox inline" id="sign_align_generic_div">
-                <input type="checkbox" id="sign_align_generic">
-                <label for="sign_align_generic" class="code">GENERIC()</label></div>
-            <div class="checkbox inline" id="sign_align_procedure_div">
-                <input type="checkbox" id="sign_align_procedure">
-                <label for="sign_align_procedure" class="code">PROCEDURE()</label>
+            <div class="checkbox inline" id="sign_align_all_div">
+                <input type="checkbox" id="sign_align_all" onclick="alignAllSigns(true);">
+                <label for="sign_align_all">Align signs in all places</label>
             </div>
-            <div class="checkbox inline" id="sign_align_function_div">
-                <input type="checkbox" id="sign_align_function">
-                <label for="sign_align_function" class="code">FUNCTION()</label>
+            <form class="inline" id="sign_align_mode_div">
+                <span> | Mode: </span>
+                <label>
+                    <input type="radio" name="sign_align_modecase" value="local">Local</label>
+                <label>
+                    <input type="radio" name="sign_align_modecase" value="global">Global</label>
+            </form>
+            <div>
+                <div class="checkbox inline" id="align_comments_div">
+                    <input type="checkbox" id="align_comments">
+                    <label for="align_comments">Align comments</label>
+                </div>
             </div>
-        </div>
-        <div class="checkbox inline" id="sign_align_all_div">
-            <input type="checkbox" id="sign_align_all">
-            <label for="sign_align_all">Align signs in all places</label>
-        </div>
-        <form class="inline" id="sign_align_mode_div">
-            <span>Mode: </span>
-            <label>
-                <input type="radio" name="sign_align_modecase" value="local">Local</label>
-            <label>
-                <input type="radio" name="sign_align_modecase" value="global">Global</label>
-        </form>
+        </fieldset>
         <div id="customise_indentation_div">
             <div class="checkbox inline" id="use_space_div">
                 <input type="checkbox" id="use_space">
@@ -343,6 +352,7 @@
                 }
                 document.getElementById("sign_align_all").checked = alignSettings.isAll;
                 document.getElementById("sign_align_mode_div").elements.namedItem("sign_align_modecase").value = alignSettings.mode;
+                document.getElementById("align_comments").checked = alignSettings.alignComments;
             }
             var newLineSettings = beautifierSettings.NewLineSettings;
             var newLineAfter = newLineSettings.newLineAfter;
@@ -431,6 +441,7 @@
             var sign_align_procedure = document.getElementById("sign_align_procedure").checked;
             var sign_align_generic = document.getElementById("sign_align_generic").checked;
             var sign_align_all = document.getElementById("sign_align_all").checked;
+            var align_comments = document.getElementById("align_comments").checked;
             var sign_align_mode = document.getElementById("sign_align_mode_div").elements.namedItem("sign_align_modecase").value;
             var new_line_after_port = document.getElementById("new_line_after_port").elements.namedItem("new_line_after_portcase").value;
             var new_line_after_then = document.getElementById("new_line_after_then").elements.namedItem("new_line_after_thencase").value;
@@ -480,7 +491,7 @@
                 signAlignKeywords.push("PROCEDURE");
             }
             sign_align = signAlignKeywords.length > 0;
-            let alignSettings = new signAlignSettings(sign_align, sign_align_all, sign_align_mode, signAlignKeywords)
+            let alignSettings = new signAlignSettings(sign_align, sign_align_all, sign_align_mode, signAlignKeywords, align_comments)
 
             beautifierSettings = new BeautifierSettings(remove_comments, remove_report, check_alias,
                 alignSettings,

main.js

@@ -18,9 +18,20 @@ function noFormat() {
         "cust_eol",
         "sign_align_mode",
         "keyword",
-        "typename"
+        "typename",
+        "align_comments",
+        "add_extraEOL"
     ];
     var isDisabled = getHTMLInputElement("no_format").checked;
+    changeStateOfElements(elements, isDisabled);
+    let radioButtons = document.getElementsByTagName("input");
+    for (let i = 0; i < radioButtons.length; i++) {
+        if (radioButtons[i].type == "radio") {
+            radioButtons[i].disabled = isDisabled;
+        }
+    }
+}
+function changeStateOfElements(elements, isDisabled) {
     elements.forEach(element => {
         var htmlElement = getHTMLInputElement(element + "_div");
         try {
@@ -34,12 +45,6 @@ function noFormat() {
             htmlElement.className = htmlElement.className.replace(/\bdisabled\b/g, "");
         }
     });
-    let radioButtons = document.getElementsByTagName("input");
-    for (let i = 0; i < radioButtons.length; i++) {
-        if (radioButtons[i].type == "radio") {
-            radioButtons[i].disabled = isDisabled;
-        }
-    }
 }
 function getHTMLInputElement(id) {
     return document.getElementById(id);
@@ -63,7 +68,7 @@ function MixLetters(input) {
     return arr.join("");
 }
 function wordWrap() {
-    var d = document.getElementById("result");
+    let d = getHTMLInputElement("result");
     if (d.className == "") {
         d.className = "wordwrap";
     }
@@ -71,4 +76,24 @@ function wordWrap() {
         d.className = "";
     }
 }
+function alignAllSigns(alignAll) {
+    if (alignAll) {
+        getHTMLInputElement("sign_align_port").checked = false;
+        getHTMLInputElement("sign_align_generic").checked = false;
+        getHTMLInputElement("sign_align_procedure").checked = false;
+        getHTMLInputElement("sign_align_function").checked = false;
+        getHTMLInputElement("sign_align_mode_div").disabled = false;
+    }
+    else {
+        getHTMLInputElement("sign_align_all").checked = false;
+    }
+    let isDisabled = !alignAll;
+    changeStateOfElements(["sign_align_mode"], isDisabled);
+    let radioButtons = document.querySelectorAll("#sign_align_mode_div input[type=radio]");
+    for (let i = 0; i < radioButtons.length; i++) {
+        if (radioButtons[i].type == "radio") {
+            radioButtons[i].disabled = isDisabled;
+        }
+    }
+}
 //# sourceMappingURL=main.js.map

main.ts

@@ -18,15 +18,27 @@ function noFormat() {
         "cust_eol",
         "sign_align_mode",
         "keyword",
-        "typename"
+        "typename",
+        "align_comments",
+        "add_extraEOL"
     ];
     var isDisabled = getHTMLInputElement("no_format").checked;
+    changeStateOfElements(elements, isDisabled);
+    let radioButtons = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByTagName("input");
+    for (let i = 0; i < radioButtons.length; i++) {
+        if ((<HTMLInputElement>radioButtons[i]).type == "radio") {
+            (<HTMLInputElement>radioButtons[i]).disabled = isDisabled;
+        }
+    }
+}
+
+function changeStateOfElements(elements: string[], isDisabled: boolean) {
     elements.forEach(element => {
         var htmlElement = getHTMLInputElement(element + "_div");
         try {
             getHTMLInputElement(element).disabled = isDisabled;
         }
-        catch{ }
+        catch { }
         if (isDisabled) {
             htmlElement.className += " disabled";
         }
@@ -34,12 +46,6 @@ function noFormat() {
             htmlElement.className = htmlElement.className.replace(/\bdisabled\b/g, "");
         }
     });
-    let radioButtons = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByTagName("input");
-    for (let i = 0; i < radioButtons.length; i++) {
-        if ((<HTMLInputElement>radioButtons[i]).type == "radio") {
-            (<HTMLInputElement>radioButtons[i]).disabled = isDisabled;
-        }
-    }
 }
 
 function getHTMLInputElement(id: string): HTMLInputElement {
@@ -66,10 +72,31 @@ function MixLetters(input: string) {
 }
 
 function wordWrap() {
-    var d = document.getElementById("result");
+    let d = getHTMLInputElement("result");
     if (d.className == "") {
         d.className = "wordwrap";
     } else {
         d.className = "";
     }
+}
+
+function alignAllSigns(alignAll: boolean) {
+    if (alignAll) {
+        getHTMLInputElement("sign_align_port").checked = false;
+        getHTMLInputElement("sign_align_generic").checked = false;
+        getHTMLInputElement("sign_align_procedure").checked = false;
+        getHTMLInputElement("sign_align_function").checked = false;
+        getHTMLInputElement("sign_align_mode_div").disabled = false;
+    }
+    else {
+        getHTMLInputElement("sign_align_all").checked = false;
+    }
+    let isDisabled = !alignAll;
+    changeStateOfElements(["sign_align_mode"], isDisabled);
+    let radioButtons = document.querySelectorAll("#sign_align_mode_div input[type=radio]");
+    for (let i = 0; i < radioButtons.length; i++) {
+        if ((<HTMLInputElement>radioButtons[i]).type == "radio") {
+            (<HTMLInputElement>radioButtons[i]).disabled = isDisabled;
+        }
+    }
 }

style.css

@@ -120,16 +120,16 @@ li {
 
 fieldset {
     width: fit-content;
-    border: 1px solid #9a9a9a;
+    border: 1px solid #ccc;
     margin: 25px 0 5px 0;
-    padding-left: 0;
+    padding: 5px;
 }
 
 legend {
     padding: 2px 5px;
-    background-color: #e0e0e0;
+    background-color: #ccc;
     border-radius: 2px;
-    margin: -27px 0 0 -1px;
+    margin: -27px 0 0 -6px;
     position: absolute;
 }
 
@@ -182,9 +182,7 @@ form {
 }
 
 form span {
-    width: 170px;
     display: inline-block;
-    text-align: right;
 }
 
 a {

tests/VHDLFormatter.test.ts

@@ -84,7 +84,7 @@ describe('VHDLFormatter', function () {
         let result = beautify(input, settings);
         expect(result).toBe(expected);
     });
-    
+
     it('align signs in all places', function () {
         let setting = getDefaultBeautifierSettings(new NewLineSettings());
         setting.SignAlignSettings = new signAlignSettings(false, true, "", []);
@@ -95,13 +95,30 @@ describe('VHDLFormatter', function () {
         let result = beautify(input, setting);
         expect(result).toBe(expected);
     });
-    
+
     it('semicolon blocks are aligned', function () {
         let settings = GetDefaultSettings();
         let input = 'OUT <= In0 AFTER 2ns WHEN "00",\r\n       In1 AFTER 2ns WHEN "01",\r\n       In2 AFTER 2ns WHEN "10",\r\n       In3 AFTER 2ns WHEN "11";';
         let result = beautify(input, settings);
         expect(result).toBe(input);
     });
+
+    it('align comments', function () {
+        let settings = GetDefaultSettings();
+        settings.SignAlignSettings = new signAlignSettings(false, true, "", [], true);
+        let input = 'test := loooong; -- test\r\ntest := short; -- test';
+        let expected = 'test := loooong; -- test\r\ntest := short;   -- test';
+        let result = beautify(input, settings);
+        expect(result).toBe(expected);
+    });
+
+    it('do not align comments', function () {
+        let settings = GetDefaultSettings();
+        settings.SignAlignSettings = new signAlignSettings(false, true, "", [], false);
+        let input = 'test := loooong; -- test\r\ntest := short; -- test';
+        let result = beautify(input, settings);
+        expect(result).toBe(input);
+    });
 });
 
 function GetDefaultSettings(indentation: string = "    "): BeautifierSettings {

tests/VHDLFormatterUnitTests.ts

@@ -902,7 +902,6 @@ function IntegrationTest() {
     IntegrationTest72();
     IntegrationTest73();
     IntegrationTest74();
-    IntegrationTest75();
     IntegrationTest76();
     IntegrationTest77();
     IntegrationTest78();
@@ -1324,15 +1323,6 @@ function IntegrationTest74() {
     assertAndCountTest("end of line 2", expected, actual);
 }
 
-function IntegrationTest75() {
-    let settings = GetDefaultSettings();
-    settings.SignAlignSettings = new signAlignSettings(false, true, "", []);
-    let input = 'test := loooong; -- test\r\ntest := short; -- test';
-    let expected = 'test := loooong; -- test\r\ntest := short;   -- test';
-    let actual = beautify(input, settings);
-    assertAndCountTest("align comments", expected, actual);
-}
-
 function IntegrationTest76() {
     let settings = GetDefaultSettings();
     settings.SignAlignSettings = new signAlignSettings(false, true, "", []);