able to render screen's width and height in console

Author: krisfragata

package-lock.json

@@ -65,13 +65,17 @@
     "@typescript-eslint/parser": "^6.19.1",
     "@vscode/test-cli": "^0.0.4",
     "@vscode/test-electron": "^2.3.9",
+    "autoprefixer": "^10.4.17",
     "d3": "^7.8.5",
     "eslint": "^8.56.0",
     "fs": "^0.0.1-security",
     "mini-css-extract-plugin": "^2.8.0",
     "path": "^0.12.7",
+    "postcss": "^8.4.35",
+    "postcss-loader": "^8.1.0",
     "svelte": "^4.2.10",
     "svelte-loader": "^3.1.9",
+    "tailwindcss": "^3.4.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
     "webpack": "^5.90.0",

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+};

postcss.config.js

@@ -1,10 +1,21 @@
 <script>
-    import { onMount } from "svelte";
-    import Tree from "./Tree.svelte";
+  import { onMount } from "svelte";
+  import Tree from "./Tree.svelte";
+  import TreeWrapper from "./TreeWrapper.svelte";
 
     let componentStructure = [];
 
+
     onMount(() => {
+      let width = 2000;
+      let height = 2000;
+      window.addEventListener('resize', (e)=> {
+        width = document.querySelector('.tree-wrapper').offsetWidth;
+        height = document.querySelector('.tree-wrapper').offsetHeight;
+        console.log('width: ',width);
+        console.log('height: ', height);
+      })
+
       window.addEventListener("message", (event) => {
         const structure = event.data;
         switch(structure.type){
@@ -20,14 +31,16 @@
   <main>
     <!-- <div class="background"> -->
       <h1>See your component structure below!</h1>
-      {#if componentStructure.length > 0}
-        <Tree {componentStructure}/>
-      {/if}
+      <TreeWrapper>
+        {#if componentStructure.length > 0}
+          <Tree {componentStructure}/>
+        {/if}
+      </TreeWrapper>
+    
     <!-- </div> -->
   </main>
 
   <style>
-
     h1 {
       color: #e3ae52;
       text-align: center;

src/components/Sidebar.svelte

@@ -3,6 +3,10 @@
   import * as d3 from "d3";
 
   export let componentStructure;
+  export let width;
+  // export let height;
+  // export let mounted;
+
   // let containerHeight = 0;
   // let containerWidth = 0;
   // document.addEventListener("DOMContentLoaded", () => {
@@ -11,14 +15,10 @@
   //   console.log("container: ", containerWidth);
   // });
 
-  onMount(() => {
-    let height = 2000;
-    let width = 2000;
-
-    let containerWidth = document.getElementById("tree-container").offsetWidth;
-    let containerHeight =
-      document.getElementById("tree-container").offsetHeight;
-
+  onMount(() => {  
+    let containerWidth = 2500;
+    let containerHeight = 2000;
+    console.log('width', width);
     let window = d3
       .select("#tree-container")
       .append("svg")
@@ -30,7 +30,7 @@
     const root = d3.hierarchy(componentStructure[0]);
 
     // console.log('root test', root.data);
-    const tree = d3.tree().size([containerHeight / 4, containerWidth / 4]);
+    const tree = d3.tree().size([containerWidth / 4, containerHeight / 4]);
 
     const treeDataTransformed = tree(root);
 
@@ -60,7 +60,7 @@
         return d.data.name;
       })
       .style("fill", "antiquewhite")
-      .attr("dy", "2em") // Move text down
+      .attr("dx", "3em") // Move text down
       .attr("text-anchor", "middle");
 
     let diagonal = d3
@@ -84,8 +84,5 @@
 <div id="tree-container"></div>
 
 <style>
-  #tree-container {
-    width: 100%;
-    height: 100%;
-  }
+ 
 </style>

src/components/Tree.svelte

@@ -0,0 +1,7 @@
+<section>
+  <div class="tree-wrapper">
+    <slot/>
+  </div>
+</section>
+
+

src/components/TreeWrapper.svelte

@@ -30,8 +30,8 @@ export function activate(context: vscode.ExtensionContext) {
 
   context.subscriptions.push(
     vscode.commands.registerCommand('svisualize.sendUri', async () => {
-      const folders = vscode.workspace.workspaceFolders;
-      const rootPath = folders[0].uri.fsPath;
+      const folders = await vscode.workspace.workspaceFolders;
+      const rootPath = folders[0].uri.fsPath ;
       const result = await parseFile(rootPath);
       console.log(result);
       //we are sending a message containing result which is our final componentStructure to Svelte
@@ -41,6 +41,21 @@ export function activate(context: vscode.ExtensionContext) {
       });
     })
   );
+
+//   // Listen for changes in the webview's view state (e.g., when it's resized)
+//   sidebarProvider._view?.webview.onDidChangeViewState(event => {
+//   const newPanelViewState = event.webviewPanel.visible;
+//   if (newPanelViewState) {
+//       // The webview is now visible, resize it as needed
+//       const panelWidth = panel.webviewView.visibleColumn * vscode.window.activeTextEditor!.options.fontInfo.typicalHalfwidthCharacterWidth;
+//       const panelHeight = panel.webviewView.visibleRows * vscode.window.activeTextEditor!.options.fontInfo.lineHeight;
+//       resizePanel(panelWidth, panelHeight);
+//   }
+// });
+
+    //function that resizes panel
+ 
+
 }
 
 //declare a function that renders webview content. render an html file

src/extension.ts

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

tailwind.config.js

@@ -62,7 +62,7 @@ const extensionConfig = {
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'style-loader', 'postcss-loader'],
       },
     ],
   },