Merge pull request #108 from ArthurLobopro/feat-new-resize

Feat new resize

Author: ArthurLobopro

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.25.0
+
+Feat: Window Container can be resized
+
 ## 1.24.0
 
 Feat: You can remove any line highlight using `Ctrl` + Click on line number

package.json

@@ -2,7 +2,7 @@
   "name": "easy-codesnap",
   "displayName": "Easy CodeSnap",
   "description": "Take beautiful screenshots of your code 📷",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "l10n": "./l10n",
   "repository": {
     "type": "git",

src/webview/ui/elements.ts

@@ -31,6 +31,7 @@ export const windowNode = $("#window");
 export const snippetContainerNode = $("#snippet-container");
 export const flashFx = $("#flash-fx");
 export const watermarkElement = $("#watermark");
+export const targetProportion = $("#target-proportion");
 
 //One time config elements
 export const showWindowTitleInput = getToggle("showWindowTitle");

src/webview/ui/listeners/index.ts

@@ -1,6 +1,6 @@
 import { SessionConfig } from "../../SessionConfig";
-import { windowNode } from "../elements";
-import { UpdateRatio } from "../updaters";
+import { snippetContainerNode, windowNode } from "../elements";
+import { UpdateRatio, UpdateTargetProportion } from "../updaters";
 import { addButtonListeners } from "./addButtonListeners";
 import { addContentEditableListeners } from "./addContentEditableListeners";
 import { addHideOneTimeConfigListener } from "./addHideOneTimeConfigListener";
@@ -22,8 +22,11 @@ export function addListeners() {
         if (SessionConfig.get("aspectRatio") !== "none") {
             UpdateRatio();
         }
+
+        UpdateTargetProportion();
         console.log("Resize");
     });
 
+    resizeObserver.observe(snippetContainerNode);
     resizeObserver.observe(windowNode);
 }

src/webview/ui/updaters/VarUpdater.ts

@@ -1,6 +1,7 @@
 import { SessionConfig } from "../../SessionConfig";
 import { px, setVar } from "../../util";
 import { Updater } from "../Updater";
+import { snippetContainerNode } from "../elements";
 
 export class VarUpdater extends Updater {
     constructor() {
@@ -15,6 +16,7 @@ export class VarUpdater extends Updater {
             "roundingLevel",
             "showLineNumbers",
             "letterSpacing",
+            "target",
         ]);
     }
 
@@ -30,6 +32,7 @@ export class VarUpdater extends Updater {
             roundingLevel,
             showLineNumbers,
             letterSpacing,
+            target,
         } = SessionConfig.get();
 
         setVar("ligatures", fontLigatures ? "normal" : "none");
@@ -50,7 +53,9 @@ export class VarUpdater extends Updater {
             roundedCorners ? px(4 * roundingLevel) : "0",
         );
 
-        setVar("enable-resizing", enableResizing ? "horizontal" : "none");
         setVar("line-number-visibility", showLineNumbers ? "block" : "none");
+
+        snippetContainerNode.dataset.enableresizing = String(enableResizing);
+        snippetContainerNode.dataset.target = target;
     }
 }

src/webview/ui/updaters/VisibilityUpdater.ts

@@ -10,6 +10,7 @@ import {
     saveScaleSelect,
     shutterActionSelect,
     snippetContainerNode,
+    targetProportion,
     targetSelect,
     windowControlsNode,
     windowNode,
@@ -24,6 +25,7 @@ export class VisibilityUpdater extends Updater {
             "aspectRatio",
             "highlightLineNumber",
             "enableResizing",
+            "target",
         ]);
     }
 
