add bezier curves

Author: jpoly1219

core/codeRenderer/CodeRenderer.ts

@@ -214,6 +214,7 @@ export class CodeRenderer {
       fontSize,
       fontFamily,
       lineHeight,
+      dimensions,
     );
     const backgroundColor = this.getBackgroundColor(highlightedCodeHtml);
 
@@ -231,7 +232,7 @@ export class CodeRenderer {
     ${guts}
   </g>
 </svg>`;
-    // console.log(svg);
+    console.log(svg);
 
     return Buffer.from(svg, "utf8");
   }
@@ -241,6 +242,7 @@ export class CodeRenderer {
     fontSize: number,
     fontFamily: string,
     lineHeight: number,
+    dimensions: Dimensions,
   ): { guts: string; lineBackgrounds: string } {
     const dom = new JSDOM(shikiHtml);
     const document = dom.window.document;
@@ -295,7 +297,25 @@ export class CodeRenderer {
         // By default SVGs have anti-aliasing on.
         // This is undesirable in our case because pixel-perfect alignment of these rectangles will introduce thin gaps.
         // Turning it off with 'shape-rendering="crispEdges"' solves the issue.
-        return `<rect x="0" y="${y}" rx="${topRadius} ${topRadius} ${bottomRadius} ${bottomRadius}" width="100%" height="${lineHeight}" fill="${bgColor}" shape-rendering="crispEdges" />`;
+        return isFirst
+          ? `<path d="M ${0} ${y + lineHeight} 
+           L ${0} ${y + 10} 
+           Q ${0} ${y} ${10} ${y} 
+           L ${dimensions.width - 10} ${y} 
+           Q ${dimensions.width} ${y} ${dimensions.width} ${y + 10} 
+           L ${dimensions.width} ${y + lineHeight}  
+           Z" 
+        fill="${bgColor}" />`
+          : isLast
+            ? `<path d="M ${0} ${y} 
+           L ${0} ${y + lineHeight - 10} 
+           Q ${0} ${y + lineHeight} ${10} ${y + lineHeight} 
+           L ${dimensions.width - 10} ${y + lineHeight} 
+           Q ${dimensions.width} ${y + lineHeight} ${dimensions.width} ${y + lineHeight - 10} 
+           L ${dimensions.width} ${y}  
+           Z" 
+        fill="${bgColor}" />`
+            : `<rect x="0" y="${y}" rx="10" ry="10" width="100%" height="${lineHeight}" fill="${bgColor}" shape-rendering="crispEdges" />`;
       })
       .join("\n");
 

extensions/vscode/src/activation/NextEditWindowManager.ts

@@ -36,9 +36,13 @@ const SVG_CONFIG = {
   //   "drop-shadow(0 2px 4px rgb(112, 114, 209)) drop-shadow(0 4px 8px rgb(136, 194, 163)) drop-shadow(0 6px 12px rgb(107, 166, 205));",
   // filter:
   //   "drop-shadow(0 3px 6px rgba(112, 114, 209, 0.4)) drop-shadow(0 3px 6px rgba(136, 194, 163, 0.4)) drop-shadow(0 3px 6px rgba(107, 166, 205, 0.4));",
+  // filter: `drop-shadow(4px 4px 0px rgba(112, 114, 209, 0.4))
+  //       drop-shadow(8px 8px 0px rgba(107, 166, 205, 0.3))
+  //       drop-shadow(12px 12px 0px rgba(136, 194, 163, 0.2));`,
   filter: `drop-shadow(4px 4px 0px rgba(112, 114, 209, 0.4))
-        drop-shadow(8px 8px 0px rgba(107, 166, 205, 0.3))
-        drop-shadow(12px 12px 0px rgba(136, 194, 163, 0.2));`,
+        drop-shadow(-2px 4px 0px rgba(107, 166, 205, 0.3))
+        drop-shadow(4px -2px 0px rgba(136, 194, 163, 0.2))
+        drop-shadow(-2px -2px 0px rgba(112, 114, 209, 0.2));`,
   radius: 3,
   leftMargin: 40,
   defaultText: "",