@meursyphus/flitter 2.0.0-alpha.6 → 2.0.0-alpha.7

package/index.cjs

@@ -123,7 +123,13 @@ var SceneBuilder = class {
   }
   render(ctx) {
     for (const { x, y, picture } of __privateGet(this, _pictures)) {
-      ctx.drawImage(picture.toImage(), x, y);
+      ctx.drawImage(
+        picture.toImage(),
+        x,
+        y,
+        picture.size.width,
+        picture.size.height
+      );
     }
   }
   addPicture(props) {
@@ -140,6 +146,12 @@ var Picture = class {
   toImage() {
     return __privateGet(this, _source);
   }
+  get size() {
+    return {
+      width: __privateGet(this, _source).width / window.devicePixelRatio,
+      height: __privateGet(this, _source).height / window.devicePixelRatio
+    };
+  }
 };
 _source = new WeakMap();
 var _source2;
@@ -151,8 +163,9 @@ var PictureRecorder = class {
   constructor(paintBounds) {
     __privateAdd(this, _source2, void 0);
     __privateSet(this, _source2, document.createElement("canvas"));
-    __privateGet(this, _source2).width = paintBounds.width;
-    __privateGet(this, _source2).height = paintBounds.height;
+    const dpr = window.devicePixelRatio;
+    __privateGet(this, _source2).width = paintBounds.width * dpr;
+    __privateGet(this, _source2).height = paintBounds.height * dpr;
   }
   /**
    * @implements: This function is still incomplete. So It needs paintSize temporarily. Once completed, it will intercept the CanvasRenderingContext2D API
@@ -161,6 +174,7 @@ var PictureRecorder = class {
    */
   createCanvasContext() {
     const ctx = __privateGet(this, _source2).getContext("2d");
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     return ctx;
   }
   endRecording() {

package/index.d.cts

@@ -3540,6 +3540,10 @@ declare class Picture {
     #private;
     constructor(source: HTMLCanvasElement);
     toImage(): CanvasImageSource;
+    get size(): {
+        width: number;
+        height: number;
+    };
 }
 
 declare class CanvasPaintingContext {

package/index.d.ts

@@ -3540,6 +3540,10 @@ declare class Picture {
     #private;
     constructor(source: HTMLCanvasElement);
     toImage(): CanvasImageSource;
+    get size(): {
+        width: number;
+        height: number;
+    };
 }
 
 declare class CanvasPaintingContext {

package/index.global.js

@@ -304,7 +304,13 @@
     }
     render(ctx) {
       for (const { x, y, picture } of __privateGet(this, _pictures)) {
-        ctx.drawImage(picture.toImage(), x, y);
+        ctx.drawImage(
+          picture.toImage(),
+          x,
+          y,
+          picture.size.width,
+          picture.size.height
+        );
       }
     }
     addPicture(props) {
@@ -321,6 +327,12 @@
     toImage() {
       return __privateGet(this, _source);
     }
+    get size() {
+      return {
+        width: __privateGet(this, _source).width / window.devicePixelRatio,
+        height: __privateGet(this, _source).height / window.devicePixelRatio
+      };
+    }
   };
   _source = new WeakMap();
   var _source2;
@@ -332,8 +344,9 @@
     constructor(paintBounds) {
       __privateAdd(this, _source2, void 0);
       __privateSet(this, _source2, document.createElement("canvas"));
-      __privateGet(this, _source2).width = paintBounds.width;
-      __privateGet(this, _source2).height = paintBounds.height;
+      const dpr = window.devicePixelRatio;
+      __privateGet(this, _source2).width = paintBounds.width * dpr;
+      __privateGet(this, _source2).height = paintBounds.height * dpr;
     }
     /**
      * @implements: This function is still incomplete. So It needs paintSize temporarily. Once completed, it will intercept the CanvasRenderingContext2D API
@@ -342,6 +355,7 @@
      */
     createCanvasContext() {
       const ctx = __privateGet(this, _source2).getContext("2d");
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
       return ctx;
     }
     endRecording() {

package/index.js

@@ -123,7 +123,13 @@ var SceneBuilder = class {
   }
   render(ctx) {
     for (const { x, y, picture } of __privateGet(this, _pictures)) {
-      ctx.drawImage(picture.toImage(), x, y);
+      ctx.drawImage(
+        picture.toImage(),
+        x,
+        y,
+        picture.size.width,
+        picture.size.height
+      );
     }
   }
   addPicture(props) {
@@ -140,6 +146,12 @@ var Picture = class {
   toImage() {
     return __privateGet(this, _source);
   }
+  get size() {
+    return {
+      width: __privateGet(this, _source).width / window.devicePixelRatio,
+      height: __privateGet(this, _source).height / window.devicePixelRatio
+    };
+  }
 };
 _source = new WeakMap();
 var _source2;
@@ -151,8 +163,9 @@ var PictureRecorder = class {
   constructor(paintBounds) {
     __privateAdd(this, _source2, void 0);
     __privateSet(this, _source2, document.createElement("canvas"));
-    __privateGet(this, _source2).width = paintBounds.width;
-    __privateGet(this, _source2).height = paintBounds.height;
+    const dpr = window.devicePixelRatio;
+    __privateGet(this, _source2).width = paintBounds.width * dpr;
+    __privateGet(this, _source2).height = paintBounds.height * dpr;
   }
   /**
    * @implements: This function is still incomplete. So It needs paintSize temporarily. Once completed, it will intercept the CanvasRenderingContext2D API
@@ -161,6 +174,7 @@ var PictureRecorder = class {
    */
   createCanvasContext() {
     const ctx = __privateGet(this, _source2).getContext("2d");
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     return ctx;
   }
   endRecording() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
   "keywords": [
     "flitter",