Merge pull request #109 from ArthurLobopro/feat-limit-line-size

Feat limit line size

Author: ArthurLobopro

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.26.0
+
+Feat: Maximum line width based on characters
+
 ## 1.25.0
 
 Feat: Window Container can be resized

package.json

@@ -2,7 +2,7 @@
   "name": "easy-codesnap",
   "displayName": "Easy CodeSnap",
   "description": "Take beautiful screenshots of your code 📷",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "l10n": "./l10n",
   "repository": {
     "type": "git",
@@ -267,6 +267,14 @@
             "top-right",
             "top-left"
           ]
+        },
+        "easy-codesnap.maxCharWidth": {
+          "order": 25,
+          "scope": "resource",
+          "type": "integer",
+          "default": 0,
+          "minimum": 0,
+          "description": "%easy-codesnap.maxCharWidth%"
         }
       }
     }

package.nls.json

@@ -26,5 +26,6 @@
     "easy-codesnap.fullLinesSelection": "Does get full line selection when open snap scren",
     "easy-codesnap.watermark": "Enable watermark",
     "easy-codesnap.defaultWatermarkText": "Default watermark text",
-    "easy-codesnap.watermarkPosition": "Watermark position on screen"
+    "easy-codesnap.watermarkPosition": "Watermark position on screen",
+    "easy-codesnap.maxCharWidth": "Maximum line width based on characters. Use value 0 for no limit"
 }

package.nls.pt-br.json

@@ -26,5 +26,6 @@
     "easy-codesnap.fullLinesSelection": "Selecionar o texto completo de todas as linhas quando abrir a tela de Snap",
     "easy-codesnap.watermark": "Mostrar marca d'água",
     "easy-codesnap.defaultWatermarkText": "Texto padrão da marca d'água",
-    "easy-codesnap.watermarkPosition": "Posição da marca d'água"
+    "easy-codesnap.watermarkPosition": "Posição da marca d'água",
+    "easy-codesnap.maxCharWidth": "Tamanho máximo da linha baseado em caracteres. Use o valor 0 para não limitar"
 }

src/commands/snap/index.ts

@@ -41,7 +41,10 @@ export class SnapCommand extends Command {
 
         activeEditor.selection = new vscode.Selection(
             new vscode.Position(selection.start.line, 0),
-            selection.isReversed ? selection.anchor : selection.active,
+            new vscode.Position(
+                selection.end.line,
+                activeEditor.document.lineAt(selection.end.line).text.length,
+            ),
         );
     }
 }

src/constants.ts

@@ -30,4 +30,5 @@ export const extensionSettingsNames: ConfigKey[] = [
     "watermark",
     "defaultWatermarkText",
     "watermarkPosition",
+    "maxCharWidth",
 ] as const;

src/types.d.ts

@@ -18,6 +18,8 @@ export interface ExtensionConfig {
     highlightLineNumber: boolean;
     watermark: boolean;
 
+    maxCharWidth: number;
+
     saveScale: 0.5 | 0.75 | 1 | 1.5 | 2 | 3 | 4;
     roundingLevel: 1 | 2 | 3 | 4;
     saveFormat: "png" | "svg";

src/webview/ui/updaters/VarUpdater.ts

@@ -17,6 +17,7 @@ export class VarUpdater extends Updater {
             "showLineNumbers",
             "letterSpacing",
             "target",
+            "maxCharWidth",
         ]);
     }
 
@@ -33,6 +34,7 @@ export class VarUpdater extends Updater {
             showLineNumbers,
             letterSpacing,
             target,
+            maxCharWidth,
         } = SessionConfig.get();
 
         setVar("ligatures", fontLigatures ? "normal" : "none");
@@ -55,6 +57,11 @@ export class VarUpdater extends Updater {
 
         setVar("line-number-visibility", showLineNumbers ? "block" : "none");
 
+        setVar(
+            "max-char-width",
+            maxCharWidth === 0 ? "100%" : `${maxCharWidth.toFixed(0)}ch`,
+        );
+
         snippetContainerNode.dataset.enableresizing = String(enableResizing);
         snippetContainerNode.dataset.target = target;
     }

webview/styles/original-style.css

@@ -8,6 +8,7 @@ html {
     --window-border-radius: 4px;
     --letter-spacing: 0px;
     --zoom: 100%;
+    --max-char-width: 100%
 
     box-sizing: border-box;
 }
@@ -82,6 +83,10 @@ div:has(#snippet-scroll) {
     padding: 18px;
     background-color: var(--vscode-editor-background);
     box-sizing: border-box;
+
+    * {
+        box-sizing: border-box;
+    }
 }
 
 #snippet {
@@ -114,6 +119,18 @@ div:has(#snippet-scroll) {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
+
+    >span {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        max-width: var(--max-char-width);
+
+        >span {
+            white-space: pre;
+            width: max-content;
+        }
+    }
 }
 
 #save-container {