@@ -49,8 +51,11 @@ export class VisibilityUpdater extends Updater {
 
         if (!enableResizing) {
             windowNode.style.width = "";
+            snippetContainerNode.style.width = "";
         }
 
+        UpdateTargetProportion();
+
         const selects = [
             targetSelect,
             shutterActionSelect,
@@ -77,6 +82,18 @@ export class VisibilityUpdater extends Updater {
     }
 }
 
+export function UpdateTargetProportion() {
+    const target = SessionConfig.get("target");
+
+    if (target === "container") {
+        const { width, height } = snippetContainerNode.getBoundingClientRect();
+        targetProportion.innerText = `${width.toFixed(0)} x ${height.toFixed(0)}`;
+    } else {
+        const { width, height } = windowNode.getBoundingClientRect();
+        targetProportion.innerText = `${width.toFixed(0)} x ${height.toFixed(0)}`;
+    }
+}
+
 export function UpdateRatio(
     aspectRatio: WebviewConfig["aspectRatio"] = SessionConfig.get(
         "aspectRatio",

webview/index.html

@@ -324,28 +324,31 @@
     <span class="tooltip-text">Take Snap</span>
   </div>
 
-  <div id="snippet-scroll">
-    <div id="snippet-container">
-      <div id="window" data-style="macos">
-        <div id="watermark"></div>
-        <div id="navbar">
-          <div id="window-controls">
-            <div class="red dot"></div>
-            <div class="yellow dot"></div>
-            <div class="green dot"></div>
-            <div class="button">
-              <insert-svg src="./assets/windows/minimize.svg"></insert-svg>
-            </div>
-            <div class="button">
-              <insert-svg src="./assets/windows/maximize.svg"></insert-svg>
-            </div>
-            <div class="button">
-              <insert-svg src="./assets/windows/close.svg"></insert-svg>
+  <div>
+    <div id="target-proportion"></div>
+    <div id="snippet-scroll">
+      <div id="snippet-container">
+        <div id="window" data-style="macos">
+          <div id="watermark"></div>
+          <div id="navbar">
+            <div id="window-controls">
+              <div class="red dot"></div>
+              <div class="yellow dot"></div>
+              <div class="green dot"></div>
+              <div class="button">
+                <insert-svg src="./assets/windows/minimize.svg"></insert-svg>
+              </div>
+              <div class="button">
+                <insert-svg src="./assets/windows/maximize.svg"></insert-svg>
+              </div>
+              <div class="button">
+                <insert-svg src="./assets/windows/close.svg"></insert-svg>
+              </div>
             </div>
+            <div id="window-title"></div>
           </div>
-          <div id="window-title"></div>
+          <div id="snippet"></div>
         </div>
-        <div id="snippet"></div>
       </div>
     </div>
   </div>

webview/styles/original-style.css

@@ -6,10 +6,9 @@ html {
     --box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
     --container-padding: 3em;
     --window-border-radius: 4px;
-    --enable-resizing: horizontal;
     --letter-spacing: 0px;
     --zoom: 100%;
-    
+
     box-sizing: border-box;
 }
 
@@ -28,21 +27,48 @@ code {
     color: currentColor;
 }
 
+div:has(#snippet-scroll) {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    max-width: 100%;
+    gap: 4px;
+}
+
 #snippet-scroll {
     max-width: 100%;
     overflow-x: auto;
     margin: auto;
     zoom: var(--zoom);
 }
 
+#target-proportion {
+    color: var(--vscode-foreground);
+    background-color: var(--vscode-sideBar-background);
+    padding: 4px;
+    border-radius: 6px 4px;
+}
+
 #snippet-container {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: var(--container-padding);
     background: var(--container-background-color);
-    width: max-content;
+    min-width: max-content;
+    min-height: max-content;
     box-sizing: border-box;
+
+    &[data-enableresizing="true"] {
+        &:is([data-target="container"]) {
+            overflow: hidden;
+            resize: both;
+        }
+
+        #window {
+            resize: horizontal;
+        }
+    }
 }
 
 #window {
@@ -51,7 +77,6 @@ code {
     border-radius: var(--window-border-radius);
     box-shadow: var(--box-shadow);
     overflow: hidden;
-    resize: var(--enable-resizing);
     width: max-content;
     min-width: 100px;
     padding: 18px;