@leapfrog/interactive-canvas 2.0.22-beta-8 → 2.0.23-beta-1

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

@@ -202,11 +202,11 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     sendObjectToBack(target: FabricObject): void;
+    addImageObject(imageUrl: string): Promise<IImage>;
     /**
      * @override
      * @inheritDoc
      */
-    addImageObject(imageUrl: string): Promise<IImage>;
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.es.js

@@ -1,7 +1,7 @@
 import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
+import { createCanvas, loadImage } from 'canvas';
 import * as fabric from 'fabric';
-import { JSDOM } from 'jsdom';
 
 const PIXELS_PER_MM$2 = 3.937;
 class MillimeterDimensions {
@@ -3034,41 +3034,108 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
-    /**
-     * @override
-     * @inheritDoc
-     */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            //Don't let the image be more than half the canvas in size.
+            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
-            return yield new Promise((resolve) => {
-                this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                    const id = this.randomId();
-                    let newScale = 1;
-                    const curWidth = newScale * fabricImage.width;
-                    if (curWidth > maxWidth) {
-                        newScale = maxWidth / curWidth;
-                    }
-                    fabricImage.set({
-                        id: id,
-                        scaleX: newScale,
-                        scaleY: newScale,
-                        originX: "left",
-                        originY: "top"
+            if (this.headless) {
+                // Server-side logic without mock DOM
+                //const { createCanvas, loadImage } = require("canvas"); // Use node-canvas
+                const canvas = createCanvas(1, 1); // Temporary canvas for image processing
+                canvas.getContext("2d");
+                const image = yield loadImage(imageUrl);
+                const id = this.randomId();
+                let newScale = 1;
+                const curWidth = newScale * image.width;
+                if (curWidth > maxWidth) {
+                    newScale = maxWidth / curWidth;
+                }
+                // Set image properties and add to the canvas
+                const fabricImage = new this.fabric.Image(image, {
+                    id: id,
+                    scaleX: newScale,
+                    scaleY: newScale,
+                    originX: "left",
+                    originY: "top",
+                });
+                this.fabricCanvas.add(fabricImage);
+                const object = new Image(this, fabricImage);
+                this.trackNewObject(object);
+                this.syncObjectList();
+                return object;
+            }
+            else {
+                // Browser-side logic
+                return yield new Promise((resolve) => {
+                    this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
+                        const id = this.randomId();
+                        let newScale = 1;
+                        const curWidth = newScale * fabricImage.width;
+                        if (curWidth > maxWidth) {
+                            newScale = maxWidth / curWidth;
+                        }
+                        fabricImage.set({
+                            id: id,
+                            scaleX: newScale,
+                            scaleY: newScale,
+                            originX: "left",
+                            originY: "top",
+                        });
+                        this.fabricCanvas.add(fabricImage);
+                        const object = new Image(this, fabricImage);
+                        this.trackNewObject(object);
+                        this.selectFabricObject(fabricImage);
+                        this.syncObjectList();
+                        resolve(object);
                     });
-                    this.fabricCanvas.add(fabricImage);
-                    const object = new Image(this, fabricImage);
-                    this.trackNewObject(object);
-                    this.selectFabricObject(fabricImage);
-                    this.syncObjectList();
-                    resolve(object);
                 });
-            });
+            }
         });
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    /*  public async addImageObject(imageUrl: string): Promise<IImage> {
+          //Don't let the image be more than half the canvas in size.
+          const maxSizeScale = 2;
+          const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+  
+          const options = {crossOrigin: "anonymous"};
+          return await new Promise((resolve) => {
+              this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                  const id = this.randomId();
+  
+                  let newScale = 1;
+  
+                  const curWidth = newScale * fabricImage.width;
+                  if (curWidth > maxWidth) {
+                      newScale = maxWidth / curWidth;
+                  }
+  
+                  fabricImage.set({
+                      id: id,
+                      scaleX: newScale,
+                      scaleY: newScale,
+                      originX: "left",
+                      originY: "top"
+                  } as any);
+  
+                  this.fabricCanvas.add(fabricImage);
+  
+                  const object = new Image(this, fabricImage);
+                  this.trackNewObject(object);
+                  this.selectFabricObject(fabricImage);
+  
+                  this.syncObjectList();
+  
+                  resolve(object);
+              });
+          });
+      }
+  */
     /**
      * @override
      * @inheritDoc
@@ -3736,20 +3803,7 @@ class SelectionData {
 
 class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
     constructor() {
-        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.window.requestAnimationFrame = (callback) => {
-                return setTimeout(() => callback(Date.now()), 16);
-            };
-            global.window.cancelAnimationFrame = (id) => {
-                clearTimeout(id);
-            };
-        }
-        super(fabric, new fabric.StaticCanvas(undefined, { width: 640, height: 480 }), 1);
+        super(fabric, new fabric.StaticCanvas(undefined, { width: 640, height: 480 }), 0);
         this.headless = true;
     }
     /**

package/dist/interactive-canvas.js

@@ -2,8 +2,8 @@
 
 var _ = require('lodash');
 var rxjs = require('rxjs');
+var canvas = require('canvas');
 var fabric = require('fabric');
-var jsdom = require('jsdom');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3055,41 +3055,108 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
-    /**
-     * @override
-     * @inheritDoc
-     */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            //Don't let the image be more than half the canvas in size.
+            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
-            return yield new Promise((resolve) => {
-                this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                    const id = this.randomId();
-                    let newScale = 1;
-                    const curWidth = newScale * fabricImage.width;
-                    if (curWidth > maxWidth) {
-                        newScale = maxWidth / curWidth;
-                    }
-                    fabricImage.set({
-                        id: id,
-                        scaleX: newScale,
-                        scaleY: newScale,
-                        originX: "left",
-                        originY: "top"
+            if (this.headless) {
+                // Server-side logic without mock DOM
+                //const { createCanvas, loadImage } = require("canvas"); // Use node-canvas
+                const canvas$1 = canvas.createCanvas(1, 1); // Temporary canvas for image processing
+                canvas$1.getContext("2d");
+                const image = yield canvas.loadImage(imageUrl);
+                const id = this.randomId();
+                let newScale = 1;
+                const curWidth = newScale * image.width;
+                if (curWidth > maxWidth) {
+                    newScale = maxWidth / curWidth;
+                }
+                // Set image properties and add to the canvas
+                const fabricImage = new this.fabric.Image(image, {
+                    id: id,
+                    scaleX: newScale,
+                    scaleY: newScale,
+                    originX: "left",
+                    originY: "top",
+                });
+                this.fabricCanvas.add(fabricImage);
+                const object = new Image(this, fabricImage);
+                this.trackNewObject(object);
+                this.syncObjectList();
+                return object;
+            }
+            else {
+                // Browser-side logic
+                return yield new Promise((resolve) => {
+                    this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
+                        const id = this.randomId();
+                        let newScale = 1;
+                        const curWidth = newScale * fabricImage.width;
+                        if (curWidth > maxWidth) {
+                            newScale = maxWidth / curWidth;
+                        }
+                        fabricImage.set({
+                            id: id,
+                            scaleX: newScale,
+                            scaleY: newScale,
+                            originX: "left",
+                            originY: "top",
+                        });
+                        this.fabricCanvas.add(fabricImage);
+                        const object = new Image(this, fabricImage);
+                        this.trackNewObject(object);
+                        this.selectFabricObject(fabricImage);
+                        this.syncObjectList();
+                        resolve(object);
                     });
-                    this.fabricCanvas.add(fabricImage);
-                    const object = new Image(this, fabricImage);
-                    this.trackNewObject(object);
-                    this.selectFabricObject(fabricImage);
-                    this.syncObjectList();
-                    resolve(object);
                 });
-            });
+            }
         });
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    /*  public async addImageObject(imageUrl: string): Promise<IImage> {
+          //Don't let the image be more than half the canvas in size.
+          const maxSizeScale = 2;
+          const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+  
+          const options = {crossOrigin: "anonymous"};
+          return await new Promise((resolve) => {
+              this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                  const id = this.randomId();
+  
+                  let newScale = 1;
+  
+                  const curWidth = newScale * fabricImage.width;
+                  if (curWidth > maxWidth) {
+                      newScale = maxWidth / curWidth;
+                  }
+  
+                  fabricImage.set({
+                      id: id,
+                      scaleX: newScale,
+                      scaleY: newScale,
+                      originX: "left",
+                      originY: "top"
+                  } as any);
+  
+                  this.fabricCanvas.add(fabricImage);
+  
+                  const object = new Image(this, fabricImage);
+                  this.trackNewObject(object);
+                  this.selectFabricObject(fabricImage);
+  
+                  this.syncObjectList();
+  
+                  resolve(object);
+              });
+          });
+      }
+  */
     /**
      * @override
      * @inheritDoc
@@ -3757,20 +3824,7 @@ class SelectionData {
 
 class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
     constructor() {
-        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.window.requestAnimationFrame = (callback) => {
-                return setTimeout(() => callback(Date.now()), 16);
-            };
-            global.window.cancelAnimationFrame = (id) => {
-                clearTimeout(id);
-            };
-        }
-        super(fabric__namespace, new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 }), 1);
+        super(fabric__namespace, new fabric__namespace.StaticCanvas(undefined, { width: 640, height: 480 }), 0);
         this.headless = true;
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "2.0.22-beta-8",
+  "version": "2.0.23-beta-1",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"
@@ -14,13 +14,12 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@types/jsdom": "^28.0.3",
     "@types/lodash": "^4.17.23",
     "typescript": "^6.0.3"
   },
   "dependencies": {
+    "canvas": "^3.2.3",
     "fabric": "^7.2.0",
-    "jsdom": "^29.0.2",
     "lodash": "^4.18.1",
     "rollup": "^4.60.3",
     "rollup-plugin-typescript2": "^0.37.0",