@leapfrog/interactive-canvas 2.0.22-beta-3 → 2.0.22-beta-4
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.
|
@@ -2,6 +2,7 @@ import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
|
|
|
2
2
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
3
3
|
import * as fabric from 'fabric';
|
|
4
4
|
import { JSDOM } from 'jsdom';
|
|
5
|
+
import { createCanvas } from 'canvas';
|
|
5
6
|
|
|
6
7
|
const PIXELS_PER_MM$2 = 3.937;
|
|
7
8
|
class MillimeterDimensions {
|
|
@@ -3489,7 +3490,13 @@ class AbstractInteractiveCanvas {
|
|
|
3489
3490
|
* @inheritDoc
|
|
3490
3491
|
*/
|
|
3491
3492
|
createPNGStream() {
|
|
3492
|
-
return this.fabricCanvas.createPNGStream();
|
|
3493
|
+
//return (this.fabricCanvas as any).createPNGStream();
|
|
3494
|
+
const options = {
|
|
3495
|
+
format: "png",
|
|
3496
|
+
multiplier: 2,
|
|
3497
|
+
enableRetinaScaling: true
|
|
3498
|
+
};
|
|
3499
|
+
return this.fabricCanvas.toDataURL(options);
|
|
3493
3500
|
}
|
|
3494
3501
|
/**
|
|
3495
3502
|
* @override
|
|
@@ -3736,16 +3743,25 @@ class SelectionData {
|
|
|
3736
3743
|
|
|
3737
3744
|
class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
|
|
3738
3745
|
constructor() {
|
|
3746
|
+
let canvas;
|
|
3739
3747
|
if (typeof window === "undefined") {
|
|
3740
3748
|
const { window } = new JSDOM('<!DOCTYPE html><html><body></body></html>');
|
|
3741
3749
|
global.window = window;
|
|
3742
3750
|
global.document = window.document;
|
|
3743
3751
|
global.HTMLElement = window.HTMLElement;
|
|
3744
3752
|
global.HTMLCanvasElement = window.HTMLCanvasElement;
|
|
3745
|
-
global.requestAnimationFrame = (callback) =>
|
|
3746
|
-
|
|
3753
|
+
global.window.requestAnimationFrame = (callback) => {
|
|
3754
|
+
return setTimeout(() => callback(Date.now()), 16);
|
|
3755
|
+
};
|
|
3756
|
+
global.window.cancelAnimationFrame = (id) => {
|
|
3757
|
+
clearTimeout(id);
|
|
3758
|
+
};
|
|
3759
|
+
const nodeCanvas = createCanvas(640, 480);
|
|
3760
|
+
canvas = new fabric.StaticCanvas(nodeCanvas);
|
|
3761
|
+
}
|
|
3762
|
+
else {
|
|
3763
|
+
canvas = new fabric.StaticCanvas(undefined, { width: 640, height: 480 });
|
|
3747
3764
|
}
|
|
3748
|
-
const canvas = new fabric.StaticCanvas(undefined, { width: 640, height: 480 });
|
|
3749
3765
|
super(fabric, canvas, 0);
|
|
3750
3766
|
this.headless = true;
|
|
3751
3767
|
}
|
|
@@ -4,6 +4,7 @@ var _ = require('lodash');
|
|
|
4
4
|
var rxjs = require('rxjs');
|
|
5
5
|
var fabric = require('fabric');
|
|
6
6
|
var jsdom = require('jsdom');
|
|
7
|
+
var canvas = require('canvas');
|
|
7
8
|
|
|
8
9
|
function _interopNamespaceDefault(e) {
|
|
9
10
|
var n = Object.create(null);
|
|
@@ -3510,7 +3511,13 @@ class AbstractInteractiveCanvas {
|
|
|
3510
3511
|
* @inheritDoc
|
|
3511
3512
|
*/
|
|
3512
3513
|
createPNGStream() {
|
|
3513
|
-
return this.fabricCanvas.createPNGStream();
|
|
3514
|
+
//return (this.fabricCanvas as any).createPNGStream();
|
|
3515
|
+
const options = {
|
|
3516
|
+
format: "png",
|
|
3517
|
+
multiplier: 2,
|
|
3518
|
+
enableRetinaScaling: true
|
|
3519
|
+
};
|
|
3520
|
+
return this.fabricCanvas.toDataURL(options);
|
|
3514
3521
|
}
|
|
3515
3522
|
/**
|
|
3516
3523
|
* @override
|
|
@@ -3757,17 +3764,26 @@ class SelectionData {
|
|
|
3757
3764
|
|
|
3758
3765
|
class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
|
|
3759
3766
|
constructor() {
|
|
3767
|
+
let canvas$1;
|
|
3760
3768
|
if (typeof window === "undefined") {
|
|
3761
3769
|
const { window } = new jsdom.JSDOM('<!DOCTYPE html><html><body></body></html>');
|
|
3762
3770
|
global.window = window;
|
|
3763
3771
|
global.document = window.document;
|
|
3764
3772
|
global.HTMLElement = window.HTMLElement;
|
|
3765
3773
|
global.HTMLCanvasElement = window.HTMLCanvasElement;
|
|
3766
|
-
global.requestAnimationFrame = (callback) =>
|
|
3767
|
-
|
|
3774
|
+
global.window.requestAnimationFrame = (callback) => {
|
|
3775
|
+
return setTimeout(() => callback(Date.now()), 16);
|
|
3776
|
+
};
|
|
3777
|
+
global.window.cancelAnimationFrame = (id) => {
|
|
3778
|
+
clearTimeout(id);
|
|
3779
|
+
};
|
|
3780
|
+
const nodeCanvas = canvas.createCanvas(640, 480);
|
|
3781
|
+
canvas$1 = new fabric__namespace.StaticCanvas(nodeCanvas);
|
|
3782
|
+
}
|
|
3783
|
+
else {
|
|
3784
|
+
canvas$1 = new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 });
|
|
3768
3785
|
}
|
|
3769
|
-
|
|
3770
|
-
super(fabric__namespace, canvas, 0);
|
|
3786
|
+
super(fabric__namespace, canvas$1, 0);
|
|
3771
3787
|
this.headless = true;
|
|
3772
3788
|
}
|
|
3773
3789
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leapfrog/interactive-canvas",
|
|
3
|
-
"version": "2.0.22-beta-
|
|
3
|
+
"version": "2.0.22-beta-4",
|
|
4
4
|
"description": "Leapfrog interactive canvas",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"typescript": "^6.0.3"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
+
"canvas": "^3.2.3",
|
|
22
23
|
"fabric": "^7.2.0",
|
|
23
24
|
"jsdom": "^29.0.2",
|
|
24
25
|
"lodash": "^4.18.1",
|