Fix drawReactangle to ivert y-axis by using transformation instead of…

apps/web/test30.html

@@ -72,6 +72,28 @@
         });
       }
 
+      const drawGrid = (page) => {
+        const n = 100
+        Array(parseInt(page.getHeight() / n))
+          .fill(1)
+          .map((v, i) => {
+            page.drawLine({
+              start: { x: 0, y: i * n },
+              end: { x: page.getWidth(), y: i * n },
+            });
+          });
+        Array(parseInt(page.getWidth() / n))
+          .fill(1)
+          .map((v, i) => {
+            page.drawLine({
+              start: { x: i * n, y: 0 },
+              end: { x: i * n, y: page.getHeight() },
+            });
+          });
+      };
+
+      drawGrid(page)
+
       // Draw a filled rectangle with sharp corners
       drawRectangle(50, 500, 100, 50, {
         color: rgb(1, 0, 0), // red
@@ -108,6 +130,12 @@
 
       page.drawSvg(svg, { x: 200, y: 300, width: 100, height: 50 });
 
+      drawRectangle(300, 300, 100, 50, {
+        color: rgb(0.5, 0.5, 0),
+        rx: 25,
+        ry: 25,
+      });
+
       const pdfBytes = await pdfDoc.save();
       renderInIframe(pdfBytes);
     }

src/api/operations.ts

@@ -239,10 +239,10 @@ export const drawRectangle = (options: {
 }) => {
   const { width, height, xSkew, ySkew, rotate, matrix } = options;
   const w = typeof width === 'number' ? width : width.asNumber();
-  const h = -(typeof height === 'number' ? height : height.asNumber());
+  const h = typeof height === 'number' ? height : height.asNumber();
   const x = typeof options.x === 'number' ? options.x : options.x.asNumber();
   const y = typeof options.y === 'number' ? options.y : options.y.asNumber();
-
+  
   // Ensure rx and ry are within bounds
   const rx = Math.max(0, Math.min(options.rx || 0, w / 2));
   const ry = Math.max(0, Math.min(options.ry || 0, h / 2));
@@ -264,14 +264,14 @@ export const drawRectangle = (options: {
         ].join(' ')
       : `M 0,0 H ${w} V ${h} H 0 Z`;
 
-  // Transformation to apply rotation and skew
   // the drawRectangle applies the rotation around its anchor point (bottom-left), it means that the translation should be applied before the rotation
   // invert the y parameter because transformationToMatrix expects parameters from an svg space. The same is valid for rotate and ySkew
   let fullMatrix = combineMatrix(
     matrix || identityMatrix,
     transformationToMatrix('translate', [x, -y]),
   );
-
+
+  // Transformation to apply rotation and skew
   if (rotate) {
     fullMatrix = combineMatrix(
       fullMatrix,
@@ -290,6 +290,13 @@ export const drawRectangle = (options: {
       transformationToMatrix('skewY', [-toDegrees(ySkew)]),
     );
   }
+
+  // move the rectangle upward so that the (x, y) coord is bottom-left 
+  fullMatrix = combineMatrix(
+    fullMatrix,
+    transformationToMatrix('translateY', [-h]),
+  );
+
   return drawSvgPath(d, {
     ...options,
     x: 0,

src/api/svg.ts

@@ -390,7 +390,7 @@ const runnersToPage = (
       x: 0,
       y: 0,
       width: element.svgAttributes.width,
-      height: element.svgAttributes.height * -1,
+      height: element.svgAttributes.height,
       rx: element.svgAttributes.rx,
       ry: element.svgAttributes.ry,
       borderColor: element.svgAttributes.stroke,
@@ -399,7 +399,7 @@ const runnersToPage = (
       borderLineCap: element.svgAttributes.strokeLineCap,
       color: element.svgAttributes.fill,
       opacity: element.svgAttributes.fillOpacity,
-      matrix: element.svgAttributes.matrix,
+      matrix: combineTransformation(element.svgAttributes.matrix, 'translateY', [element.svgAttributes.height]),
       clipSpaces: element.svgAttributes.clipSpaces,
       blendMode: options.blendMode,
     });