@leapfrog/interactive-canvas 2.0.22-beta-2 → 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.
Files changed (3) hide show
  1. package/dist/interactive-canvas.es.js +28 -7
  2. package/dist/interactive-canvas.js +29 -8
  3. package/package.json +4 -1
package/dist/interactive-canvas.es.js CHANGED
@@ -1,7 +1,8 @@
1
1
  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
- import { StaticCanvas } from 'fabric/node';
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,11 +3743,25 @@ class SelectionData {
3736
3743
 
3737
3744
  class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
3738
3745
  constructor() {
3739
- //super(fabric, new StaticCanvas(null as any, {width: 640, height: 480}) as unknown as Canvas, 0);
3740
- const isNode = typeof window === "undefined";
3741
- const canvas = isNode
3742
- ? new StaticCanvas(null, { width: 640, height: 480 })
3743
- : new fabric.StaticCanvas(undefined, { width: 640, height: 480 });
3746
+ let canvas;
3747
+ if (typeof window === "undefined") {
3748
+ const { window } = new JSDOM('<!DOCTYPE html><html><body></body></html>');
3749
+ global.window = window;
3750
+ global.document = window.document;
3751
+ global.HTMLElement = window.HTMLElement;
3752
+ global.HTMLCanvasElement = window.HTMLCanvasElement;
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 });
3764
+ }
3744
3765
  super(fabric, canvas, 0);
3745
3766
  this.headless = true;
3746
3767
  }
package/dist/interactive-canvas.js CHANGED
@@ -3,7 +3,8 @@
3
3
  var _ = require('lodash');
4
4
  var rxjs = require('rxjs');
5
5
  var fabric = require('fabric');
6
- var node = require('fabric/node');
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,12 +3764,26 @@ class SelectionData {
3757
3764
 
3758
3765
  class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
3759
3766
  constructor() {
3760
- //super(fabric, new StaticCanvas(null as any, {width: 640, height: 480}) as unknown as Canvas, 0);
3761
- const isNode = typeof window === "undefined";
3762
- const canvas = isNode
3763
- ? new node.StaticCanvas(null, { width: 640, height: 480 })
3764
- : new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 });
3765
- super(fabric__namespace, canvas, 0);
3767
+ let canvas$1;
3768
+ if (typeof window === "undefined") {
3769
+ const { window } = new jsdom.JSDOM('<!DOCTYPE html><html><body></body></html>');
3770
+ global.window = window;
3771
+ global.document = window.document;
3772
+ global.HTMLElement = window.HTMLElement;
3773
+ global.HTMLCanvasElement = window.HTMLCanvasElement;
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 });
3785
+ }
3786
+ super(fabric__namespace, canvas$1, 0);
3766
3787
  this.headless = true;
3767
3788
  }
3768
3789
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapfrog/interactive-canvas",
3
- "version": "2.0.22-beta-2",
3
+ "version": "2.0.22-beta-4",
4
4
  "description": "Leapfrog interactive canvas",
5
5
  "files": [
6
6
  "dist"
@@ -14,11 +14,14 @@
14
14
  "prepublishOnly": "npm run build"
15
15
  },
16
16
  "devDependencies": {
17
+ "@types/jsdom": "^28.0.3",
17
18
  "@types/lodash": "^4.17.23",
18
19
  "typescript": "^6.0.3"
19
20
  },
20
21
  "dependencies": {
22
+ "canvas": "^3.2.3",
21
23
  "fabric": "^7.2.0",
24
+ "jsdom": "^29.0.2",
22
25
  "lodash": "^4.18.1",
23
26
  "rollup": "^4.60.3",
24
27
  "rollup-plugin-typescript2": "^0.37.0",