D2h visual

package.json

@@ -125,7 +125,7 @@
     "mini-css-extract-plugin": "2.7.7",
     "mkdirp": "3.0.1",
     "nopt": "7.2.0",
-    "postcss": "8.4.33",
+    "postcss": "^8.4.33",
     "postcss-cli": "11.0.0",
     "postcss-import": "16.0.0",
     "postcss-loader": "7.3.4",

src/diff2html.ts

@@ -19,6 +19,7 @@ export const defaultDiff2HtmlConfig = {
   ...defaultSideBySideRendererConfig,
   outputFormat: OutputFormatType.LINE_BY_LINE,
   drawFileList: true,
+  lineFolding: false
 };
 
 export function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[] {

src/line-by-line-renderer.ts

@@ -16,13 +16,15 @@ export interface LineByLineRendererConfig extends renderUtils.RenderConfig {
   renderNothingWhenEmpty?: boolean;
   matchingMaxComparisons?: number;
   maxLineSizeInBlockForComparison?: number;
+  lineFolding?: boolean;
 }
 
 export const defaultLineByLineRendererConfig = {
   ...renderUtils.defaultRenderConfig,
   renderNothingWhenEmpty: false,
   matchingMaxComparisons: 2500,
   maxLineSizeInBlockForComparison: 200,
+  lineFolding: true
 };
 
 const genericTemplatesPath = 'generic';
@@ -70,6 +72,7 @@ export default class LineByLineRenderer {
       file: file,
       fileHtmlId: renderUtils.getHtmlId(file),
       diffs: diffs,
+      diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
       filePath: filePathTemplate.render(
         {
           fileDiffName: renderUtils.filenameDiff(file),
@@ -96,11 +99,13 @@ export default class LineByLineRenderer {
 
     return file.blocks
       .map(block => {
-        let lines = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
-          CSSLineClass: renderUtils.CSSLineClass,
-          blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
-          lineClass: 'd2h-code-linenumber',
-          contentClass: 'd2h-code-line',
+        let lines = this.hoganUtils.render(genericTemplatesPath, 'line', {
+          lineContent: this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+            CSSLineClass: renderUtils.CSSLineClass,
+            blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
+            lineClass: 'd2h-code-linenumber',
+            contentClass: 'd2h-code-line',
+          })
         });
 
         this.applyLineGroupping(block).forEach(([contextLines, oldLines, newLines]) => {
@@ -113,13 +118,15 @@ export default class LineByLineRenderer {
           } else if (contextLines.length) {
             contextLines.forEach(line => {
               const { prefix, content } = renderUtils.deconstructLine(line.content, file.isCombined);
-              lines += this.generateSingleLineHtml(file, {
-                type: renderUtils.CSSLineClass.CONTEXT,
-                prefix: prefix,
-                content: content,
-                oldNumber: line.oldNumber,
-                newNumber: line.newNumber,
-              });
+              lines += this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleLineHtml(file, {
+                  type: renderUtils.CSSLineClass.CONTEXT,
+                  prefix: prefix,
+                  content: content,
+                  oldNumber: line.oldNumber,
+                  newNumber: line.newNumber,
+                })
+              })
             });
           } else if (oldLines.length || newLines.length) {
             const { left, right } = this.processChangedLines(file, file.isCombined, oldLines, newLines);
@@ -253,8 +260,12 @@ export default class LineByLineRenderer {
 
   generateLineHtml(file: DiffFile, oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
     return {
-      left: this.generateSingleLineHtml(file, oldLine),
-      right: this.generateSingleLineHtml(file, newLine),
+      left: this.hoganUtils.render(genericTemplatesPath, 'line', {
+        lineContent: this.generateSingleLineHtml(file, oldLine)
+      }),
+      right: this.hoganUtils.render(genericTemplatesPath, 'line', {
+        lineContent: this.generateSingleLineHtml(file, newLine),
+      })
     };
   }
 
@@ -265,8 +276,8 @@ export default class LineByLineRenderer {
       oldNumber: line.oldNumber || '',
       newNumber: line.newNumber || '',
     });
-
-    return this.hoganUtils.render(genericTemplatesPath, 'line', {
+    
+    return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
       type: line.type,
       lineClass: 'd2h-code-linenumber',
       contentClass: 'd2h-code-line',

src/render-utils.ts

@@ -46,6 +46,7 @@ export interface RenderConfig {
   maxLineLengthHighlight?: number;
   diffStyle?: DiffStyleType;
   colorScheme?: ColorSchemeType;
+  lineFolding?: boolean;
 }
 
 export const defaultRenderConfig = {

src/side-by-side-renderer.ts

@@ -16,13 +16,15 @@ export interface SideBySideRendererConfig extends renderUtils.RenderConfig {
   renderNothingWhenEmpty?: boolean;
   matchingMaxComparisons?: number;
   maxLineSizeInBlockForComparison?: number;
+  lineFolding?: boolean;
 }
 
 export const defaultSideBySideRendererConfig = {
   ...renderUtils.defaultRenderConfig,
   renderNothingWhenEmpty: false,
   matchingMaxComparisons: 2500,
   maxLineSizeInBlockForComparison: 200,
+  lineFolding: true
 };
 
 const genericTemplatesPath = 'generic';
@@ -65,11 +67,12 @@ export default class SideBySideRenderer {
     const filePathTemplate = this.hoganUtils.template(genericTemplatesPath, 'file-path');
     const fileIconTemplate = this.hoganUtils.template(iconsBaseTemplatesPath, 'file');
     const fileTagTemplate = this.hoganUtils.template(tagsBaseTemplatesPath, renderUtils.getFileIcon(file));
-
+    debugger;
     return fileDiffTemplate.render({
       file: file,
       fileHtmlId: renderUtils.getHtmlId(file),
       diffs: diffs,
+      diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
       filePath: filePathTemplate.render(
         {
           fileDiffName: renderUtils.filenameDiff(file),
@@ -207,12 +210,28 @@ export default class SideBySideRenderer {
   }
 
   makeHeaderHtml(blockHeader: string, file?: DiffFile): string {
-    return this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+    const lineFolding = this.config.lineFolding;
+    let headerContent = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
       CSSLineClass: renderUtils.CSSLineClass,
       blockHeader: file?.isTooBig ? blockHeader : renderUtils.escapeForHtml(blockHeader),
       lineClass: 'd2h-code-side-linenumber',
       contentClass: 'd2h-code-side-line',
     });
+    if(blockHeader.length !== 0) {
+      if(lineFolding) {
+        headerContent += this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+          CSSLineClass: renderUtils.CSSLineClass,
+          blockHeader: "",
+          lineClass: 'd2h-code-side-linenumber',
+          contentClass: 'd2h-code-side-line',
+        });
+      } 
+      return this.hoganUtils.render(genericTemplatesPath, 'line', {
+        lineContent: headerContent
+      });
+    } else {
+      return blockHeader;
+    }
   }
 
   processChangedLines(isCombined: boolean, oldLines: DiffLine[], newLines: DiffLine[]): FileHtml {
@@ -274,17 +293,31 @@ export default class SideBySideRenderer {
   }
 
   generateLineHtml(oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
-    return {
-      left: this.generateSingleHtml(oldLine),
-      right: this.generateSingleHtml(newLine),
-    };
+    const lineFolding = this.config.lineFolding;
+    if(lineFolding) {
+      return {
+        left: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(oldLine) + this.generateSingleHtml(newLine)
+              }),
+        right: ''
+      };
+    } else {
+      return {
+        left: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(oldLine)
+              }),
+        right: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(newLine),
+              })
+      };
+    }
   }
 
   generateSingleHtml(line?: DiffPreparedLine): string {
     const lineClass = 'd2h-code-side-linenumber';
     const contentClass = 'd2h-code-side-line';
 
-    return this.hoganUtils.render(genericTemplatesPath, 'line', {
+    return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
       type: line?.type || `${renderUtils.CSSLineClass.CONTEXT} d2h-emptyplaceholder`,
       lineClass: line !== undefined ? lineClass : `${lineClass} d2h-code-side-emptyplaceholder`,
       contentClass: line !== undefined ? contentClass : `${contentClass} d2h-code-side-emptyplaceholder`,

src/templates/generic-block-header.mustache

@@ -1,6 +1,5 @@
-<tr>
-    <td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
-    <td class="{{CSSLineClass.INFO}}">
-        <div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
-    </td>
-</tr>
+<td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
+<td class="{{CSSLineClass.INFO}}">
+    <div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
+</td>
+

src/templates/generic-line-content.mustache

@@ -0,0 +1,19 @@
+<td class="{{lineClass}} {{type}}">
+    {{{lineNumber}}}
+</td>
+<td class="{{type}}">
+    <div class="{{contentClass}}">
+    {{#prefix}}
+        <span class="d2h-code-line-prefix">{{{prefix}}}</span>
+    {{/prefix}}
+    {{^prefix}}
+        <span class="d2h-code-line-prefix">&nbsp;</span>
+    {{/prefix}}
+    {{#content}}
+        <span class="d2h-code-line-ctn">{{{content}}}</span>
+    {{/content}}
+    {{^content}}
+        <span class="d2h-code-line-ctn"><br></span>
+    {{/content}}
+    </div>
+</td>

src/templates/generic-line.mustache

@@ -1,21 +1,5 @@
+{{#lineContent}}
 <tr>
-    <td class="{{lineClass}} {{type}}">
-      {{{lineNumber}}}
-    </td>
-    <td class="{{type}}">
-        <div class="{{contentClass}}">
-        {{#prefix}}
-            <span class="d2h-code-line-prefix">{{{prefix}}}</span>
-        {{/prefix}}
-        {{^prefix}}
-            <span class="d2h-code-line-prefix">&nbsp;</span>
-        {{/prefix}}
-        {{#content}}
-            <span class="d2h-code-line-ctn">{{{content}}}</span>
-        {{/content}}
-        {{^content}}
-            <span class="d2h-code-line-ctn"><br></span>
-        {{/content}}
-        </div>
-    </td>
+    {{{lineContent}}}
 </tr>
+{{/lineContent}}

src/templates/line-by-line-file-diff.mustache

@@ -2,7 +2,7 @@
     <div class="d2h-file-header">
     {{{filePath}}}
     </div>
-    <div class="d2h-file-diff">
+    <div class="d2h-file-diff {{diffClass}}">
         <div class="d2h-code-wrapper">
             <table class="d2h-diff-table">
                 <tbody class="d2h-diff-tbody">

src/templates/side-by-side-file-diff.mustache

@@ -2,7 +2,7 @@
     <div class="d2h-file-header">
       {{{filePath}}}
     </div>
-    <div class="d2h-files-diff">
+    <div class="d2h-files-diff {{diffClass}}">
         <div class="d2h-file-side-diff">
             <div class="d2h-code-wrapper">
                 <table class="d2h-diff-table">
@@ -12,6 +12,7 @@
                 </table>
             </div>
         </div>
+        {{#diffs.right}}
         <div class="d2h-file-side-diff">
             <div class="d2h-code-wrapper">
                 <table class="d2h-diff-table">
@@ -21,5 +22,6 @@
                 </table>
             </div>
         </div>
+        {{/diffs.right}}
     </div>
 </div>

src/ui/css/diff2html.css

@@ -194,7 +194,8 @@
   display: inline-block;
   overflow-x: scroll;
   overflow-y: hidden;
-  width: 50%;
+  /* width: 50%; */
+  flex-basis: 100%;
 }
 
 .d2h-code-line {
@@ -216,14 +217,15 @@
 }
 
 .d2h-code-line-ctn {
-  display: inline-block;
+  display: inline;
   background: none;
   padding: 0;
   word-wrap: normal;
   white-space: pre;
   user-select: text;
   width: 100%;
   vertical-align: middle;
+
 }
 
 .d2h-code-line del,
@@ -283,6 +285,7 @@
   border: solid var(--d2h-line-border-color);
   border-width: 0 1px 0 1px;
   cursor: pointer;
+  height: 100%;
 }
 
 .d2h-code-linenumber:after {
@@ -599,6 +602,34 @@
   border: var(--d2h-dark-moved-label-color) 1px solid;
 }
 
+/* line folding */
+
+.d2h-wrapped-file-diff .d2h-code-line-ctn {
+  white-space: break-spaces;
+  word-break: break-word;
+}
+
+.d2h-wrapped-file-diff .d2h-code-side-line {
+  width: auto;
+}
+
+.d2h-wrapped-file-diff .d2h-info .d2h-code-side-line {
+  white-space: break-spaces;
+}
+
+.d2h-wrapped-file-diff tr {
+  position: relative;
+}
+
+.d2h-wrapped-file-diff tr .d2h-code-side-linenumber {
+  height: 100%;
+}
+
+.d2h-wrapped-file-diff .d2h-file-side-diff tr .d2h-cntx:nth-child(2), .d2h-wrapped-file-diff .d2h-file-side-diff tr .d2h-cntx:nth-child(4) {
+  width: 50%;
+}
+
+
 /**
  * Auto Mode Colors
  */

website/templates/pages/demo/content.handlebars

@@ -52,6 +52,12 @@
           </select>
         </label>
       </div>
+      <div class="column is-one-sixth-widescreen">
+        <label title="Show the file list summary before the diff">
+          <p>Line Folding</p>
+          <input class="options-label-value" id="diff-url-options-line-folding" type="checkbox" name="drawFileList"/>
+        </label>
+      </div>
       <div class="column is-one-sixth-widescreen">
         <label title="Show the file list summary before the diff">
           <p>File Summary</p>