added indent lines

Author: Andcool-Systems

src/json_parser/parser.service.ts

@@ -3,6 +3,13 @@ import { Injectable } from '@nestjs/common';
 type AnyObject = Record<string, any>;
 const brackets_colors = ['#ffd700', '#da70d6', '#179fff'];
 
+export type ObjectStructureInfo = {
+    key: string;
+    startLine: number;
+    endLine: number;
+    depth: number;
+};
+
 @Injectable()
 export class ParserService {
     parse(
@@ -33,6 +40,7 @@ export class ParserService {
                 depth :
                 depth - (Math.floor(depth / brackets_colors.length) * brackets_colors.length)
         ];
+
         if (currentIndent === 0) {
             return (
                 `<tspan x="0" dy="0" style="fill: ${bracket_color};">{</tspan>\n` +
@@ -47,4 +55,31 @@ export class ParserService {
             `<tspan x="${currentIndent}" dy="19"><tspan style="fill: ${bracket_color};">}</tspan>`
         );
     }
-}
+
+    analyzeObjectStructureFlat(
+        obj: any,
+        lineIndex: { current: number } = { current: 2 },
+        depth: number = 0
+    ): ObjectStructureInfo[] {
+        if (typeof obj !== 'object' || obj === null) {
+            return [];
+        }
+
+        const result: ObjectStructureInfo[] = [];
+        const keys = Object.keys(obj);
+
+        for (const key of keys) {
+            const startLine = lineIndex.current++;
+
+            if (typeof obj[key] === 'object' && obj[key] !== null) {
+                result.push({ key, startLine, endLine: 0, depth });
+                const children = this.analyzeObjectStructureFlat(obj[key], lineIndex, depth + 1);
+                result.push(...children);
+                const endLine = lineIndex.current++;
+                result.find(item => item.key === key && item.startLine === startLine)!.endLine = endLine;
+            }
+        }
+
+        return result;
+    }
+}

src/widget/views/index.hbs

@@ -20,12 +20,12 @@
         }
 
         .main_text {
-            transform: translateX(50px);
+            transform: translateX(38px);
         }
     </style>
     <rect width="800" height="{{ height_ }}" style="fill: #1e1e1e;" />
     <rect width="693" height="40" x="107" style="fill: #252526;" />
-    <rect width="1" height="{{ height }}" x="40" y="40" style="fill: #404040;" />
+    <rect width="1" height="{{ height_main_line }}" x="40" y="65" style="fill: #404040;" />
 
     <text y="60" font-family="Consolas, monospace" class="indexes">
         {{{indexes}}}
@@ -36,4 +36,8 @@
     <text y="60" font-family="Consolas, monospace" class="main_text">
         {{{json}}}
     </text>
+
+    <g style="transform: translate(70px, 45px);">
+        {{{indents}}}
+    </g>
 </svg>

src/widget/widget.controller.ts

@@ -16,15 +16,17 @@ export class WidgetController {
     ) {
         const content = await this.widgetService.generate();
 
-        const lines_count = content.split('\n').length;
+        const lines_count = content.main.split('\n').length;
         const indexes = this.widgetService.generate_indexes(lines_count);
 
         res.header('Content-Type', 'image/svg+xml');
         return {
-            json: content,
+            json: content.main,
             indexes: indexes,
+            indents: content.indents,
             height: 52 + (lines_count * 19),
-            height_: 60 + (lines_count * 19)
+            height_: 60 + (lines_count * 19),
+            height_main_line: (lines_count - 2) * 19
         };
     }
 

src/widget/widget.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import { APIService } from 'src/apis/apis.service';
-import { ParserService } from 'src/json_parser/parser.service';
+import { ObjectStructureInfo, ParserService } from 'src/json_parser/parser.service';
 
 
 @Injectable()
@@ -28,15 +28,6 @@ export class WidgetService {
         });
     }
 
-    generate_indexes(count: number) {
-        const array = [];
-        for (let index = 1; index <= count; index++) {
-            array.push(`<tspan x="${index < 10 ? '9' : '0'}" dy="${index === 1 ? '0' : '19'}">${index}</tspan>`);
-        }
-
-        return array.join('\n');
-    }
-
     getTimeDiff(start: Date) {
         const now = Date.now();
         const diff_millis = now - start.getTime();
@@ -118,10 +109,36 @@ export class WidgetService {
                 message: (e.message ?? "Unknown error. See server console.").slice(0, 60) + (!!e.message && e.message.length > 60 ? '...' : '')
             }
         }
-        return this.parserService.parse(json, 30);
+
+        const indents = this.parserService.analyzeObjectStructureFlat(json);
+        return {
+            main: this.parserService.parse(json, 30),
+            indents: this.generateIndentLines(indents, 30)
+        };
     }
 
     async generateUser(obj: any) {
         return this.parserService.parse(obj, 30);
     }
+
+    generate_indexes(count: number) {
+        const array = [];
+        for (let index = 1; index <= count; index++) {
+            array.push(`<tspan x="${index < 10 ? '9' : '0'}" dy="${index === 1 ? '0' : '19'}">${index}</tspan>`);
+        }
+
+        return array.join('\n');
+    }
+
+    generateIndentLines(indents: ObjectStructureInfo[], indent_width: number) {
+        const array = [];
+        for (const indent of indents) {
+            array.push(
+                `<rect fill="#404040" x="${indent.depth * indent_width}" ` +
+                `y="${indent.startLine * 19}" width="1" height="${((indent.endLine - indent.startLine) - 1) * 19}" />`
+            );
+        }
+
+        return array.join('\n');
+    }
 }