npm - @leapfrog/interactive-canvas - Versions diffs - 2.0.22-beta-3 → 2.0.22-beta-5 - Mend

@leapfrog/interactive-canvas 2.0.22-beta-3 → 2.0.22-beta-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/abstract-interactive-canvas.d.ts +1 -1
package/dist/interactive-canvas.es.js +20 -5
package/dist/interactive-canvas.js +21 -6
package/package.json +2 -1

package/dist/abstract-interactive-canvas.d.ts CHANGED Viewed

@@ -319,7 +319,7 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @override
      * @inheritDoc
      */
-    createPNGStream(): any;
+    createPNGStream(multiplier?: number): any;
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.es.js CHANGED Viewed

@@ -2,6 +2,7 @@ import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
 import * as fabric from 'fabric';
 import { JSDOM } from 'jsdom';
+import { createCanvas } from 'canvas';
 const PIXELS_PER_MM$2 = 3.937;
 class MillimeterDimensions {
@@ -3488,8 +3489,13 @@ class AbstractInteractiveCanvas {
      * @override
      * @inheritDoc
      */
-    createPNGStream() {
-        return this.fabricCanvas.createPNGStream();
+    createPNGStream(multiplier) {
+        const options = {
+            format: "png",
+            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
+            enableRetinaScaling: true
+        };
+        return this.fabricCanvas.toDataURL(options);
     }
     /**
      * @override
@@ -3736,16 +3742,25 @@ class SelectionData {
 class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
     constructor() {
+        let canvas;
         if (typeof window === "undefined") {
             const { window } = new JSDOM('<!DOCTYPE html><html><body></body></html>');
             global.window = window;
             global.document = window.document;
             global.HTMLElement = window.HTMLElement;
             global.HTMLCanvasElement = window.HTMLCanvasElement;
-            global.requestAnimationFrame = (callback) => setTimeout(() => callback(Date.now()), 16);
-            global.cancelAnimationFrame = (id) => clearTimeout(id);
+            global.window.requestAnimationFrame = (callback) => {
+                return setTimeout(() => callback(Date.now()), 16);
+            };
+            global.window.cancelAnimationFrame = (id) => {
+                clearTimeout(id);
+            };
+            const nodeCanvas = createCanvas(640, 480);
+            canvas = new fabric.StaticCanvas(nodeCanvas);
+        }
+        else {
+            canvas = new fabric.StaticCanvas(undefined, { width: 640, height: 480 });
         }
-        const canvas = new fabric.StaticCanvas(undefined, { width: 640, height: 480 });
         super(fabric, canvas, 0);
         this.headless = true;
     }

package/dist/interactive-canvas.js CHANGED Viewed

@@ -4,6 +4,7 @@ var _ = require('lodash');
 var rxjs = require('rxjs');
 var fabric = require('fabric');
 var jsdom = require('jsdom');
+var canvas = require('canvas');
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3509,8 +3510,13 @@ class AbstractInteractiveCanvas {
      * @override
      * @inheritDoc
      */
-    createPNGStream() {
-        return this.fabricCanvas.createPNGStream();
+    createPNGStream(multiplier) {
+        const options = {
+            format: "png",
+            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
+            enableRetinaScaling: true
+        };
+        return this.fabricCanvas.toDataURL(options);
     }
     /**
      * @override
@@ -3757,17 +3763,26 @@ class SelectionData {
 class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
     constructor() {
+        let canvas$1;
         if (typeof window === "undefined") {
             const { window } = new jsdom.JSDOM('<!DOCTYPE html><html><body></body></html>');
             global.window = window;
             global.document = window.document;
             global.HTMLElement = window.HTMLElement;
             global.HTMLCanvasElement = window.HTMLCanvasElement;
-            global.requestAnimationFrame = (callback) => setTimeout(() => callback(Date.now()), 16);
-            global.cancelAnimationFrame = (id) => clearTimeout(id);
+            global.window.requestAnimationFrame = (callback) => {
+                return setTimeout(() => callback(Date.now()), 16);
+            };
+            global.window.cancelAnimationFrame = (id) => {
+                clearTimeout(id);
+            };
+            const nodeCanvas = canvas.createCanvas(640, 480);
+            canvas$1 = new fabric__namespace.StaticCanvas(nodeCanvas);
+        }
+        else {
+            canvas$1 = new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 });
         }
-        const canvas = new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 });
-        super(fabric__namespace, canvas, 0);
+        super(fabric__namespace, canvas$1, 0);
         this.headless = true;
     }
     /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "2.0.22-beta-3",
+  "version": "2.0.22-beta-5",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"
@@ -19,6 +19,7 @@
     "typescript": "^6.0.3"
   },
   "dependencies": {
+    "canvas": "^3.2.3",
     "fabric": "^7.2.0",
     "jsdom": "^29.0.2",
     "lodash": "^4.18.1",